版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/TDCQZD/article/details/82154657
一、基本介绍
计算属性和侦听器
1、基础使用
2、计算属性缓存
3、计算属性的 getter/setter
4、监听属性watch $watch
二、代码案例
1、基础使用
代码实例：
<!--计算属性和侦听器
1、基础使用
2、计算属性缓存
3、计算属性的 getter/setter
4、监听属性watch $watch
-->
<body>
<div id="app">
<input type="text" v-model="msg1"> <br>
<input type="text" v-model="msg2"> <br>
<input type="text" v-model="msg3">
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
msg1:"A",
msg2:"B"
},
computed:{
//计算属性所对应的函数 什么时候被执行？
// 1. msg3指令被vue解析时
// 2. 当计算属性所依赖的属性产生变化时
msg3() {
console.log("msg3");
return `${this.msg1}-${this.msg2}`
}
}
})
</script>代码运行结果：
2、计算属性缓存
代码实例：
<head>
<meta charset="UTF-8">
<title>02_计算属性缓存</title>
</head>
<body>
<div id="app">
{{msg3}}
{{msg3}}
{{msg3}}
{{msg3}}
{{msg3}}
{{msg3}}
{{msg3}}
{{msg3}}
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
msg1:"A",
msg2:"B",
msg4:"A-B"
},
computed:{
//get方法
msg3:{
get(){
console.log("计算属性msg3的get方法");
return `${this.msg1}-${this.msg2}`;
}
}
}
})
</script>代码运行结果：
A-B A-B A-B A-B A-B A-B A-B A-B3、计算属性的 getter/setter
代码实例：
<head>
<meta charset="UTF-8">
<title>实现双向监听</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg1"> <br>
<input type="text" v-model="msg2"> <br>
<input type="text" v-model="msg3">
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
msg1:"A",
msg2:"B",
msg4:"A-B"
},
computed:{
//get方法
msg3:{
get(){
return `${this.msg1}-${this.msg2}`;
},
set(val){
let arr = val.split("-");
this.msg1 = arr[0];
this.msg2 = arr[1];
}
}
}
})
</script>代码运行结果：
4、监听属性watch $watch
代码实例：
<head>
<meta charset="UTF-8">
<title>实现监听</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg1"> <br>
<input type="text" v-model="msg2"> <br>
<input type="text" v-model="msg3"> <br>
<input type="text" v-model="msg4">
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
msg1:"A",
msg2:"B",
msg4:"A-B"
},
computed:{
msg3() {
console.log("msg3");
return `${this.msg1}-${this.msg2}`
}
}/*,
watch:{
msg1(newV,oldV){
this.msg4 = `${newV}-${this.msg2}`;
},
msg2(newV,oldV){
this.msg4 = `${this.msg1}-${newV}`;
}
}*/
})
//$watch内部不要使用es6的语法
vm.$watch("msg1",function(newV,oldV){
this.msg4 = `${newV}-${this.msg2}`;
})
vm.$watch("msg2",function(newV,oldV){
this.msg4 = `${this.msg1}-${newV}`;
})
</script>
代码运行结果：
