一、计算属性
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控制