vue文档中的watch

  <div id="app">
        <span>这里是message</span>
        <input type="text" v-model = 'message'>
        <h4>{{message}}</h4>
        <span>这里是obj.name</span>
        <input type="text" v-model = 'obj.name'>
        <h4>{{obj.name}}</h4>
        <span>这里是obj.age</span>
        <input type="text" v-model = 'obj.age'>
        <h4>{{obj.age}}</h4>
    </div>

  <script>
        let a = new Vue({
            el:"#app",
            data:{
                message:"nihoaa",
                obj:{
                    name:"lisi",
                    age:18
                }
            },
            computed: {
              objname(){
                  return this.obj.name
              }  
            },
            watch: {
                message:function(newvalue,oldvalue){
                   console.log(oldvalue);
                },
                //与上面的写法效果一致
                // message:{
                //     handler:function(newvalue,oldvalue){
                //    console.log(oldvalue);
                //    console.log(newvalue);
                // },
                // immedaite:false,
                // deep:false
                // },
                // obj.name:function(){
                 //提示错误,不能直接监听对象的某个属性，如果真想监听某个
                 //属性可以通过计算属性。
                // }
                objname:{ //通过计算属性得到obj.name
                     handler:function(newvalue,oldvalue){
                       console.log('新值：'+newvalue,'旧值'+oldvalue);
                     }
                },
                obj:{handler:function(newvalue,old){
                    console.log(newvalue.name,old.name);
                    //无论改变的是对象里的哪个属性都会被触发
                },
                deep:true
                //必须设置成true深度监听，默认是false监听不到。
                
                }
            }
        })
    </script>

还有就是computed计算属性只有当其依赖即需要用到的数据发生变化时才会重新计算，否则会一直缓存提高性能

watch不会缓存