[JavaScript知识库]Vue监视属性与计算属性

????????本周我们开始学习Vue，最近学习的内容中感觉监视属性和计算属性需要重点区别一下。

? ? ? ? 监视属性：

????????????????1、当被监视的属性发生变化时，回调函数自动调用，进行相关操作

????????????????2、监视属性必须存在，才能监视，不存在也不会报错

????????????????3、监视的两种方法：

????????????????????????1)new Vue时传入watch配置

????????????????????????2)通过vm.$watch监视

???????????注：immediate:false决定初始时是否调用监视属性中相关函数，默认是false不调用，true为调用。deep:true决定是否深度监视，true为深度监视。为什么要设置深度监视呢？因为Vue中watch默认不监测对象内部值的改变（一层），配置deep:true可以监测对象内部值改变（多层），Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以，使用watch时根据数据的具体结构，决定是否采用深度检测。

? ? ? ? 计算属性：

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

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

????????????????get什么时候被调用：

????????????????????????1、初次读取fullName时。

????????????????????????2、fullName所依赖的值发生变化时

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

????????????????备注：

????????????????1、计算属性最终会出现在vm上，直接读取即可

????????????????2、如果计算属性要被修改，那就必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化（注意这里是计算属性被修改，修改后使依赖数据发生改变时调用set()，而不是改变依赖的数据时调用set()）

????????computed和watch之间的区别：

????????????????computed能完成的功能，watch都可以完成。

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

????????????????两个重要的小原则：

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

? ? ? ? ? ? ? ? ? ? ? ? 2、所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数）这样thiss的指向才是vm或组件实例对象