携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天点击查看活动详情。

Vue 监听、计算属性

computed 计算属性

要用的属性不存在，要通过已有属性计算得来
原理：底层借助 Object.defineproperty 方法提供的 getter 和 setter (优先使用computed)。get：当有人读取属性的时候，get 就会被调用，返回值作为要读取的值。get 什么时候调用？

初次读取时。
所依赖的数据发生变化时
与methods 实现相比，内部有缓存机制，效率高，调试方便

计算属性最终出现在VM实例对象上，可以直接读取使用；如果属性要修改，必须写 set函数去响应修改，且set 中要引起计算时依赖的数据发生变化，不考虑修改可以简写，只写get 即可

监听属性

new Vue时传入watch监视：

wath: {要监听的属性：{}} 
通过vm.watch监视：vm.watch(' 要监听的属性',{}) 
1、当被监听的属性变化时，回调函数自动调用，进行相关操作 
2、监视的属性必须存在，才能进行监视 
`immediate：true` 初始化时让handle调用

深度监视 Vue中的watch 默认不监视对象内部值的改变(一层) 配置deep: true 可以监测到对象内部值改变(多层)

computed 和 watch 的区别 computed可以实现的功能watch 都可以；但是watch可以进行异步操作。
所有不被 Vue 管理的函数最好写成箭头函数(定时器、ajax、promise 的回调函数)这样 this 才指向 Vue实例或组件实例对象；被管理的最好写成普通函数

Vue动态绑定style样式

绑定样式

 1、class样式： class=“XXX”, XXX可以是字符串、对象、数组 字符串写法，适用于样式类名不确定；
     数组写法适用于样式的个数不确定、名称也不确定；
     对象写法适用于个数、名称都不确定，要动态决定用不用 
 2、style样式：`:style="{font-size:XXX}"` 其中`XXX`是动态值 `:style"[a, b]"`其中a、b是样式对象

虚拟DOM为什么快

虚拟DOM不会进行重排与重绘操作，虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后在真实DOM中进行重排与重绘，减少过多的DOM节点排版与重绘消耗。

key的作用

1、虚拟DOM中，key是虚拟对象的标识，当状态中的数据发生变化时，Vue 会根据新数据生成新的虚拟DOM 随后Vue进行新旧虚拟DOM对比
对比规则：

旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 1、若虚拟DOM中内容没改变，直接使用之前的真实DOM
- 2、若虚拟DOM内容变了，则生成新的真实DOM，然后替换掉页面中的真实DOM
旧虚拟DOM中未找到与新虚拟DOM 相同的key：创建新的真实DOM，然后渲染到页面

2、用index 作为 key 值可能引发的问题：

若对数据进行：逆序添加、删除等破坏顺序操作：会产生没有必要的真实DOM 更新 ==> 页面效果没问题，但效率低
如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题

3、开发中如何选择 key？

最好使用每条数据的唯一标识符作为key。比如：id、身份证号、学号等唯一值
如果不存在对数据的逆序添加、删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的

Vue.js学习笔记(叁)