前篇写了computed属性，但是我们发现不能修改computed属性的值。
其实可以修改的我们再看看。
v computed是什么？
计算属性, 一个变量的值根据其他变量（一个或者多个）的变化，自动反映，算出新的结果。
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
好，复习前面的。我们这里改造成get 和set方法。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue3青铜到黄金-丸子酱-vue-0n</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/vue3.1.5_vue.global.js"></script>
</head>
<body>
<div id="wzApp">
<h3><a v-bind:href="url">点击访问->子酱@CSDN博客</a></h3>
<input v-model="num1" /><br/>
<input v-model="num2" /><br/>
<div>result {{result}} </div>
<br/><div><input v-model="result" /> </div>
</div>
</body>
<script>
const { createApp, ref, computed } = Vue
const url = 'https://blog.csdn.net/qq_28008615'
const num1 = ref(0)
const num2 = ref(1)
const app = {
/*const result1 = computed(
()=> int(num1.value) + int(num2.value)
)*/
setup() {
/** const result = computed(
() => Number(num1.value) + Number(num2.value)
)*/
const result = computed({
get: ()=> Number(num1.value) + Number(num2.value),
set:(v)=> v
})
result.value = 20
return {
url, num1, num2, result
}
}
}
createApp(app).mount('#wzApp')
</script>
</html>
运行效果如下：
第一，我直接修改第三个绑定result computed属性的。
结果是可以被修改到的。但是上面的result div块不会被更新，因为result div内绑定的是get取值的方法。
第二，我直接修改第二个绑定num2 的属性的。
页面上所有的result div块会被更新，因为result div内绑定的是get取值的方法。
我们发现computed属性不允许修改，控制台报错了。（下一篇再讲解）
其他更多读者可以试试编写一些computed属性的代码，vue3还是增强了不少。
总结
computed 计算属性: 适合计算一个属性, 并且绑定.
computed 可以监控跟踪到不同变量值的变化来自动计算出新的结果。
通过set/get方法让computed属性更加弹性了。
今天就写到这里。
我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢