Vue之计算属性computed（二）

补充说明computed的平时使用的遇到的一些问题

这边通过一个例子来引出computed在使用过程中的一些问题:

代码图

当我们执行以下的语句的时候

执行语句赋值

报错图

这里表示了已经在计算属性中有了newStringLength的这个值但是我们没有设置它的setter的方法，我们通过官网可以知道像上述的计算属性还可以写成如下的格式：

代码图

newString的两种写法的效果是一致的，也就是说当我们的计算属性是用函数的方式访问的时候他默认是用getter的方式来执行的。在计算属性的构造方法里面还有set的方法是来修改计算属性的值，举一个相对简单啊的例子。

原始数据

计算属性

显示结果

这里的显示是初始的计算属性，Hello,world

当我们点击修改计算属性，如果没有set的方法的话我们页面会报上面页面的错。was assigned to but it has no setter

修改计算属性

当我们修改计算属性newString的值的时候值会进入newSrting 的setter的方式中，执行了set的方法，‘World,hello’ 将是参数value的值通过执行了语句得到了结果。

点击前

点击后

总结：当你需要通过赋值的方式或者双向绑定的方式去修改一个计算属性的值你需要显式的重写set的方法，但是你可用通过代码发现，其实计算属性的set方式修改计算属性归根到底是通过修改计算属性的响应式依赖来修改这个的值，当你修改newSrting 的值时其实执行的时修改了msg 和pre的值这两个响应式的依赖，然后又通过了get的方法重新计算了计算属性的值。所以我们不推荐给计算属性赋值，而是通过修改响应式依赖修改计算属性的值。