监视属性与计算属性对比
监视属性简写
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
标签:firstname,watch,day60,oldvalue,监视,简写,newvalue,属性 From: https://www.cnblogs.com/GUGUZIZI/p/17055120.html