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

博主最近对着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方法的理解了，希望可以帮助大家理解这一方法，要是上述有何不对的地方，麻烦各位看官多多指出，谢谢大家。

赞 (0)

相关推荐

  • Vue.js每天必学之计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. 基础例子 <div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, comp

  • Vue.js计算属性computed与watch（5）

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. Vue实例的computed的属性 <div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{ComputedMessage}}</p

  • vue中计算属性（computed）、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

  • vue如何实现observer和watcher源码解析

    本文能帮你做什么?好奇vue双向绑定的同学,可以部分缓解好奇心,还可以帮你了解如何实现$watch. 前情回顾 我之前写了一篇没什么干货的文章,并且刨了一个大坑. 今天,打算来填一天,并再刨一个. 不过话说说回来了,看本文之前,如果不知道Object.defineProperty,还必须看看解析神奇的Object.defineProperty 不得不感慨vue的作者,人长得帅,码写的也好,本文是根据作者源码,摘取出来的 本文将实现什么 正如上一篇许下的承诺一样,本文要实现一个$wacth con

  • vue使用watch 观察路由变化，重新获取内容

    vue使用watch 观察路由变化，重新获取内容

    问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新.如图: 页面代码如下: <script> export default { data() { return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... }, created() { this.fetchDate(); } } </sc

  • 谈谈VUE种methods watch和compute的区别和联系

    谈谈VUE种methods watch和compute的区别和联系

    从作用机制和性质上看待methods,watch和computed的关系 图片标题[原创]:<他三个是啥子关系呢?> 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,methods和watch/computed不太一样,所以我接下来的介绍主要有两个对比: 1.methods和(watch/computed)的对比 2.watch和computed的对比 作用机制上 1.watch和computed都是以Vue的依赖追踪机制为基础

  • vue组件watch属性实例讲解

    本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>wacth属性</title> <script src="js/vue.js"></script> </head> <body> <div i

  • Vue.Js中的$watch()方法总结

    前言 最近公司用vue框架写交互,之前没怎么写过,但是很多数据双向绑定的东东跟angular很像!所以上手很快!哈哈 今天就碰到一个vue的问题啊!!产品需求是,datetimepick时间选择器一更改时间,就重新ajax获取数据渲染图表,很简单的需求啊!用angula ng-change监听inpu框框,分分钟搞定啊!用特么js原生 on-change也分分钟搞定啊!问题是尼玛的VueJs对input框没有change事件!尼玛坑爹啊!(不知道是不是我没找到,反正api里没有,goole了半天

  • Vue.js 中的 $watch使用方法

    Vue.js 中的 $watch使用方法

    这两天学习了Vue.js 中的 $watch这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. github 源码 Observer, Watcher, vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.下面我们来看看 如何实现一个简单的 $watch 功能,当然Vue 中使用了很多优化手段,在本文中暂不一一讨论. 例子: // 创建 vm let vm = new Vue({ data: 'a' }) // 键路径 vm.$watch('a.b.c', func

  • vue.js中$watch的用法示例

    前言 vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch() ; <template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-m

随机推荐