vuewatch listeners

watch listeners

Added: You may have a lot of times you want to monitor a native events directly on the root element of a component. At this point, you can use v-ona .nativemodifier:

watch monitor a single data type

Namely: basic data types - simple monitoring, complex data types - Depth monitor

Simple monitor: ex:

  <div id="app">
        <input type="text" name="" v-model='msg'>
        <h3>{{msg}}</h3>
    </div>

    <script src="./node_modules/vue/dist/vue.js"> </script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data(){
                return{
                    msg:''
                }
            },
            watch:{
                msg:function(newV,oldV){//要监听的事件默认会传进来两个实参，他们对应的值就是一个是newValue，另外一个是oldValue
                    if(newV ==='闫小畅是个猪猪'){
                        console.log("哈哈哈哈我说的没错");
                    }
                }
            }
        })
    </script>

Complex listening

<div id="app">
        <input type="text" name="" v-model='msg'>
        <h3>{{msg}}</h3>
   <button @click = 'stus[0].name="jack"'>千万不要点我</button>>
    </div>

   new Vue({
            el:"#app",
            data(){
                return{
                    msg:'',
                    stus:[{name:'rose'}]
                }
            },
            watch:{
                msg:function(newV,oldV){
                    if(newV ==='闫小畅是个猪猪'){
                        console.log("哈哈哈哈我说的没错");
                    }
                },
                stus:function(newV,oldV){
                    console.log(newV[0].name);//然而这里并没打印出来，因为复杂数据类型监听不到对应的地址
                }
            }
        })

Need to change

stus:{
         deep:true,//深度监听
         handler:function(newV,oldV){
         console.log(newV[0].name);
       }
     }