大家都知道computed简单的使用方法,这儿只分享一下setter和getter用法:

setter:设置值时触发。

getter:获取值时触发,与setter是没有必然联系的。

<template >
  <div>
    <button @click='fn'>设置</button> //点击后fn函数执行。
    <button @click='fn1'>获取</button> //点击fn1函数执行。
  </div>
</template>   
<script>
  export default {
    methods:{
      fn(){
      this.msg1=5  //msg1设置值
      },
      fn1(){     
        console.log(this.msg1)//msg1获取值  上面虽然设置了5,但是这儿是返回6,get函数返回值是6,跟set是没有必然关系的。
      }
    },
    computed:{
      msg1:{
        set(){  
          console.log('我被设置了')   //msg1设置值时此处触发 
        },
        get(){
          console.log('我被调用了') //msg1获取值时触发
          return 6         //这儿返回值将是msg1的值。
        }
      }
    }
  }
</script>
computed一般用法是改变data里面的值,作为自己的值。
欢迎大家指正。

vue2 computed set与get函数的更多相关文章

  1. Vue2.x中的Render函数

    Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...

  2. MobX中@computed和自定义get函数的区别

    首先这两者解决方法都会得到一个相同的结果,但使用@computed的意义在于它能够由MobX进行更智能的优化. 如果我不使用computed属性,直接使用自定义的getTheValue函数的话,那么一 ...

  3. vue2源码分析:patch函数

    目录 1.patch函数的脉络 2.类vnode的设计 3.createPatch函数中的辅助函数和patch函数 4.源码运行展示(DEMO) 一.patch函数的脉络 首先梳理一下patch函数的 ...

  4. 基于vue2.0原理-自己实现MVVM框架之computed计算属性

    基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...

  5. Vue2源码分析-逻辑梳理

    很久之前就看完vue1,但是太懒就一直没写博客,这次打算抽下懒筋先把自己看过了记录下来,否则等全部看完,估计又没下文了 看源码总需要抱着一个目的,否则就很难坚持下去,我并没做过vue的项目,我几乎很少 ...

  6. Vue2学习(1)

    学习Vue2的computed 属性和 watcher 主要将computed 和methods和watcher作比较,对其各自的相关优缺点作了介绍. computed 属性会基于它所依赖的数据进行缓 ...

  7. vue3与vue2的区别

    全局属性 vue2 对于一些第三方插件,vue2中通常使用prototype原型来挂载到vue对象中 import Vue from 'vue' Vue.prototype.$http=Axiox V ...

  8. Knockoutjs官网翻译系列(三) 使用Computed Observables

    书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed o ...

  9. vue computed 原理

    vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...

随机推荐

  1. 代码管理 ,git 命令整理

    //先要理解这四个概念,这是一个提交代码的流动轨迹:1.工作区(编辑器)-经过add到2- 2.暂存区 (缓存)- 经过commit3-3.本地仓库 (本地项目)-经过 push4-4.远程仓库 (线 ...

  2. 【Android源码解析】View.post()到底干了啥

    emmm,大伙都知道,子线程是不能进行 UI 操作的,或者很多场景下,一些操作需要延迟执行,这些都可以通过 Handler 来解决.但说实话,实在是太懒了,总感觉写 Handler 太麻烦了,一不小心 ...

  3. Swagger服务API治理详解

    swager2的简介 在App后端开发中经常需要对移动客户端(Android.iOS)提供RESTful API接口,在后期版本快速迭代的过程中,修改接口实现的时候都必须同步修改接口文档,而文档与代码 ...

  4. 虚拟DOM详解

    虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...

  5. C# Value type vs Reference type

    [MY NOTE]   [转载请注明出处] Reference Source: http://www.albahari.com/valuevsreftypes.aspx http://www.c-sh ...

  6. Android 四大组件学习之ContentProvider四

    上节我们学习了怎样去读取系统短信以及插入一条短信到系统中. 本节我们学习怎样获取系统的联系人,以及插入一条联系人 好.废话不多说了,直接操作. 首先和读取短信一样,先找到联系人在数据库中的位置. wa ...

  7. Javascript--cookie创建与查看

    创建cookie 以下代码将创建一个cookie,该cookie名称为UserName,值为Paul,过期时间为7天后(2015年6月29日) <span style="font-si ...

  8. 前端(各种demo)三:优惠券,热区,等模块的实现(css方式)

    各种样式的css实现 1.优惠券样式的实现: 2.热区的实现:   在电商平台上总会发出各种券,需要对应到不同的产品,对应到不同的服务.而使用券可以使用UED的设计稿里的照片,但是本来一次性的加载过多 ...

  9. IDEA下Spring Boot的快速搭建

    下边使用的是IDEA快速搭建一个Spring Boot项目 (1)File--New-New Project (2)点击Next填写相应的信息 (3)点击Next,选择Dependencies,这里创 ...

  10. Tuxedo:Tuxedo支持的分布式通信方式

    1.RPC:用于远程方法调用.Java中类似的技术有EJB.WebService 2.Conversaction:交流.Java中类似的有JDBC. 3.Message Notification:消息 ...