vue中watch的简单使用

一、watch的概念

监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。

二、watch的使用场景

1、父组件应用子组件时传入一个参数，当父组件的数据有变化时，子组件监听父组件数据并实时更新
2、一个数据影响多个数据

三、demo的使用
1、demo1

<div id="myDiv">
    <input type="text" v-model="num1">
    <span>X</span>
    <input type="text" v-model="num2">
    <span>=</span>
    {{num3}}
</div>

<script type="text/javascript">

    new Vue({
        el:"#myDiv",
        data:{
            num1: 0,
            num2: 0,
            num3: 0
        },
        watch:{
            num1(newVal,oldVal){
                this.num3=this.num1*this.num2
            },
            num2(newVal,oldVal){
                this.num3=this.num1*this.num2
            }
        }
    })

</script>

2、demo2

<div id="myDiv">
    <input type="text" v-model="num1">
    <span>X</span>
    <input type="text" v-model="num2">
    <span>=</span>
    {{num3}}
</div>

<script type="text/javascript">

    new Vue({
        el:"#myDiv",
        data(){
            return{
                num1: 0,
                num2: 0,
                num3: 0
            }
        },
        watch:{
            num1(newVal,oldVal){
                this.num3=this.num1*this.num2
            },
            num2(newVal,oldVal){
                this.num3=this.num1*this.num2
            }
        }
    })

</script>

当在输入框中动态更改值时

两者都可以实现页面数据的动态替换

四、使用体验

1、vue实例上的一个表达式或者一个函数计算结果的变化，回调函数得到的参数为新值和旧值。

2、对象或者数组有变更的时候，旧值与新值相同，他们的引用指向同一个对象/数组，vue不会保留变更之前值的副本

3、当监测为对象的时候（非数组情况），deep = true 可以监测对象中属性的变化，并且（监测为对象的时候，newVal == oldVal）

4、进入组件的时候，第一次并不会执行watch，是因为immediate 默认 false
当 immediate = true 的时候，进入组件会立即执行。并且可以监测到组件传递数据。
最后一点，在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域