02-Vue学习之$watch

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

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

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

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

<div id="app"></div>
<script>
    var data = { a: 1 }
    var vm = new Vue({
        el: '#app',
        data: data
    })

    console.log(vm.$data === data); // => true
    console.log(vm.$el === document.getElementById('app')); // => true

    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {//a是属性名，表示要监听的对象
        // 这个回调将在 `vm.a` 改变后调用
    })
</script>
这个过程大概分为三部分：实例化Vue、调用$watch方法、属性变化，触发回调

image.png

2.传函数

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

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

<div id="app">
    firstName:<input type="text" v-model="firstName">
    lastName:<input type="text" v-model="lastName">
    <p>{{fullName}}</p>
</div>
<script>
    var data = {
        firstName: 'HF',
        lastName:'cherry',
        fullName: 'HF-cherry'
    }
    var vm = new Vue({
        el: '#app',
        data: data,
        watch:{//放在watch里面
            firstName:function(val){//监听firstName的变化
                this.fullName = val+this.lastName;
            },
            lastName:function(val){//监听 lastName的变化
                this.fullName = this.firstName+val;
            }
        }
    })
</script>