理解vue中的computed

vue中计算属性很常见,熟悉vuex的应该都知道getter也就是store仓库状态的state计算处理,但是改变state的方法只能是提交mutation,那么回到

computed这个属性,同样的,如果我们只是用到这个计算的值,而不对其做任何处理,那么完全可以这么写(因为computed默认是getters状态):

如图所示,如果我们需要对计算的值的处理时,对其直接赋值就会报错,这个时候就需要用到computed另外一个属性setter了,当然这俩者是相互独立的,

互不干涉,测试代码很简单,只需要分别派发setter与getter然后在updated中测试一下就好,贴一个结合.sync的demo吧(.sync就是一个props与事件广播的语法糖,不赘述了)

这是dom结构,vue实例化挂载的是app这个id;

然后是一个全局的组件,(全局组件必须在vue实例化之前定义),然后是使用组件的结构(这里不是单文件组件)

当更改computed中的值时,需要使用到set属性,因为单向的数据流,所以必须将值广播出去,value即是监听计算值变化的回调返回值,

注意的这个计算值本身仍是无法改变,但是因为广播之后父组件的值变了,这时候在get中能看到值的变化,在set中仍然是没有变化的,结果只需要console打印下即可,不再赘述了。