分别理解

• computed：计算属性，支持缓存，只有依赖数据发生改变，才会重新进行计算,computed 不支持异步操作

• wacht：监听/侦听，不支持缓存，数据变化，直接会触发相应的操作，watch 支持异步操作

• 需要注意的是，如果你在computed和wacht里使用箭头函数，那该函数内this是全局this

computed的理解

用法

{ [key: string]: Function | { get: Function, set: Function } }

举例

data:{
    user:{
    name: '小白'
    }
}
computed: {
    changeName: {
        get() {
            const user = this.user;
            return user.name
        },
        set(value) {
            this.user.nickname = value;
        }
    }
},
template: `
    <div>
         {{changeName}}
         <button @click ="changeName = '小宋'"> 更改名字 </button>
    </div>

`,

特点

• 如果依赖的属性没有变化，即使其他属性变了，也不会让依赖属性重新计算

• 调用时不需要加括号，可以当属性用

• 在computed中的属性都有一个get和一个 set 方法，如果 computed 属性值是函数，那么默认会走 get 方法，函数的返回值就是属性的属性值，当数据变化时，调用 set 方法

whach的理解

用法

{ [key: string]: string | Function | Object | Array }

举例

语法1

watch:{
    o2: function(newValue,oldValue){}, // 这两个参数是Vue传的
    o3() {},
    o4: [f1,f2], // 当o4发生变化，依次执行f1，f2两个函数
    o5: 'methodName' // 在method内找到这个函数执行
    o6: { handler:fn , deep:true , immediate:true },
    'object.a': function() {} // 如果object对象内的a变化 执行函数
}

语法2

vm.$watch('xxx',fn,{ deep:true , immediate:true })
// 'xxx'可改成一个返回字符串的函数

特点

• 如果某个属性变化了就去执行一个函数

• immediate选项：表示第一次渲染时是否执行watch设置的函数，默认为false

• deep选项：监听对象时是否看该对象内部属性的变化，默认为false