vue深度监听(监听对象和数组的改变)与立即执行监听实例


Posted in Javascript onSeptember 04, 2020

1.vue中监听对象数据属性值的改变,可以使用深度监听

data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 watch: {
  form: { // 深度监听
   handler(val, oldVal){
    console.log('currentForm',val, oldVal)
    // 但是这两个值打印出来却都是一样的,因为它们的引用指向同一个对象/数组
   },
   deep:true
  }
 }

注意:我们应尽量避免在监听方法中更改当前监听对象的属性值,以免再次触发监听函数

2.若只监听某个或部分属性值的变化,则可以配合计算属性computed来解决

data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 computed: {
  status() {
   return this.form.status
  }
 },
 watch: {
  status() {
   console.log('currentVal', this.status)
  }
 }

当然,上面这种方法会多出一个计算属性,并不是最好的方法,通过查看官方api,其实还有一种方法:

data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 watch: {
  'form.status'(val, oldVal) {
   console.log('currentVal', val)
  }
 }

3.取消监听

var unwatch = vm.$watch('a', cb) // 返回一个取消监听函数

unwatch() // 取消观察函数

4.立即触发监听

我们有时会有这个需求,在页面初始化时执行某个监听。因此,我们可能会在 created 中去调用需要执行的监听代码,但现在我们可以使用 immediate 来实现这个功能。

watch: {
  'form.status'() {
   handler(val, oldVal) {
    // 执行一些操作
   },
   immediate: true
  }
 }

补充知识:vue watch监听数据,新老值一样?让其不一样吧!

我就废话不多说了,大家还是直接看代码吧~

data:{
    testData:{
      dataInfo:{
        a: '我是a',
        b: '我是b'
      }
    }
  },
  watch: {
   testData: {
    handler: (val, olVal) => {
     console.log('我变化了', val, olVal)
    },
    deep: true
   }
  }

如果testData发生了变化,就会打印出val,olVal,但是他们打印出来的结果都是一样的,因为数据同源。虽然可以监听到他的变化,但是要比较数据差异就不行了。如果想要得到不同的值可以结合计算属性。

data:{
    testData:{
      dataInfo:{
        a: '我是a',
        b: '我是b'
      }
    }
  },
  watch: {
   testDataNew: {
    handler: (val, olVal) => {
     console.log('我变化了', val, olVal)
    },
    deep: true
   }
  },
  computed: {
   testDataNew() {
    return JSON.parse(JSON.stringify(this.testData))
   }
  }

以上这篇vue深度监听(监听对象和数组的改变)与立即执行监听实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 #Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 #Javascript
在vue中axios设置timeout超时的操作
Sep 04 #Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 #Javascript
JavaScript中的执行环境和作用域链
Sep 04 #Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 #Javascript
详解JavaScript数据类型和判断方法
Sep 04 #Javascript
You might like
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
取得父标签
2006/11/14 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
结构工程研究生求职信
2013/10/13 职场文书
仓管员岗位职责范文
2013/11/08 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
大学自荐信
2013/12/12 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
施工安全标语
2014/06/07 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书