在 Vue.js 中，computed 是一种计算属性，它能够根据依赖的数据动态计算出一个新的值。
computed 属性可以定义为一个函数，该函数返回需要计算的值。
当它所依赖的数据发生变化时，Vue.js 会自动重新计算这个值并将其更新到组件上。
与 computed 对应的还有另外两种常见的属性，分别是 methods 和 watch。
其中，methods 可以定义一些计算逻辑，但它们返回的值不能缓存，每次都会重新计算；
而 watch 则用于监听某个数据的变化并执行一些操作，但它不能返回数据值。
computed 属性还可以通过 get 和 set 方法来实现对计算属性的输入输出控制。
get 方法表示当访问计算属性时要执行的代码，
set 方法则表示当给计算属性赋值时要执行的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed set get</title>
</head>
<body>
<!--View-->
<div id="box">
<input v-model="fullInputName" />
<div>{{fullName}}</div>
</div>
</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
//Model
const user = {
data(){
return{
firstName: "Jack",
lastName: "Jobs", //乔布斯
fullInputName:''
}
},
computed: {
fullName: {
get(){
console.log('get called...');
return this.firstName + " " + this.lastName;
},
set(value) {
console.log("set called.");
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
},
watch:{
fullInputName(value){
console.log('----watch');
this.fullName = value;
}
}
}
//ViewModel
const app = Vue.createApp(user);
const rc = app.mount("#box");
</script>
</html>