Vue.js中$watch方法的作用是什么

Vue.js中$watch方法的作用是什么，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

// 键路径
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
        }
      }
})

看完上述内容，你们掌握Vue.js中$watch方法的作用是什么的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！