深入对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 相关文章推荐
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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面试题附答案
2009/01/07 PHP
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python第三方库的安装方法总结
2016/06/06 Python
Python切片索引用法示例
2018/05/15 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
ipython和python区别详解
2019/06/26 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
建筑个人求职信范文
2014/01/25 职场文书
同事吵架检讨书
2014/02/05 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
安全生产月宣传标语
2014/10/06 职场文书
作风建设年度心得体会
2014/10/29 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python