vue10-1 Vue对象中的watch监测属性和computed计算属性
作者：互联网
结论：
computed 和 watch 之间的区别：
1. computed能完成的功能，watch都可以完成。
2. watch可以完成的，computed不一定能完成，例如：watch可以进行异步操作，computed则不可以
(因为computed一般都是自定义函数，且有自己的return返回值，如果函数中使用setTimeout来做异步，那么return值是返回给了setTimeout,而没有值返回给调用处；
而watch中一般是监测现有的变量赋值，不是return返回值)。
自理解：
3. 只针对变量而言，watch监测的都是现有的变量，不能自定义其它名字；而computed则可以自定义属性名（fullName(){...}）,且此名称可以在DOM中直接使用。
其它：
1. 所有被Vue管理的函数，最好写成普通函数（fun1(){...}），这样this的指向才是vm（const vm = new Vue({...})）。
2. 所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
1. 监测属性watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{tianqi}}</h2>
<button @click="click_tab()">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data:{
isHot: false
},
methods:{
click_tab(){
this.isHot = !this.isHot
}
},
computed:{
tianqi(){
return this.isHot ? '炎热': '凉爽'
}
},
// 监视属性使用方法1，明确知道要监测哪些变量或方法
watch:{
// isHot(newValue, oldValue){
// console.log('isHost被改变了', newValue, oldValue);
// }
// 或
// isHot:{
// immediate: true, // 初始化时让handler调用一下
// // handler什么时后调用？当isHot发生改变时
// handler(newValue, oldValue){
// console.log('isHost被改变了', newValue, oldValue);
// }
// }
}
})
// 监视属性使用方法2， 后续要增加监测时，可以用这个方法
vm.$watch('isHot', {
immediate: true, // 初始化时让handler调用一下
// handler什么时后调用？当isHot发生改变时
handler(newValue, oldValue){
console.log('isHost被改变了', newValue, oldValue);
}
})
</script>
</body>
</html>
2. 深度监测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{number.a}}</h2>
<button @click="number.a++">a的值+1</button>
<br>
<h2>{{number.b}}</h2>
<button @click="number.b++">b的值+1</button>
<br>
<h2>{{number.c.c_2}}</h2>
<button @click="number.c.c_2++">c中c_2的值+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data:{
isHot: false,
number:{
a: 1,
b: 1,
c: {
c_1: 10,
c_2: 10
}
}
},
watch:{
// 监视多级结构中某个属性的变化
'number.a': {
handler(){
console.log('a 被改变了');
}
},
// watch默认只监测一层内部值的改变（此处也就是监测整个number的物理地址），如要监测第二层a,b,c或第三层c_1,c_2的值，需要增加deep属性
'number':{
deep: true,
handler(){
console.log('number中的值有变化');
}
}
}
})
</script>
</body>
</html>
3.1. 使用计算属性 computed实现fullName并随输入而变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<span>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
</span>
<h3>全名: {{fullName}}</h3>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data:{
firstName: '张',
lastName: '三'
},
computed:{
fullName(){
return this.firstName + this.lastName
}
},
watch:{
}
})
</script>
</body>
</html>
3.2. 使用watch实现fullName并随输入而变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用watch实现fullName</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<span>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
</span>
<h3>全名: {{fullName}}</h3>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data:{
firstName: '张',
lastName: '三',
fullName: '张三'
},
watch:{
firstName(newValue, oldValue){
this.fullName = newValue + this.lastName
},
lastName(newValue, oldValue){
this.fullName = this.firstName + newValue
}
}
})
</script>
</body>
</html>
标签：Vue,computed,watch,isHot,fullName,newValue,属性 来源： https://www.cnblogs.com/leafchen/p/16477654.html