这篇文章可以入选评委评选的最佳手记吗？期待ing…
✔（8）2-4 toRef以及context参数（1） ✔（9）2-5 toRef以及context参数（2） ✔（10）2-7使用 Composition API 开发TodoList（1） ✔（11）2-8使用 Composition API 开发TodoList（2） ✔（12）2-9 computed方法生成计算属性 x（13）2-10 watch 和 watchEffect 的使用和差异性（1） x（14）2-11 watch 和 watchEffect 的使用和差异性（2） |
|
我们始终围绕是什么+为什么+怎么用 来输出所学收获 （1）是什么： 计算属性 在composition API里面如何写的方法，其实就是调用它里面提供的一个新的函数叫做computed，然后里面接收一个回调函数去返回一个通过其他的属性计算出来的新值，这个新值就是一个新的计算属性 （2）怎么玩： 写法参考demo示例。 |
|
学习目标：
1）Composition API 里面的计算属性 conputed。
传统的 Vue 里面的计算属性，我们可以在这写 computed 的一些内容。
代码示例：
比如说你得写一个对象，
然后你可以返回一个新的内容，比如说叫做abc，
那么它的内容返回的是什么？
可以return this点什么？
this点cd加上ef，然后我们做一个计算属性，这是传统的 Vue 的语法，
在 Composition API 里面，我们在setup里面如何去写这种计算属性?
我们先来定一个最基础的数据 const 叫做 count等于ref。
当然我要引入 ref 等于 Vue。
然后我return一下 count，
在这里面我用 count，我加一个span标签，用一下 count，
然后点击的时候等于叫handleClick。
然后我们定一个方法，等于handleClick方法，每次我让count点value加等于1。
现在我们只是写了一个最基础的这样的计数器功能，我们到页面上看一下会不会有问题。点击它会报一个错误：
这里它会提示我们说 handleClick 函数里面没法去使用，
我们看这里：
我们handleClick这个方法并没有导出出去，我导出一下，再来刷新：
这样的一个最基础的计数器做完了，
我们来实现一个计算属性，首先如果想用计算属性的话，在composition API里面要去引入computed的这样一个方法，
然后我们去写一个比如说我们要做一个新的计算属性，它的名字叫做 countAddFive。
在count的基础上，我们希望它能够加5，它等于什么？
它就等于一个计算属性，computed 方法执行，让它接收一个回调，
在回调里面我 return count.value 加 5，
然后我把 countAddFive 导出出去，在这里面我加一个横线，再加一个插值表达式，把 countAddFive 加上：
我们保存一下，来看一下效果，刷新：
它会有一个这样的计算的特性，在 count的基础上它会加上5，然后作为一个计算属性展示在右侧，
同时只要count发生变化的时候，计算属性也会跟着响应的变化。
这就是计算属性 在composition API里面如何写的方法，其实就是调用它里面提供的一个新的函数叫做computed，
然后里面接收一个回调函数去返回一个通过其他的属性计算出来的新值，这个新值就是一个新的计算属性。
我们还可以写的稍微复杂一点，它其实可以接收一个对象，这个对象里可以接收set和get两个方法，
get方法就是取值时会调用的一个方法，我们去写一下：
它的意思是 countAddFive 这样的计算属性，
当你去获取它的时候，它怎么去获取的？
是在count的值上面加5，跟刚才我们直接那么去写，没有任何的区别。
有get就有set。
除了get也就是你获取属性的时候，你写一个get，表示的是你怎么去获取的，
你还可以写一个set，你可以给它赋值的时候做一些操作：
这是什么意思呢？
这个意思是当你尝试对 countAddFive 计算属性做修改的时候，我不管你怎么修改，我都会调用 set方法，
这个set方法里我做了一件事情，把count的value 置成了10，
我们看看这个效果，我们在这里写一个延时器 setTimeout，
我们写一个三秒钟的延时器，三秒之后我去让countAddFive 的值做一个修改，
比如说我想给它改成100，等于100。
当你去对它修改的时候，它会走 set 的函数，set函数里虽然你传了100进去，但我并没有用它，我是让count的 value直接等于10，
代码示例：
看一下这个效果是不是这样的。我们刷新一下，我们等三秒，这块我们看一下什么问题：
它会说你对 constant 变量做修改的时候是不行的，我们怎么去改它？
我们可以让它等于一个let：
保存一下，刷新，三秒之后，我们发现它还是没有效果。
看一下countAddFive 这样的一个内容修改它是没用的，我可以加一个点value:
因为它返回的内容应该也是被 ref 包裹的一个对象，如果你想改它的话，应该是要调用点value的，
我们来刷新。大家可以看到这个时候3秒之后它就变成10了，然后计算属性又被重新变成了15：
这是什么原因？就是三秒之后你把 countAddFive 的值给改了，它会调用set方法。
当然这块不要加return，加return是没有意义的：
set方法直接去改 count 的值， count值就变成了10，所以我们看到了现在count的值就是10，
计算属性再去读的时候，还是从count点value去读值然后加5，所以后面就展示出了15。
这就是我们在做这种计算属性更复杂编码的时候可以对它去写 get / set的方法，
然后去读取它的内容，对它做一些赋值。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
