2021-05-20computed和watch应用与区别

VUE之computed和watch应用与区别 目录：
** watch 和 computed**

conputed 作用：
计算结果并返回，只有当被计算的值发生改变时才会触发
(即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，具有依赖属性.
(如果你在name方法下打印时间 new Data() 多次打印是一样的，因为new Data() 不是依赖型数据 )

new Vue({
    el: '#id',
    template: `<div>
        <span>Name: {{name}}<span>
    </div>`,
    data: {
        firstName: 'Leo',
        lastName: 'Alan'
    },
    computed: {
        name () {
            return `${this.firstName} + ${this.lastName}`
        }
    }
})

watch 作用：
监听某一个值，当被监听的值发生变化时，执行对应的操作,如下面的单个单个的监听值，然后再改变data的值或者做其他操作
(与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)
(如果你在name方法下打印 new Data（） 多次打印是不一样的，因为watch一根筋，每次都进行更新执行 )

new Vue({
    el: '#id',
    template: `<div>
        // ...
    </div>`,
    data: {
        firstName: 'Leo',
        lastName: 'Alan',
        obj1: {
            a: 0
        }
    },
    watch: {
        // 监听firstName,当firstName发生变化时就会执行该函数
        firstName () {
            // 执行需要的操作...
            // 注:初始化不会执行，只有当被监听的值(firstName)发生变化时才会执行
        },

        // 监听lastName
        lastName: {
            handler (newName, oldName) {
                // 执行需要的操作...
            },
            immediate: true // true: 初始化时就会先执行一遍该监听对应的操作    
        },

        obj1: {
            handler () {
                // 执行需要的操作...
            },
            deep: true // 该属性默认值为false. 
            // 当被监听的值是对象,只有deep为true时,对应属性的值(obj1.a)发生变化时才能触发监听事件，但是这样非常消耗性能
        },

        // 监听对象具体的属性， deep就不需要设置为true了
        'obj1.a': {
            handler () {
                // 执行需要的操作...
            }
        }

    }
})

注意： 不要在computed和watch中修改被依赖(或者被监听)的值，这样可能会导致无限循环