计算属性
作⽤：使⽤计算属性可以来处理⼀些复杂逻辑的数据
语法关键字： computed
特点：计算属性虽然写的像⽅法，但是它的使⽤⽅式和属性⼀样，属性怎么⽤，它就怎么⽤
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
姓: <input type="text" placeholder="First Name" v-model="firstNam
e"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName">
<br>
<hr>
姓名: <input type="text" placeholder="Full Name" v-model="fullNam
e"><br>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
firstName: '刘',
lastName: '德华'
}
},
computed: {
// 计算属性虽然写的像⽅法，但是它的使⽤⽅法和属性⼀样
fullName() {
return this.firstName + this.lastName;
}
}
}).mount("#app")
</script>
</body>
</html>
为什么要使⽤计算属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div>{{getFullName()}}</div>
<button @click="num++">点我点我</button>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
num: 0,
firstName: '刘',
lastName: '德华'
}
},
methods: {
getFullName() {
alert("我被点击了！");
return this.firstName + this.lastName;
}
},
}).mount("#app")
</script>
</body>
</html>
上述代码执⾏的时候发现，当我们点击按钮的时候，num执⾏了加1的操作，但是同样getFullName也
执⾏了⼀次操作。即，每次点击都会alert 我被点击了。原因是，每次num执⾏加1后Vue会重新渲染⻚
HTML⾯，⽽vue分不清楚⽅法⾥⾯到底在执⾏什么，所以每次刷⾏Dom,所有的⽅法都会被执⾏⼀遍。这个时
候我们就应该使⽤计算属性来解决这个问题
解决：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div>{{getFullName}}</div>
<button @click="num++">点我点我</button>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
num: 0,
firstName: '刘',
lastName: '德华'
}
},
computed: {
getFullName() {
alert("我被点击了！");
return this.firstName + this.lastName;
}
},
}).mount("#app")
</script>
</body>
</html>
解决原理：
vue会分析计算属性⾥⾯的⽅法，分析代码中依赖哪些属性值，如果这些属性值中有某个或
全部发⽣变化的话，那么这个⽅法才会重新执⾏，否则，不会执⾏这个⽅法。
总结就是计算属性执⾏的时机是：初始化显示或依赖的属性发⽣了变化
计算数据的get与set：
示例：需求是当我们修改全名时，姓和名也要跟着修改
