【Vue3】2-6 : 计算属性与侦听器区别与原理（一）
本书目录：点击进入
2.4 可赋值：需要定义成对象，并写get，set方法 （类似于java）
一、计算属性 - computed:{}
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，可以移植到计算属性中进行处理。
1.1 目的
-
简化模板语法中的逻辑编写
-
使视图更加清晰，并具备语义化
1.2 写法
-
代码
<body>
<div id="app">
{{ message.split(' ').reverse().join(' ') }}<br>
{{ reverseMessageMethod() }}<br>
{{ reverseMessageMethod() }}<br>
{{ reverseMessage1 }}<br>
{{ reverseMessage1 }}<br>
{{ reverseMessage2 }}<br>
{{ reverseMessage2 }}<br>
</div>
<script>
let vm = Vue.createApp({
data(){
return {
message: 'hello world'
}
},
methods: {
reverseMessageMethod(){
console.log(0);
return this.message.split(' ').reverse().join(' ');
}
},
computed: {
//方式一：方法
reverseMessage1(){
console.log(1);
return this.message.split(' ').reverse().join(' ');},
//方式二：对象
reverseMessage2: {
set(value){
this.message = value;
},
get(){
console.log(2);
return this.message.split(' ').reverse().join(' ');
}
},
}
}).mount('#app');
setTimeout(()=>{
// 报警告：[Vue warn]:
// Write operation failed: computed property "reverseMessage1" is readonly.
vm.reverseMessage1 = 'hi vue3';
vm.reverseMessage2 = 'hi vue4'; // 正常
}, 2000)
</script>
</body>二、特征
2.1 调用时当属性调用
-
可定义方法和对象
2.2 缓存
-
重复调用时，调用的是缓存
- 所以,这里只打印一次，1 和 2
2.3 默认只读
2.4 可赋值：需要定义成对象，并写get，set方法 （类似于java）
-
赋值成：hi vue4
-
由于显示的是 get() , 所以显示 vue4 hi
三、原理
