本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
涉及面试题：
Vue.set 视图更新？
[编号：vue_10]
打开编辑器并敲出使用计算属性的一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-计算属性的 getter 和 setter</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}} <!-- 3️⃣插值表达式内使用计算属性 fullName。 -->
<!-- ❗️当使用插值表达式时，Vue 会先到 data 中去找，如果找不到，就会到 computed 中去找，
找到后显示在页面上！ -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: { // 1️⃣在实例的 data 中定义一组数据；
firstName: 'Oli',
lastName: 'Zhao'
},
computed: { // 2️⃣在 computed 中定义 fullName；
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
保存后打开页面，显示正常：
1 计算属性的 getter
计算属性默认只有
getter。
我们对上面的代码进行改写以便理解：
<div id="app">
{{fullName}} <!-- 3️⃣当调用插值表达式去读取 fullName 这个计算属性的内容时，
就会使用 get 这个方法。 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao'
},
computed: {
fullName: { // 1️⃣把计算属性 fullName 改写为一个对象；
get() { // 2️⃣在这个计算属性里默认有一个 get 方法；
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
当我们这样写 fullName 时，与改写前的写法其实是一模一样的：
2 计算属性的 setter
计算属性中除了 getter，在需要时也可以使用 setter。
getter 即计算属性中的 get 方法，那么与之对应的 setter 就是 set 方法了：
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao'
},
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(value) { // 1️⃣set 即设置，这个方法接收一个参数 value；
console.log('我是 set 的 value：' + value) // 2️⃣在控制台打印出 value。
}
}
}
})
</script>
保存后刷新网页， set 方法没有执行，对 fullName 进行变更它才会执行：
❓如何利用 set 来让页面显示新设置的全名？
这样来改写 set 函数：
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao'
},
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(value) {
var arr = value.split(" ") // 1️⃣用空格作为分隔符将输入的内容分割成字符串数组；
this.firstName = arr[0] // 2️⃣字符串数组的第一项作为 firstName；
this.lastName = arr[1] // 3️⃣字符串数组的第二项作为 lastName。
}
}
}
})
</script>
❓这样使用 set 来达到显示全名效果的原理是怎样的？
答：当计算属性依赖的数据发生改变时，它会重新计算。 所以当设置 fullName 时，firstName 和 lastName 发生变化，恰好是 fullName 所依赖的值，就引起 fullName 的重新计算。
重新计算后， fullName 变了，页面上显示的 fullName 也就跟着变了。
在控制台打印出 firstName 和 lastName ：
🏆总结： 计算属性默认只有 getter，但同时也可以设置 setter。
当使用 get 方法时，可以通过其他的值计算出一个新值。当使用 set 方法时，通过设置一个值，来改变 fullName 所依赖的值。从而引起 fullName 重新计算，页面就会跟着变为新的内容。
祝好，qdywxs ♥ you！
