Vue_9:监视属性_前端监视属性-CSDN博客

本文链接：https://blog.csdn.net/wcj28738/article/details/120911398

<body>
    <!--天气案例-->
    <div id="root">
    <h2>今天天气很{{Info}}</h2>
    <button @click="changeweather">改变天气</button>
    </div>
</body>

<script>
    new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        methods:{
           changeweather(){
                this.isHot = ! this.isHot
            }
        },
        computed:{
            Info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        }
    })
</script>

<body>
    <!--天气案例 watch监视-->
    <div id="root">
    <h2>今天天气很{{Info}}</h2>
    <button @click="changeweather">改变天气</button>
    </div>
</body>
<!--
    监视属性watch:
        1.当监视函数被调用时,回调函数自动调用,进行相关操作
        2.监视的属性必须存在,才能进行监视
        3.监视的两种写法:
            (1)new.Vue时传入watch配置
            (2)通过vm.$watch进行监视
        
    
-->
<script>
    new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        methods:{
           changeweather(){
                this.isHot = ! this.isHot
            }
        },
        computed:{
            Info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        }
        /*watch:{
            Info:{
                immediate:ture,//初始化时让handler调用一下
                //handler什么时候调用? Info的值改变的时候
                handler(newValue,oldValue){
                    console.log('Info被改变了',newValue,oldValue)
                }
            }
        }*/
        //简写
        watch:{
            Info(newValue,oldValue){
                console.log('Info被改变了',newValue,oldValue)
            }
        }

    })

    vm.$watch('isHot',{
        immediate:ture,//初始化时让handler调用一下
        //handler什么时候调用? Info的值改变的时候
        handler(newValue,oldValue){
        console.log('Info被改变了',newValue,oldValue)
    })
    //简写
    vm.$watch('isHot',function(newValue,oldValue){
        console.log('Info被改变了',newValue,oldValue)
    })
</script>

<body>
    <div id='root'>
        <h2>a的值是{{a}}</h2>
        <button @click="number.a++"></button>
        <h2>b的值是{{b}}</h2>
        <button @click="number.b++"></button>
        <h2>c的值是{{c}}</h2>
        <button @click="number.c++"></button>
    </div>
</body>
<!--
    深度监视:
        1.Vue中的watch属性默认不检测对象内部值的改变(一层)
        2.配置deep:ture可以检测对象值的改变(多层)
    备注:
        (1)Vue自身可以检测内部多层值的改变,但Vue内部的watch属性默认不可以
        (2)使用watch时根据数据的具体结构,判断是否使用深度监测
-->

<script type="text/javascript">
    new Vue({
        el:'#root',
        number:{
            a:1,
            b:1
        }
        watch:{
            number:{
                console.log("number改变了")
            },
            //监视多级结构中某个属性的变化
            'number.a':{
                console.log("number中的a改变了")
            },
            //监视多级结构中所有属性的变化
            number:{
                deep:ture,
                console.log("number中的a改变了")
            }
        }
    })
</script>