Vue计算属性、监视属性

一、Vue计算属性

1. 定义：要用的属性不存在，要通过已有属性计算得来

2. 原理：底层借助了Object.defineproperty方法提供的getter和setter

3. get函数什么时候执行？

• 初次读取时会执行一次
• 当依赖的数据发生变化时会被再次调用

4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，测试方便

5. 备注：

• 计算属性最终会出现在vm上，直接读取使用即可
• 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

二、Vue监视属性

1. 监视属性的watch：

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

2.深度监视：

• Vue中的watch默认下不监测对象内部值的改变（一层）
• 配置deep：true可以监测对象内部值改变（多层）

3.备注：

• Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
• 使用watch时根据数据的具体结构，决定是否采用深度监视

三、computed和watch的区别

1.computed能够完成的功能，watch都可以完成

2.watch能完成的功能，computed不一定能完成；例如：watch可以进行异步操作

四、两个重要的小原则

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数），最好写成箭头函数，这样的this的指向才是vm或组件实例对象