vue数据变化被watch监听处理
监听当前vue文件数据
例如,当前的vue文件的data中有如下属性:
data() { return { dialogFormVisible: false, } }
要监听dialogFormVisible变量的数据变化,则代码如下:
watch: { dialogFormVisible: function(newVal, oldVal) { alert(newVal); alert(oldVal); } }
监听vuex中的数据
如果vuex中声明的数据如下:
export default new Vuex.Store({ state: { avatar: "", }, mutations: {}, actions: {}, modules: {} });
则监听的代码如下:
watch: { "$store.state.avatar": function(newValue, oldValue) { ... } },
如何正确使用watch监听属性变化
Vue中可以使用监听器监听属性的变化,并根据属性变化作出响应。但一旦涉及到复杂数据的监听(如Object,但数组一般不需要,因为Vue针对数组做了特殊处理)时就比较复杂了,本文解释了使用watch监听属性变化的方法,包括复杂数据。
基本用法
Vue watch最重要的使用场景是根据某属性的变化执行某些业务逻辑:
<template> <input type="number" v-model.number="counter" /> </template>
<script> export default { name: "Counter", data: function() { return { counter: 0, }; }, watch: { counter: function(newV, oldV) { console.log('counter change to %d from %d', newV, oldV); }, } }; </script>
watch的基本用法很简单:针对需要监听的属性定义个同名的函数即可,函数的第一个参数为变化后的值,第二个参数为变化前的值。
监听object
首先我们回顾一个JavaScript中的概念:复杂数据变量。“复杂”的原因在于变量只是一个引用,和C++中的指针类似,其保存的不是真实的数据,而是数据的地址。比如对于一个object变量来说,添加属性、删除属性、修改属性的值都不会改变这个地址,这也可以说这个object变量没有变化。不管所用的框架如何,基本定理肯定是生效的,所以Vue中监听object也是一难题,特别是嵌套数据的监听。
这里的变化指的是地址的变化,能够触发变化最简单的方式就是重新赋值。
<template> <div> <label>up trigger {{ counter.up }} times</label> <button @click="onTrigger('up')">Trigger Up</button> <br> <label>down trigger {{ counter.down }} times</label> <button @click="onTrigger('down')">Trigger down</button> </div> </template>
<script> export default { name: "Counter", data: function() { return { counter: { up: 0, down: 0, }, }; }, methods: { onTrigger: function(type) { this.counter[type] += 1; } }, watch: { counter: function(newV, oldV) { // 不会被触发 console.log('counter change to %o from %o', newV, oldV); }, } }; </script>
针对counter的监听不会被触发,因为this.counter[type] += 1;并不会使this.counter变化(地址没变)。那如果想要监听到这个变化应该怎么办呢?一般来说有两种方式:
使用deep参数
watch: { counter: { handler: function(newV, oldV) { console.log('counter change to %o from %o', newV, oldV); }, deep: true, } }
使用deep需要使用watch的完整形式:handler是监听回调函数,deep: true指定了不仅仅监听counter的变化,也监听其内部属性的变化,所以当counter.up或counter.down变化时才能出发handler回调。
重新赋值
methods: { onTrigger: function(type) { // 重新赋值触发变化 this.counter = { ...this.counter, [type]: this.counter[type] + 1, }; } }, watch: { counter: function(newV, oldV) { // 不会被触发 console.log('counter change to %o from %o', newV, oldV); }, }
那两种方式优劣如何呢?使用deep参数会为数据每一层都添加监听,当层级较深时比较耗费性能,而且Vue不能监听到属性的添加或删除。所以一般来说使用重新赋值的方式是较优的方案,但如果只是想监听内部嵌套数据的话,重新赋值就比较重了,所以Vue也提供了直接监听嵌套属性变化的途径:
通过路径监听内部数据
watch: { 'counter.up': function(newV, oldV) { console.log('counter.up change to %d from %d', newV, oldV); }, 'counter.down': function(newV, oldV) { console.log('counter.down change to %d from %d', newV, oldV); }, }
通过这种方式可以避免使用deep造成的性能消耗问题,当只对某内部属性变化作出响应的场景下比较合适,但仍要注意监听的路径数据仍是复杂数据时的场景。
初始化变量触发监听回调
使用watch监听变化时,给变量初始值不会触发监听函数,如果像要改变这个默认设定可以使用immediate参数,其用法和deep类似:
watch: { counter: { handler: function(newV, oldV) { console.log('counter change to %o from %o', newV, oldV); }, immediate: true, } }
这样在赋初值时就会触发监听函数,其中第一个参数为初始值,第二个参数为undefined。
总结:使用watch可以监听属性的变化,且其使用方式也不少,理解每种方式的使用场景能为开发节省时间,优化性能。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。