容器与实例的关系

表达式和代码语句的区别

图二

初识vue的总结

v-bind指令

vue两大类模板语法

指令语法

v-model指令只能用于表单类标签上面

v-model的简写形式

两种数据绑定方式

vue实例挂载容器的两种写法

如何查看vue的实例

MVVM在一个vue实例的体现

vue2中的function为什么要写成普通函数

MVVM模型及其两个观察

Object.defineProperty

默认不能修改

默认不能遍历

设置遍历

设置修改

设置是否可以删除

getter

getter和setter的使用

属性代理

对比:没有数据代理和具有数据代理

事件参数

默认参数

图零

图一

图二

事件的基本使用

事件修饰符

passive修饰符

修饰符连着写

键盘事件

			1.Vue中常用的按键别名：
						回车 => enter
						删除 => delete (捕获“删除”和“退格”键)
						退出 => esc
						空格 => space
						换行 => tab (特殊，必须配合keydown去使用)
						上 => up
						下 => down
						左 => left
						右 => right

			2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

			3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
						(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
						(2).配合keydown使用：正常触发事件。

			4.也可以使用keyCode去指定具体的按键（不推荐）

			5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

特殊的tab键

1. tab键比较特殊
2. tab键在系统中的默认作用,是将焦点从当前对象上切换走
3. 所以我们如果配置keyup使用,那么就是直接切换走了,可能效果就没有
4. 所以tab键,配合keydown使用,就是比较好

组合按键绑定

1. 意思就是按下ctrl+y,才能够触发事件

加括号和不加括号的区别

计算属性

		计算属性：
				1.定义：要用的属性不存在，要通过已有属性计算得来。
				2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
				3.get函数什么时候执行？
							(1).初次读取时会执行一次。
							(2).当依赖的数据发生改变时会被再次调用。
				4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
				5.备注：
						1.计算属性最终会出现在vm上，直接读取使用即可。
						2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

watch监听

			监视属性watch：
				1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
				2.监视的属性必须存在，才能进行监视！！
				3.监视的两种写法：
						(1).new Vue时传入watch配置
						(2).通过vm.$watch监视

immediate

两种写法

监听复杂的数据

对象写法vs简写写法

watch和computed的区别

			computed和watch之间的区别：
					1.computed能完成的功能，watch都可以完成。
					2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
			两个重要的小原则：
			
						1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
						
						2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
							这样this的指向才是vm 或 组件实例对象。

watch中的异步函数要使用箭头函数

1. 我理解了,因为这个setTimeout()不是被vue管理的函数,而是被Windows管理的函数
2. 所以要写成箭头函数
3. 可以参考下面的原则:
4. 

总结

			深度监视：
					(1).Vue中的watch默认不监测对象内部值的改变（一层）。
					(2).配置deep:true可以监测对象内部值改变（多层）。
			备注：
					(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
					(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

动态类名的写法

字符串写法和数组写法

对象写法

动态样式和动态类名总结

		绑定样式：
				1. class样式
							写法:class="xxx" xxx可以是字符串、对象、数组。
									字符串写法适用于：类名不确定，要动态获取。
									对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
									数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
				2. style样式
							:style="{fontSize: xxx}"其中xxx是动态值。
							:style="[a,b]"其中a、b是样式对象。

条件指令

			条件渲染：
						1.v-if
									写法：
											(1).v-if="表达式" 
											(2).v-else-if="表达式"
											(3).v-else="表达式"
									适用于：切换频率较低的场景。
									特点：不展示的DOM元素直接被移除。
									注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

						2.v-show
									写法：v-show="表达式"
									适用于：切换频率较高的场景。
									特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
							
						3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

虚拟DOM对比算法

1. key=0时,对比,发现张三和老刘不一样,于是从虚拟dom拿出数据,渲染真实dom
2. key=0时,对比,发现input标签是一样的,于是不做任何处理,直接使用真实dom中的input标签
3. 注意,因为我们对比的是虚拟dom,所以在真实dom中in put框可能输入了一些内容,但是在虚拟dom中他们是一样的,尽管在真实dom中是不一样的,这点需要注意

循环指令绑定key的原因

			面试题：react、vue中的key有什么作用？（key的内部原理）
					
					1. 虚拟DOM中key的作用：
									key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
									随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
									
					2.对比规则：
								(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
											①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
											②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

								(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
											创建新的真实DOM，随后渲染到到页面。
											
					3. 用index作为key可能会引发的问题：
										1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
														会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

										2. 如果结构中还包含输入类的DOM：
														会产生错误DOM更新 ==> 界面有问题。

					4. 开发中如何选择key?:
										1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
										2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
											使用index作为key是没有问题的。

标签：虚拟,vue,DOM,watch,Vue,vu,key,硅谷,写法
来源： https://www.cnblogs.com/zhuoss/p/16534037.html