浅谈vue.watch的触发条件是什么


Posted in Javascript onNovember 07, 2020

很多人习惯用watch,但是却很少有人知道watch的真正触发条件。如果不是对vue原理了如指掌,请谨慎使用watch。

示例1,下面会触发watch 吗?

<script>
 new Vue({
 data() {
  return {
  city: {id: 1, name: 'Beijing'}
  }
 },
 watch: {
  city() {
  console.log('city changed')
  }
 },
 created() {
  this.city = {id: 1, name: 'Beijing'}
 }
 })
</script>

会触发,因为在created方法里面重新给city赋值了一个对象,city前后的指向不同了

示例2:

<script>
 new Vue({
 data() {
  return {
  city: {id: 1, name: 'Beijing'}
  }
 },
 watch: {
  city() {
  console.log('city changed')
  }
 },
 created() {
  this.city.name = 'Shanghai'
 }
 })
</script>

不会触发, 因为created方法执行之后, city的指向没有变

如果我们期望捕获这种更新,应该这样写代码:

watch: {
 city: {
  handler: () => console.log('city changed'),
  deep: true
 }
}

将选项deep设为true能让vue捕获对象内部的变化。

下面讨论一下watch一个数组:

<script>
new Vue({
 el: '#body',
 data() {
  return {
   cities: ['Beijing', 'Tianjin']
  }
 },
 watch: {
  cities() {
   console.log('cities changed')
  }
 }
})
</script>

那下面哪些操作会触发cities的watch回调呢?

this.cities = ['Beijing', 'Tianjin']
this.cities.push('Xiamen')
this.cities = this.cities.slice(0, 1)
this.cities.pop();
this.cities.sort((a,b)=>a.localeCompare(b));
this.cities[0] = 'Shenzhen'
this.cities.splice(0, 1)
this.cities.length = 0

答案是只有最后三行不会触发。

补充知识:vue 深度watch与watch立即触发回调

基础用法

搜索框输入搜索关键字的时候,可以自动触发搜索,此时除了监听搜索框的change事件之外,我们也可以通过watch监听搜索关键字的变化。

<template>
 <div>
  <span>搜索</span>
  <input v-model="searchVal" />
 </div>
</template>
<script>
export default {
 data() {
 return {
  searchVal: ''
 }
 },
 watch: {
 // 在值发生变化之后,重新加载数据
 searchVal(newValue, oldValue) {
  if (newValue !== oldValue) {
  this.loadData()
  }
 }
 },
 methods: {
 loadData() {
  // 重新加载数据,此处需要通过函数防抖
 }
 }
}
</script>

立即触发

通过上面的代码,现在已经可以在值发生变化的时候触发加载数据了,但是如果要在页面初始化时候加载数据,我们还需要在created或者mounted生命周期钩子里面再次调用loadData方法。不过,现在可以不用这样写了,通过配置watch的立即触发属性,就可以满足了。

export default {
 watch: {
 // 在值发生变化之后,重新加载数据
 searchValue: {
 // 通过handler来监听属性变化, 初次调用 newValue为""空字符串, oldValue为 undefined
  handler(newValue, oldValue) {
  if (newValue !== oldValue) {
   this.loadData()
  }
  },
  // 配置立即执行属性
  immediate: true
 }
 }
}

深度监听

一个表单页面,需求希望用户在修改表单的任意一项之后,表单页面就需要变更为被修改状态。如果按照上例中watch的写法,那么我们就需要去监听表单每一个属性,太麻烦了,这时候就需要用到watch的深度监听deep

export default {
 data() {
 return {
  formData: {
  name: '',
  sex: '',
  age: 0,
  deptId: ''
  }
 }
 },
 watch: {
 // 在值发生变化之后,重新加载数据
 formData: {
  // 需要注意,因为对象引用的原因, newValue和oldValue的值一直相等
  handler(newValue, oldValue) {
  // 在这里标记页面编辑状态
  },
  // 通过指定deep属性为true, watch会监听对象里面每一个值的变化
  deep: true
 }
 }
}

随时监听,随时取消,了解一下$watch

有这样一个需求,有一个表单,在编辑的时候需要监听表单的变化,如果发生变化则保存按钮启用,否则保存按钮禁用。

这时候对于新增表单来说,可以直接通过watch去监听表单数据(假设是formData),如上例所述,但对于编辑表单来说,表单需要回填数据,这时候会修改formData的值,会触发watch,无法准确的判断是否启用保存按钮。现在你就需要了解一下$watch

export default {
 data() {
 return {
  formData: {
  name: '',
  age: 0
  }
 }
 },
 created() {
 this.$_loadData()
 },
 methods: {
 // 模拟异步请求数据
 $_loadData() {
  setTimeout(() => {
  // 先赋值
  this.formData = {
   name: '子君',
   age: 18
  }
  // 等表单数据回填之后,监听数据是否发生变化
  const unwatch = this.$watch(
   'formData',
   () => {
   console.log('数据发生了变化')
   },
   {
   deep: true
   }
  )
  // 模拟数据发生了变化
  setTimeout(() => {
   this.formData.name = '张三'
  }, 1000)
  }, 1000)
 }
 }
}

根据上例可以看到,我们可以在需要的时候通过this.$watch来监听数据变化。那么如何取消监听呢,上例中this.$watch返回了一个值unwatch,是一个函数,在需要取消的时候,执行 unwatch()即可取消

以上这篇浅谈vue.watch的触发条件是什么就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
Javascript 面向对象 重载
May 13 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 #Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 #Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 #Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 #Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 #Javascript
Nuxt 项目性能优化调研分析
Nov 07 #Javascript
js实现日历
Nov 07 #Javascript
You might like
php发送http请求的常用方法分析
2016/11/08 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
python字典排序实例详解
2015/05/20 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
pandas中去除指定字符的实例
2018/05/18 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
教育科学研究生自荐信
2013/10/09 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
入党申请书怎么写?
2019/06/11 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript