浅谈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 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 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
模仿OSO的论坛(二)
2006/10/09 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
three.js实现圆柱体
2018/12/30 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python with (as)语句实例详解
2020/02/04 Python
python集合删除多种方法详解
2020/02/10 Python
python字典与json转换的方法总结
2020/12/28 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
消防安全宣传标语
2014/06/07 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js