watch和computed

在vue的属性和方法中使用最频繁的就是watch 和 computed

watch

watch可以监听数据的变化

watch 写法

 data() {
    return {
        name: '张三',
        no: 1,
        message: {
            a: 1
        }
    }
},
watch: {
    name(newValue, oldValue) {
        console.log("name-新值： ", newValue)
        console.log("name-旧值： ", oldValue)
    },
    message: {
        handler(newValue, oldValue) {
            console.log("message-新值： ", newValue)
            console.log("message-旧值： ", oldValue)
        },
        deep: true, // 深度监听，对象属性的值变化了也会被监听
        immediate: true, // 页面一加载就马上执行一次监听
    }
}
// 如果是对象类型的拿不到老值

computed

计算属性也可以监听到Vue中data的变化

先通过一个例子来体现计算属性的作用

<div style="margin-top: 30px;">
    全选
    <input v-model="checkAll" type="checkbox" />
    <input type="checkbox" v-for="(check, index) in checks"
    :key="index" v-model="check.check" />
</div>
data() {
    return {
        checks: [{check: true}, {check: true}, {check: true}]
    }
},
computed: {
    checkAll: {
        get() { // 当取值时，会执行get方法， 相当于 checkAll() {}
            return this.checks.every(item => item.check)
            // every 有一项是false 就停止查找并且返回false
        },
        set(newValue) {
            // 一般来说，计算属性很少用set方法，
            // 一般只有使用v-model的时候计算属性才会添加set方法，
            // 其他时候都是只取值
            this.checks.forEach((item) => {
                item.check = newValue
            })
        }
    }
},

watch和computed对比

• 计算属性内部不会立马获取值，只有取值的时候才执行

  而且这个执行是有缓存的，如果依赖的数据没有发生变化，

  则不更新结果。

• watch就会在内部先立即执行，因为要算出一个老值（oldValue），如果数据变化会执行回调函数。

• 计算属性不是值变了马上就监听到变化，而是再取值的时候才去计算新的结果，所以看起来也是监听变化的。而且有缓存，如果依赖的数据不变化，就不执行，直接把之前计算好的结果返回

• 当然我们算一个结果也可以直接调用一个method, 但是method不具有缓存，每次模板渲染，这个函数都会重复执行，导致性能浪费