Vue property monitor

<!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: to true, 
            //      // when the page first loads will make the listener 
            //      load immediate: to true 
            // } 
            arr (newVal ) { 
                the console.log (newVal) 
            } 
        } 
    }) 

    / * 
        properties listener 
            Watch: listener properties change 

            principle: 
                listening dependent properties, when dependent properties change, the current function is called 

            Note: 
                . 1, the object Watch are stored in a function name of the function is data in the key value 
                2, when the data attribute is changed, then the watch function is executed. The need to call function watch 
                3, the function of the watch will receive two new values is a value of the old value of a
                4, watch (watch the address will only listen if the object of the case intercepted object has not changed) If you want to monitor the case of an object, you must monitor the depth 
                5, if needed depth when listening handler must use the functions and settings deep as to true 
                6, in exceptional circumstances watch is unable to monitor changes in the array, we can modify the $ set of data by the this. 
                7, when the default watch case, the first time the page is loaded data will not be listening If immediate set of data can listen the first time the page is loaded 


            core: 
                when a property that affect multiple properties that affect the need to use watch (the search box select city select vip level ....) 



            can Do not watch computed solve 



        questions face: 
            how to monitor changes in the watch in an array? 
                An array of changes made by the SET 
    
    * / 
</ Script>
Vue property monitor

Guess you like
