深入对Vue.js $watch方法的理解


Posted in Javascript onMarch 20, 2017

博主最近对着vue.js的官方教程在自学vue.js,博主自幼愚钝,在教程中真的是好多点都不太理解,接下来要说的这个$watch方法就是其中一个不太理解的点了。咱们先来看一下对于$watch方法在vue.js的API中是怎么解释的吧:观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。官方示例:

// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
 // 做点什么
})
// 函数
vm.$watch(
 function () {
  return this.a + this.b
 },
 function (newVal, oldVal) {
  // 做点什么
 }
)

vm.$watch 返回一个取消观察函数,用来停止触发回调:

var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()

博主很认真地看了看,当时就懵逼了,没看懂。还好网上大神多,查了查终于搞明白这个$watch方法的用法了。说白了$watch这货就是观察一个值的变化,观察的这个值一变化的话,那么就执行function里面的语句。废话不多说,咱们直接看代码:

HTML:

<div id="watch">
    firstName:<input type="text" name="li" v-model="firstName">
    <br>
    lastName:<input type="text" name="fei" v-model="lastName">
    <p>fullName: {{fullName}}</p>
</div>

JS:

var vm = new Vue({
      el: '#watch',
      data: {
        firstName: 'a',
        lastName: 'fei',
        fullName: 'a fei'
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }
})

在代码中,我们用wach方法监听了firstName和lastName这两个变量,我们在input框框那里做了双绑定,这样子的话,我们在firstName输入框中输入的值就会改变变量firstName的值,同理可得lastName,因为值的改变和watch这货的观察,所以watch里面的function代码就会运行,这样子fullName也就会相应地改变了。这样子$watch这方法的用法也就一下子明了了。上述的例子中$watch就和原生js里面的on-change差不多了。

以上就是博主对$watch方法的理解了,希望可以帮助大家理解这一方法,要是上述有何不对的地方,麻烦各位看官多多指出,谢谢大家。

Javascript 相关文章推荐
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
vue实现行列转换的一种方法
Aug 06 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 #Javascript
js获取当前周、上一周、下一周日期
Mar 19 #Javascript
浅析bootstrap原理及优缺点
Mar 19 #Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 #Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 #Javascript
JavaScript数据结构之链表的实现
Mar 19 #Javascript
用jQuery实现圆点图片轮播效果
Mar 19 #Javascript
You might like
php代码检查代理ip的有效性
2016/08/19 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
BootStrap 导航条实例代码
2017/05/18 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
TensorFlow损失函数专题详解
2018/04/26 Python
Django跨域请求原理及实现代码
2020/11/14 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
SQL Server面试题
2016/10/17 面试题
英文版区域经理求职信
2013/10/23 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
优秀医生事迹材料
2014/02/12 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
高一数学教学反思
2016/02/18 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS