Vue2.0属性计算与监视

一、计算属性

1.定义

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

2.原理

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

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

（1）初次读取时会执行一次

（2）当依赖的数据发生改变时会被再次调用

4.优势

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

5.备注

（1）计算属性最终会出现在vm上，直接读取使用即可

（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

6.只读不改的情况下，计算属性可以简写

代码展示：

 

二、监视属性 

  1.天气案例

①绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句

②<button @click="isHot = !isHot">切换天气</button>

用另一种方法展示，如果多条语句用分号隔开

 

结果展示 

2.天气案例监视属性 

监视属性watch

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

2)监视的属性必须存在，才能进行监视！！

3）监视的两种写法

①new Vue时传入watch配置

②通过vm.$watch监视

代码展示：

 

3.天气案例深度监视 

（1）.Vue中的watch默认不检测对象内部值的改变（一层）

（2）配置deep：true可以检测对象内部值改变（多层）

备注

（1）Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以

（2）使用watch时根据数据的具体结构，决定是否采用深度检测

代码展示

4.天气案例监视属性简写 

不需要immediate、deep等其他配置项可以简写（只有handler才能简写）

代码展示

 

三、watch与computed的对比 

（监视属性就是侦听属性）

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

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

两个重要的小原则：

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

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

计算属性中不能靠异步属性获取任务，watch可以的，watch不是靠返回值，watch是靠代码修改的 

定时器指定的函数不是Vue中的函数，不受Vue控制