理解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打印下即可,不再赘述了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,006评论 0 25
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 7,666评论 1 17
  • vue.js是什么 是一套构建用户界面的渐进式框架 vue应用组成 一个 Vue 应用由一个通过new Vue创建...
    多多酱_DuoDuo_阅读 4,620评论 0 2
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,029评论 1 12
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 8,643评论 0 3