1. computed(计算属性,要通过已有属性计算得来)
(1)原理:底层借助了 Object.defineProperty方法提供的getter和setter
(2)优势:与methods相比 内部有缓存机制(复用),效率更高,调试方便
(3)注意:
1.计算属性最终会出现在vm(vue实例)上,直接读取使用即可;
2.如果计算属性要被修改,必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
(4)get函数多会执行?
1.初次读取时会执行;
2.当依赖的数据发生改变时会被再次调用。
2.watch(监视)
(1)当被监视的属性变化时,回调函数(handler)自动调用,进行相关操作; immediate:true 初始化时handler执行一次
(2)监视的属性必须存在,才能进行监视;
(3)监视的两种写法:(1)new Vue时传入watch配置(2)通过vm.$watch监视
(4)深度监视(deep:true)
1.Vue中的watch默认不监测对象内部值的改变(一层);
2.配置deep:true可以监测对象内部值改变(多层)
注意:
1.Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不行;
2.使用watch时根据数据的具体结构,决定是否采用深度监视
3.watch与computed 两者的区别
(1)计算属性(computed)中不能开启异步任务
(2)监测属性(watch)可以开启异步任务
(3)所有不被Vue所管理的函数(定时器回调函数、ajax的回调函数、Promise的回调函数)最好写成箭头函数,这样this的指向才是vm或组件实例对象;
(4)所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象