深入对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中去掉数组中的重复值的实现方法
Aug 03 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
javascript 数组精简技巧小结
Feb 26 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
django 修改server端口号的方法
2018/05/14 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Python进行统计建模
2020/08/10 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
自我评价的写作规则
2014/01/06 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
党支部四风整改方案
2014/10/25 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
JavaScript实现登录窗体
2021/06/22 Javascript
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle