09_监听属性

Padingpading
79 阅读1分钟

一、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>天气案例</title>
 </head>
<body>
    <!-- 容器 -->
    <div id="root">
        <h3>今天天气很{{info}} 执行次数{{n}}</h3>
        <!-- click 执行的是语句 -->
        <!-- <button @click="isHot!=isHot;n++">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
   </div>

    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        const a  = new Vue({
            el:'#root',
            data:{
                isHot:true,
                n:0
            },
            computed:{
                info:{
                    get(){
                        return this.isHot?"炎热":"凉爽"
                    }
                }
            },
            methods:{
                changeWeather(){
                    this.isHot=!this.isHot,
                    this.n++
                }
            } 
        })
    </script>
</body>
</html>

image.png

二、侦听属性基本用法

watch监视属性

1当被监视的属性变化时，回调函数自动调用，进行相关操作  
2监视的属性必须存在，才能进行监视，既可以监视data，也可以监视计算属性  
3配置项属性immediate:false，改为 true，则初始化时调用一次 handler(newValue,oldValue)
     data属性:
     计算属性:属性的oldValue是undefined,因为第一次初始化是没有值得。
4监视有两种写法  
    a创建Vue时传入watch: {}配置  
    b通过vm.$watch()监视

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>天气案例</title>
 </head>
<body>
    <div id="root">
        <h3>今天天气很{{info}}</h3>
        <!-- <button @click="isHot=!isHot">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
   </div>

    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        const a  = new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            computed:{
                info:{
                    get(){
                        return this.isHot?"炎热":"凉爽"
                    }
                }
            },
            methods:{
                changeWeather(){
                    this.isHot= !this.isHot
                }
            },
            // 方式一:当isHot发生变化时,监听到。
            // watch:{
            //     isHot:{
                // 立即调用,即初始化的时候调用。
            //         imediate:true,
            //         handler(newValue,oldValue){
            //             console.log('isHost被修改了',newValue,oldValue)
            //         }
            //     }
            // }
        })
        // 方式二
        a.$watch('isHot',{
            imediate:true,
                    handler(newValue,oldValue){
                        console.log('isHost被修改了',newValue,oldValue)
                    }
        })
    </script>
</body>
</html>

深度监视

1Vue中的watch默认不监测对象内部值的改变（一层）
2在watch中配置deep:true可以监测对象内部值的改变（多层）

注意
1Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
2使用watch时根据监视数据的具体结构，决定是否采用深度监视

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>天气案例</title>
</head>

<body>

    <div id="root">
        <h3>a的值是{{ numbers.a }}</h3>
        <button @click='numbers.a++'>点我让a+1</button>
        <h3>b的值是{{numbers.b}}</h3>
        <button @click='numbers.b++'>点我让b+1</button>
        <!-- <button @click='numbers = {a:666,b=888}'>彻底替换掉numbers</button> -->
        numbers{{numbers.c.d.e}}
    </div>

    <script type='text/javascript'>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                isHot: true,
                numbers: {
                    a: 1,
                    b: 1,
                    c: {
                        d: {
                            e: 100
                        }
                    }
                }
            },
            watch: {
                //监视多级结构值得变化
                "numbers.a": {
                    deep: true,
                    handler() {
                        console.log('值变化了')
                    }
                },
                //检测numbers的结构发生变化,多级结构
                //deep:true
                "numbers": {
                    deep: true,
                    handler() {
                        console.log('值变化了')
                    }
                },
                //检测numbers的结构发生变化
                numbers(newValue, oldValue) {
                    console.log('修改了', oldValue, newValue);
                }

            }
        })
    </script>
</body>

</html>

image.png

侦听属性简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>天气案例</title>
 </head>
<body>
    <div id="root">
        <h3>今天天气很{{info}}</h3>
        <button @click="changeWeather">切换天气</button>
   </div>

    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        const vm  = new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            computed:{
                info:{
                    get(){
                        return this.isHot?"炎热":"凉爽"
                    }
                }
            },
            methods:{
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
            // 简写
            // watch:{
            //     isHot(newValue,oldValue){
            //         console.log('变更了',newValue,oldValue)
            //     }
            // }
        })
        // 简写
        vm.$watch('isHot',(newValue,oldValue)=>{
            console.log('值变动了',newValue,oldValue)
        })
    </script>
</body>
</html>
avatar
文章
阅读
粉丝