Vue.js watch监视属性知识点总结


Posted in Javascript onNovember 11, 2019

这个属性用来监视某个数据的变化,并触发相应的回调函数执行

1.基本用法

(1)添加watch属性,值为一个对象。对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行

(2)回调函数有2个参数:

newVal:数据发生改变后的值

oldVal:数据发生改变前的值

var vm = new Vue({
  el:'#app',
  data: {
    name: '郭靖'
  },
  watch: {
    name(newVal,oldVal){
      console.log('name的值发生了变化')
      console.log(newVal,oldVal)
    }
  }
})

vm.name = "郭大侠" // 执行这行代码,会触发对应的回调函数

执行结果:

name的值发生了变化
郭大侠 郭靖

2.监听对象内部属性的变化

前面的例子只是监听data中的第一层数据,如果要监听多层次的数据,例如a.b.c,则属性名需要用引号包裹起来

<body>
  <div id="app">
    <p>{{name}}</p>
    <button @click="test">修改wife.name</button>
    <button @click="test2">修改wife</button>
  </div>
</body>
<script>
  var vm = new Vue({
    el:'#app',
    data: {
      name: '郭靖',
      age: 20,
      wife: {
        name: '黄蓉',
        sex: '女'
      }
    },
    watch: {
      //监听wife中的name属性
      'wife.name'(newVal,oldVal){
        console.log('wife.name发生了改变')
      },
      //监听wife
      'wife'(newVal,oldVal){
        console.log('wife发生了改变')
      }
    },
    methods:{
      test(){
        this.wife.name = "'黄帮主'"
      },
      test2(){
        this.wife = {name:'我不是黄蓉',sex:'women'}
      }
    }
  })
</script>

运行结果表明,无论是他父级对象的值发生了改变,还是它本身的值发生了改变,都会使这个监视属性的回调函数执行。

Vue.js watch监视属性知识点总结

3.监听路由变化

提示:路由的路径信息保存在$route.path中

watch:{
 '$route.path':function(newval){
  console.log('change')
 }
}

4.深度监听

监视属性只能监听到当前对象值的变化,而对象内部的属性变化不会监听到,前面我们监听了wife和wife.name,修改了wife.name并不会触发监听wife的回调函数。

想要监听对象内部的属性值变化,需要进行相应的配置。

  • deep:深度监听,默认false
  • handler:回调函数
  • immediate:页面初始化时是否触发回调,默认false
var vm = new Vue({
  el:'#app',
  data: {
    name: '郭靖',
    age: 20,
    wife: {
      name: '黄蓉',
      sex: '女'
    }
  },
  watch: {
    wife:{
      deep:true,
      handler:function(newVal,oldVal){
        console.log('value is change')
      },
      immediate:true
    }
  }
})

vm.wife.name = '黄帮主' // 触发wife属性对应的回调

以上就是关于Vue.js watch监视属性的全部知识点,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
js实现倒计时关键代码
May 05 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
javascript数组的定义及操作实例
Nov 10 #Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 #Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 #Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 #Javascript
webpack4 optimization使用总结
Nov 10 #Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 #Javascript
node后端服务保活的实现
Nov 10 #Javascript
You might like
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
php和nginx交互实例讲解
2019/09/24 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
javascript整除实现代码
2010/11/23 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
angular ng-click防止重复提交实例
2017/06/16 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
python简单文本处理的方法
2015/07/10 Python
常用python编程模板汇总
2016/02/12 Python
Python实现网站表单提交和模板
2019/01/15 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python实现FM算法解析
2019/06/18 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
nohup的用法
2012/11/26 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
机械专业技术员求职信
2014/06/14 职场文书
办理收楼委托书范本
2014/10/09 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript