watch监听
watch处于浅监听的状态,如果监听的数据是引用类型,是拿不到oldValue(虽然oldval和newval是两个变量,但是却因为是引用类型,指向的都是堆的地址)
监听不支持异步,数据发生变化,就会直接出发监听函数。
一般监听函数存在两个值,一个是之前的值,一个是新的值
如果一个属性发生变化,需要执行对应的操作,建议使用监听函数
开启深度监听
user: {<br> handler (oldval, newval) {<br> console.log(oldval, newval)<br> },<br> deep: true // 开启深度监听<br> }
用法
watch: {<br> user: { handler(oldval, newval) {}, deep: true }<br>}
watch: {<br> user(oldval, newval) {}<br>}
computed计算属性
计算属性不支持异步,数据会默认走缓存,只有当依赖的数据发生变化的时候,才会触发计算属性
计算属性本身并不支持异步,如果存在异步,则无法监听变化
如果一个属性依赖于其他的属性(例如由其他属性计算而来),那么就可以使用计算属性
当computed为一个函数的时候,默认会走get方法。返回值就是属性的属性值
如果是一个对象,则可以手动的设置get和set方法,当修改数据的时候就会触发set方法
computed: {<br> mynum1: function () {<br> return this.num * 2<br> },<br> mynum2: function () {<br> return this.num * 2<br> },<br> mynum3: { // 如果要设置get和set,需要设置为对象而不是一个函数<br> get: function () { return this.num * 2 },<br> set: function (newVal) { return this.num * newVal }<br> }<br>}