Vue教程-9-重读官网后的感悟
目录
0.前言
1.为什么要有计算属性computed？
2.为什么是计算属性computed，而不是方法methods？
3.计算属性computed与侦听器watch
4.当v-bind绑定HTML Class属性时
5.当v-bind绑定HTML Style属性时
6.v-bind:style与浏览器引擎前缀
6.1.CSS 前缀
6.2.JS接口前缀
6.3.JS属性和方法前缀
6.4.v-bind:style与浏览器引擎前缀
7.v-if与条件渲染
8.v-for与列表渲染
9.Vue的特殊属性：key
10.v-on与事件处理
11.v-model与表单输入绑定
12.Vue的响应式原理
12.1.如何追踪变化
12.2.检测变化的注意事项
12.3.声明响应式property
12.4.异步更新队列
13.组件
13.1.基础
13.2.data选项
13.3.组件的组织
13.4.通过Prop向子组件传递数据
13.5.单个根元素
13.6.监听子组件事件
13.6.1.使用事件抛出一个值
13.6.2.在组件上使用v-model
13.7.动态组件
13.8.解析DOM模板时的注意事项
14.组件注册
14.1.组件名
14.2.全局注册
14.3.局部注册
14.4.模块系统
15.Prop
15.1.Prop大小写
15.2.Prop类型
15.3.传递静态或动态Prop
15.4.单向数据流
15.5.Prop验证
15.6.非Prop的属性
15.6.1.替换/合并已有的属性
15.6.2.禁用Attribute继承
16.动态组件、异步组件
16.1.在动态组件上使用 keep-alive
16.2.异步组件
0.前言
闲聊无事，都会来Vue官网逛逛，每次来的时候，总会得到新的感悟，因此，想记录下来，这样日积月累逐渐增强自己；
1.为什么要有计算属性computed？
为了防止在template/模板中出现大量的逻辑代码，导致用户无法在短时间内理清头绪，因此，需要把大量的逻辑代码独立出来，而template/模板只负责展示结果、简单逻辑；
2.为什么是计算属性computed，而不是方法methods？
计算属性是基于响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
通俗来讲就是，如果计算属性所依赖的变量没有变化，则计算属性仅仅运行一次，然后缓存运行结果，而方法则是每调用一次就运行一次，因此，计算属性在面对复杂逻辑时，更能节省系统资源；
3.计算属性computed与侦听器watch
既然computed是基于响应式依赖进行缓存的，说明Vue会监控依赖，当依赖发生变化后，再次调用computed时，会重新计算结果；
这就说明Vue有个“监视”功能，这里有个侦听器watch，可以让开发者去自定义自己的侦听逻辑，特别是computed面对一个异步任务/开销较大的操作时，需要开发者时时关注细节，此刻，watch侦听器要比computed计算属性更合适；
4.当v-bind绑定HTML Class属性时
当v-bind绑定class属性时，其属性值可以是：
①Object对象
②数组
③计算属性
5.当v-bind绑定HTML Style属性时
当v-bind绑定class属性时，其属性值可以是：
①Object对象：CSS property名可以用驼峰式(camelCase)或短横线分隔 (kebab-case，记得用引号括起来)来命名；
②数组：
③多重值：从2.3.0起可以为style绑定中的property提供一个包含多个值的数组，常用于提供多个带前缀的值，浏览器只会渲染数组中最后一个被浏览器支持的值；
④计算属性
6.v-bind:style与浏览器引擎前缀
浏览器引擎前缀：浏览器厂商们有时会给实验性的或者非标准的 CSS属性和JavaScript API添加前缀，这样开发者就可以用这些新的特性进行试验，同时（理论上）防止他们的试验代码被依赖，从而在标准化过程中破坏web开发者的代码。开发者应该等到浏览器行为标准化之后再使用未加前缀的属性。
6.1.CSS 前缀
主流浏览器引擎前缀:
-webkit- （谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器）
-moz- （火狐浏览器）
-o- （旧版Opera浏览器）
-ms- （IE浏览器 和 Edge浏览器）
6.2.JS接口前缀
需要使用大写的前缀修饰接口名：
WebKit (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说，所有基于WebKit 内核的浏览器)
Moz (火狐浏览器)
O (旧版Opera浏览器)
MS (IE浏览器 和 Edge浏览器)
6.3.JS属性和方法前缀
需要使用小写的前缀修饰属性或者方法
webkit (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说，所有基于WebKit 内核的浏览器)
moz (火狐浏览器)
o (旧版Opera浏览器等
ms (IE浏览器 和 Edge浏览器)
6.4.v-bind:style与浏览器引擎前缀
当v-bind:style使用需要添加浏览器引擎前缀的CSS property时，Vue.js会自动侦测并添加相应的前缀；
7.v-if与条件渲染
①用于HTML标签时：
Vue is awesome!
Vue is awesome!
Oh no
注意：v-else元素必须紧跟在带v-if或者v-else-if元素的后面，否则它将不会被识别。
②用于元素时：
Title
Paragraph 1
Paragraph 2
注意：v-else元素必须紧跟在带v-if或者v-else-if元素的后面，否则它将不会被识别。
③v-else-if注意事项：
2.1.0新增
v-else-if也必须紧跟在带v-if或者v-else-if元素之后
④key属性：
如果v-if、v-else-if、v-else分割的模板内容，如果整体标签类型、顺序一样的话，则Vue本着尽可能高效渲染元素的原则，会复用已有元素而不是从头开始渲染；
如果你想Vue停止复用，则针对想停止复用的元素，添加一个具有唯一值的key属性即可，这样，每次Vue都会重新渲染该元素；
总结：想重新渲染哪个元素，就在哪个元素上添加key属性；
⑤v-if与v-show区别
v-if在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，且只有v-if条件第一次变为真时，才会开始渲染条件块；
v-show不管初始条件是什么，元素总是会被渲染，且只是基于 display属性进行切换；
总结：v-if切换开销大，v-show初始渲染开销大，如果需要非常频繁地切换，则使用v-show，如果在运行时条件很少改变，则使用v-if较好；
8.v-for与列表渲染
①v-for遍历数组
其中items是源数据数组，item则是被迭代的数组元素的别名，index代表下标索引，从0开始；
②v-for遍历对象（v-for其实遍历的是对象的data属性）
其中object是对象data属性下的一个对象类型的属性，value则是object对象下的属性值，name则是object对象下的属性名，index则是代表object对象下的属性顺序，从0开始；
③key与就地更新策略
Vue默认处理策略：v-for渲染列表时，如果列表数据发生了变化，Vue默认使用就地更新策略，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法，也就是说默认的情况下Vue会尽量使用已经存在的DOM元素，直接在已有的DOM上进行复用修改，这样可以带来一定性能上的提升；
要想打破Vue的默认策略，方便跟踪每个节点的身份，从而重用和重新排序现有元素，建议尽可能在使用v-for时提供一个唯一的key属性，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升；
注意：不要使用对象或数组之类的非基本类型值作为v-for的key，应该使用字符串或数值类型的值来作为key的值；
④数组更新检测
当调用数组下列方法时，会触发Vue视图更新：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
⑤v-for与计算属性、方法
想在v-for时候，对数组中的元素进行某种操作，但又不影响原始数组，此刻可以配合使用计算属性、方法；
既然不能影响原始数组，那么就需要我们把筛选之后的数据组成一个新的数组；
⑥v-for与整数
v-for也可以接受整数，它会把模板重复对应次数；
⑦v-for与v-if同时使用
当它们处于同一节点，v-for优先级比v-if高，这意味着v-if将分别重复运行于每个v-for循环中；
⑧组件与v-for
2.2.0+版本里，当在组件上使用v-for时，key必须存在；
为了把迭代数据传递到组件里，我们要使用prop；
9.Vue的特殊属性：key
key的取值类型：number | string | boolean (2.4.2 新增) | symbol (2.5.12 新增)
按照官方介绍，在虚拟DOM算法，新旧nodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素；
通俗来讲，为了提高效率，Vue是尽可能的复用/修改已经存在的、类型相同的元素，但这样会造成显示错乱，为了避免这种情况，属性key就可以打破这种局面；
10.v-on与事件处理
①v-on的取值
Function|Inline Statement|Object，可以用v-on指令监听DOM事件；
②event与$event
可以在Vue的methods中用event来访问原始的DOM事件，也可以通过$event把原始的DOM事件传入方法；
③事件修饰符
调用event.preventDefault()/event.stopPropagation()这类常见的功能时，这种写法既显得繁琐，同时，本来需要自定义的methods中添加了DOM事件细节，显得逻辑混乱；
为了解决这个问题出现了事件修饰符：.stop/.prevent/.capture/.self/.once/.passive
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生；
④按键修饰符
监听键盘按键，Vue允许为v-on在监听键盘事件时添加按键修饰符：.enter/.tab/.delete/.esc/.space/.up/.down/.left/.right
⑤系统修饰键
2.1.0 新增，可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器：
.ctrl/.alt/.shift/.meta/.exact/.left/.right/.middle
11.v-model与表单输入绑定
①绑定HTML标签
v-model只能用在、