02-Vue学习之$watch

1.$watch监听数据的变化,通俗点来讲就是观察一个值的变化，观察的这个值一变化的话，那么就执行function里面的语句。

官网中是这么说的：除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

$watch可以观察 Vue 实例变化的一个表达式或计算属性函数：
1.监听属性的变化，两个参数，参数1：要监听的对象;
参数2：监听的函数，函数中有两个参数，变化后的新值，变化之前的旧值

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

这个过程大概分为三部分：实例化Vue、调用$watch方法、属性变化，触发回调

image.png

2.传函数

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

例子：改变文本框中的firstName和lastName的时候，会触发watch中函数的执行，从而改变fullName值的变化

    firstName:
    lastName:
    
{{fullName}}