Vue属性监听 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <input type="text" v-model.number="a"/>
        <input type="text" v-model.number="b"/>
        <p>之和:{{c}}</p> -->

        <input type="text" v-model="obj.name"/>
        <input type="text" v-model="obj.age"/>
        <input type="text" v-model="obj.sex">
        <hr>
        <button @click="handlepush()">增加</button>
    </div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            a:"",
            b:"",
            c:"",
            obj:{
                name:"zhangsan",
                age:19
            },
            arr:[10,20,30,40]
        },
        computed:{},
        beforeMount(){
            // this.obj.sex="女"
            this.$set(this.obj,"sex","女")
        },
        methods:{
            handlepush(){
                // this.arr.length = 0;
                // console.log(this.arr);

                // this.arr[0] = 100;
                // console.log(this.arr);

                this.$set(this.arr,0,100);
               
            }
        },
        watch:{
            // "obj.name"(newVal,oldVal){
            //     console.log(newVal,oldVal)
            // },
            // "obj.age"(newVal,oldVal){
            //     console.log(newVal,oldVal)
            // }
            // obj:{
            //     handler(newVal){
            //         console.log(newVal)
            //     },
            //     deep:true,
            //     //当页面第一次加载的时候也会做监听
            //     immediate:true
            // }
            arr(newVal){
                console.log(newVal)
            }
        }
    })

    /*
        属性监听
            watch:监听属性的变化

            原理：
                监听依赖的属性，当依赖的属性发生改变的时候，当前函数就会被调用

            注意：
                1、watch对象中存放的都是函数，函数的名称是data中的key值
                2、当data的属性发生改变的时候，那么watch中的函数就会执行。watch中的函数不需要调用
                3、watch中的函数会接收到2个值  一个是新值一个是旧值
                4、watch(watch如果监听对象的情况下只会监听对象的地址有没有发生改变)如果想要监听对象的情况下，必须进行深度监听 
                5、如果需要进行深度监听的时候必须使用handler函数以及设置deep为true
                6、在特殊的情况下watch是无法监听数组的变化,我们可以通过this.$set进行数据的修改
                7、watch默认情况下第一次页面加载的时候是不会进行数据的监听的，如果设置immediate就可以在第一次加载页面的时候进行数据的监听


            核心:
                当一个属性影响多个属性影响的时候就需要用到watch (搜索框  城市选择  vip级别选择....)



            能用computed解决的不要用watch



        面试题：
            在watch中如何监听数组的变化？
                通过set进行数组的更改
    
    */
</script>

 

posted @ 2019-07-22 10:04  前端小菜鸟吖  阅读(2594)  评论(0)    收藏  举报