Vue.js之computed和watch的使用与区别

比眉伴天荒 2022-05-14 10:41 313阅读 0赞

# VUE之computed和watch应用与区别 #

**目录：**

*  **computed**
 *  **watch**

--------------------

##### **computed** #####

**计算结果并返回，只有当被计算的值发生改变时才会触发**  
**(即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)**

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

--------------------

##### **watch** #####

**监听某一个值，当被监听的值发生变化时，执行对应的操作**  
**(与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)**

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中修改被依赖(或者被监听)的值，这样可能会导致无限循环