day60-watch与计算属性的对比与监视属性的简写

监视属性与计算属性对比

监视属性简写

watch:{
     //正常写法
     /*
     isHot:{
         handler(newvalue,oldvalue){
             //当isHot改变的时候调用
             console.log("ishot change",newvalue,oldvalue)
         }
     },
 
      */
     //简写
     isHot(newvalue,oldvalue){
         console.log("ishot change",newvalue,oldvalue)
     }
 
     }

当不需要深度监视等操作时，可以使用简写，此时主函数就是handler函数

计算属性与监视属性对比

监视的属性必须存在，所以创造首先的属性，接着进行监视

以计算属性的姓名案例：

<body>
 <!--
     computed和watch的区别：
         1.computed能完成的功能，watch都能完成
         2.watch能完成的功能，computed不一定能完成，例如：watch可以完成异步操作
     原则：
         1.所有被vue管理的函数，最好写成普通函数，这样this指向的是vm或者组件实例对象
         2.所有不被vue管理的函数（定时器回调函数，ajax的回调函数），最好写成箭头函数，
           这样this指向的才是vm或者组件实例对象
 -->
 <div id="root">
     姓:<input type="text" v-model="firstname"><br>
     名:<input type="text" v-model="lastname"><br>
     姓名:<span>{{fullName}}</span>
 </div>
 
 </body>

创建新的fullname属性

<script>
     Vue.config.productionTip = false
 
 
     const vm = new Vue({
         el:'#root',
         data:{
             firstname:'张',
             lastname:'三',
             fullName:'张-三'
         },
         watch:{
             firstname(newvalue){
                 setTimeout(()=>{
                     this.fullName = newvalue +'-'+ this.lastname
                 },1000)
 
             },
             lastname(newvalue){
                 this.fullName = this.firstname +'-'+ newvalue
             }
         }
 
     })
 </script>

首先对fullname赋值，后根据监视firstname与lastname，对fullname的值进行更改

总结

 <!--
     computed和watch的区别：
         1.computed能完成的功能，watch都能完成
         2.watch能完成的功能，computed不一定能完成，例如：watch可以完成异步操作
     原则：
         1.所有被vue管理的函数，最好写成普通函数，这样this指向的是vm或者组件实例对象
         2.所有不被vue管理的函数（定时器回调函数，ajax的回调函数），最好写成箭头函数，
           这样this指向的才是vm或者组件实例对象
 -->

over