计算属性是什么：vue文档里是这么说的，模板中绑定太多的逻辑会让模板过重且难以维护。
换句话说，就是可以自己设置值（b值），这个值和data下定义的值（a值）存在某些关系，b的值是基于a的值，通过某些逻辑产生出来的值，b值可以直接拿到template里去用。当a的值发生变化的时候，b的值会跟着变化。就是计算属性中的默认值get。那set又是什么鬼？
b的值是基于a的变化而变化的，那么直接修改b的值的时候，会怎么样？这里会走进set方法里去。
总之一条：b的值始终是依赖a的值存在和变化的。最后渲染出来的a为100，b为110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>a的值是：{{a}}</p>
<p>b的值是：{{b}}</p>
<button @click="change">按钮</button>
</div>
<script>
new Vue({
el: '#app',
data:{
a:1
},
computed: {
b: {
// getter
get: function () {
return this.a + 10
},
// setter
set: function (val) {
this.a = val
}
}
},
methods:{
change() {
this.b = 100
}
}
})
</script>
</body>
</html>