监视属性与计算属性对比
监视属性简写
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