【Vue3】2-7 : 计算属性与侦听器区别与原理(二)
本书目录:点击进入
示例1:已知 n1=3 ,n2=4 求 n3 = n1 * n2 ,改变n1,n2,求n3
一、监听器 - watch: {}
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。
1.1 目的
-
用来 观察和响应 Vue实例上的数据变动
-
类似于临听机制+事件机制
1.2 应用场景
当有一些数据需要随着其它数据变化而变化时,就可以使用侦听器。
1.3 语法
<div id="app">
{{ message }}
</div>
<script>
let vm = Vue.createApp({
data(){
return {
message: 'hello'
}
},
watch: {
message(newVal, oldVal){
}
}
}).mount('#app')
</script>
二、计算属性和侦听器的区别
监听器 | 计算属性 | |
函数 | 已知x,y,z...,求 f(x,y,z...) | 已知f(x,y,z...),求 x,y,z... |
异步 | 支持 | 不支持 |
-
计算属性适合:多个值去影响一个值的应用;而侦听器适合:一个值去影响多个值的应用
-
侦听器支持异步的程序,而计算属性不支持异步的程序
三、实战
示例1:已知 n1=3 ,n2=4 求 n3 = n1 * n2 ,改变n1,n2,求n3
总结:该场景计算属性比监听器更加简便
> 代码 - 计算属性
<div id="app">
{{ n1 }} * {{ n2 }} = {{ n3 }}
</div>
<script>
let vm = Vue.createApp({
data(){
return {
n1: 3,
n2: 4
}
},
computed: {
n3(){
return this.n1 * this.n2;
}
}
}).mount('#app');
setTimeout(()=>{
vm.n1 = 5;
}, 2000)
</script>
> 代码 - 监听器
<div id="app">
{{ n1 }} * {{ n2 }} = {{ n3 }}
</div>
<script>
let vm = Vue.createApp({
data(){
return {
n1: 3,
n2: 4,
n3: 12
}
},
watch: {
n1(newVal, oldVal){
this.n3 = newVal * this.n2;
},
n2(newVal, oldVal){
this.n3 = newVal * this.n1;
}
}
}).mount('#app');
setTimeout(()=>{
vm.n1 = 5;
}, 2000)
> 效果
示例2:已知 n3 求 n1 和 n2
> 代码
<script>
let vm = Vue.createApp({
data(){
return {
n1: 3,
n2: 4,
n3: 12
}
},
watch: {
n3(newVal, oldVal){
let ret = [];
for(let i=1;i<=newVal;i++){
if( newVal%i === 0 ){
ret.push([i, newVal/i]);
}
}
let now = ret[ Math.floor(Math.random()*ret.length) ];
this.n1 = now[0];
this.n2 = now[1];
}
}
}).mount('#app');
setTimeout(()=>{
vm.n3 = 20;
}, 2000)
</script>