vue项目中的数据变化被watch监听并处理

目录

vue数据变化被watch监听处理监听当前vue文件数据监听vuex中的数据如何正确使用watch监听属性变化基本用法监听object初始化变量触发监听回调

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() { 监听属性的变化，且其使用方式也不少，理解每种方式的使用场景能为开发节省时间，优化性能。 
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。