vue之watch的运用

最新推荐文章于 2025-03-17 08:02:46 发布

百里狂生

最新推荐文章于 2025-03-17 08:02:46 发布

阅读量830

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Li_dengke/article/details/105454057

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

vue 之 watch 的运用

watch 的作用是什么？

1. 观察 vue 实例上一个表达式或者一个函数计算结果的变化。

2. 自定义监听器来响应数据的变化。

watch 的使用场景：

当需要数据变化时执行异步或者开销大的操作时，这个方法最有效。

watch 与 $watch 的参数：

1. immediate 立即执行监听的数据

export default {
    watch: {
        a: {
            handler: function(newVal, oldVal) {},
            immediate: true
        }
    }
}

如果在监听一个数据的时候，希望它能立即执行数据，此时可以使用 immediate属性，但是需要注意的是，如果在第一次执行完监听数据后，需要首先检测一下取消watch函数是否存在，如果不存在，这个时候调用unwatch函数将导致错误。

var unwatch = vm.$watch(
    'value',
    function() {
        dosomething()
        if (unwatch) {
            unwatch()
        }    
    },
    { immediate: true }
)

2. deep 深度监听对象的变化，对于监听数组则不需要使用这个属性。

export default {
    watch: {
        obj: {
            headler(newVal, oldVal) {},
            deep: true
        }
    }
}

如果watch在监听一个对象的时候，监听不到对象中某个属性值得变化，此时使用 deep 属性，就可以监听到了。其原因是：

对象属于一个引用类型数据，它的本身是在堆里的开辟出来的一个空间，而 watch 监听的那个对象，其实是一个引用指针
当对象内部的属性发生变化，则对象的引用指针并不会发生改变，因为堆中开辟的空间没有改变；
当对象变成另外一个对象的时候才能监听到数据的变化，原因是原对象的引用指针指向了新对象开辟的空间地址，所以watch能监听的到数据的变化。

$watch 的参数有三个：[expOrFn, callback, [options]]

第一个参数：键路径或者函数
第二个参数：回调函数
第三个参数：配置参数【immediate】【deep】
返回值是一个取消监听的函数 unwatch

// 键路径的方式
var unwatch = vm.$watch(
    'obj.a',
    function(newVal, oldVal) {}, 
    {deep: true}
)

// 函数的方式
var unwatch = vm.$watch(
    function() { return this.a + this.b }, 
    function(newVal, oldVal) {}, 
    {immediate: true}
)

取消 watch 的对某一个数据的监听，可以直接调用 unwatch() 方法停止触发回调，一旦取消，则这个数据的变化将不会再触发watch的监听。

watch 的用法：

注意：不应该使用 箭头函数，原因是箭头函数绑定了父级作用域的上下文，所以 this 指向的不是 vue 实例对象

1. 通过键路径进行监听数据的变化

export default {
    watch: {
        'a.b.c': function(newVal, oldVal) {}
    }
}

2. 通过函数进行监听数据的变化

export default {
    watch: {
        a: function(newVal, oldVal) {},
        b: 'someMethod'
    }
}

3. 通过对象的方式进行监听数据的变化

export default {
    watch: {
        a: {
            handler: function(newVal, oldVal) {}
        }
    }
}

4. 通过数组的方式监听数据的变化

export default {
    watch: {
        a: [
            'handler1',
            function handler2(newVal, oldVal) {},
            {
                handler3: function(newVal, oldVal) {}
            }
        ]
    }
}