vuewatch监听器

watch监听器

补充：你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：

watch 监听单个数据类型

即：基本数据类型—简单监听，复杂数据类型—深度监听

简单监听：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>

复杂监听

<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);//然而这里并没打印出来，因为复杂数据类型监听不到对应的地址
                }
            }
        })

需要改成

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