vue使用watch监听属性变化


Posted in Vue.js onApril 30, 2022

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可以监听属性的变化,且其使用方式也不少,理解每种方式的使用场景能为开发节省时间,优化性能。

watch使用文档

Vue Reactivity原理

computed vs watch


Tags in this post...

Vue.js 相关文章推荐
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
vue项目如何打包之项目打包优化(让打包的js文件变小)
关于vue-router-link选择样式设置
Apr 30 #Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 #Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 #Vue.js
Vue操作Storage本地化存储
Apr 29 #Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 #Vue.js
You might like
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
养殖项目策划书范文
2014/01/13 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
疾病捐款倡议书
2014/05/13 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
学生上课说话检讨书
2014/10/25 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis