尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

本篇内容对应课程第150-151节

课程 P150节 《computed计算属性》笔记

写一个简单的 姓、名输入框效果：

用vue2的形式定义一个计算属性 fullName：

测试页面展示无问题：

但是，在vue3的项目里，不建议再使用 vue2 的东西。

使用 vue3 的计算属性定义 fullName：

观察页面展示无问题：

将 fullName 作为一个属性放到 person 对象上，由于 person 是用 reactive 定义的响应式数据，所以 fullName 也是响应式的：

这是没有考虑 fullName 被修改的情况：

当试着修改这个计算属性时，控制台会报出警告：

计算属性考虑读和写两种情况的完整写法是传递一个对象，里面有 getter 函数和 setter 函数：

此时就可以修改计算属性了：

总结计算属性：

课程 P151节 《watch监视ref定义的数据》笔记

vue2中的写法：

vue3中的写法：