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 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
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
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python简单获取数组元素个数的方法
2015/07/13 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
详解python调用cmd命令三种方法
2019/07/08 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
python和php学习哪个更有发展
2020/06/17 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2014年党支部工作总结
2014/11/13 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记