Vue-13、Vue深度监视

1、监视多级结构中某个属性的变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch深度监视</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <hr>
    <h3>a的值是:{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    const vm = new Vue({
        el:"#root",
        data:{

            numbers:{
                a:1,
                b:2,
            }
        },
         watch:{
            //监视多级结构中某个属性的变化
             'number.a':{
                 handler(newvalue, oldvalue) {
                     console.log(newvalue,oldvalue);
                 }
             }
        }
    });
</script>
</body>
</html>

2、监视多级结构中所有属性的变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch深度监视</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <hr>
    <h3>a的值是:{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+</button>
    <hr>
    <h3>b的值是:{{numbers.b}}</h3>
    <button @click="numbers.b++">点我让b+</button>

</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    const vm = new Vue({
        el:"#root",
        data:{
            numbers:{
                a:1,
                b:2,
            }
        },
         watch:{
            //监视多级结构中某个属性的变化
             'number.a':{
                 handler(newvalue, oldvalue) {
                     console.log(newvalue,oldvalue);
                 }
             },
            //监视多级结构中所有属性的变化。
             numbers: {
                 deep:true,
                 handler(newvalue, oldvalue) {
                     console.log(newvalue,oldvalue)
                 }
             }

        }
    });
</script>
</body>
</html>

3、监视简写 当只有handler 时简写如下:

Vue-13、Vue深度监视_第1张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)