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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 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
PHP微信开发之查询城市天气
2016/06/23 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
js查错流程归纳
2012/05/04 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
python抓取文件夹的所有文件
2018/02/27 Python
python高阶爬虫实战分析
2018/07/29 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python的继承知识点总结
2018/12/10 Python
python输出pdf文档的实例
2020/02/13 Python
python定义类的简单用法
2020/07/24 Python
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
自荐书封面下载
2013/11/29 职场文书
化妆品促销方案
2014/02/24 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
春节慰问信范文
2015/02/15 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
留学推荐信中文范文
2015/03/26 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
排查Tomcat进程假死的问题
2022/05/06 Servers