一、计算属性
计算属性需要定义在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>
计算数据的get与set：
示例：需求是当我们修改全名时，姓和名也要跟着修改
<!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: {
get() {
return this.firstName + " " + this.lastName;
},
set(value) {
const arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
},
}).mount("#app")
</script>
</body>
</html>
二、监听属性
作⽤：Vue提供的⼀个更通⽤的⽅法，来监听数据的变化。当需要在数据变化时执⾏异步或开销较⼤的操 作时，这个⽅式是最有⽤的。
语法关键字： watch
<!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>
姓名：{{fullNameWatch}}
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
firstName: '刘',
lastName: '⼩刘',
fullNameWatch: " "
}
},
watch: {
// watch⾥⾯每个function都有两个参数，其中第⼀个是newValue,
// 第⼆个是oldValue,如果只需要使⽤到新的值那么就只写⼀个参数就可以
了
firstName: function (newValue, oldValue) {
this.fullNameWatch = newValue + " " + this.lastName;
},
lastName: function (newValue, oldValue) {
this.fullNameWatch = this.firstName + " " + newValue;
}
}
}).mount("#app")
</script>
</body>
</html>
计算属性与监听的区别：
computed函数需要return值让vue来读取，⽽watch不需要return
computed⾥⾯只能写同步的代码，不能写异步的代码，⽽watch可以
