大家都知道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. 4、C#基础 - C# 的 常见概念简述

    在上篇文章中,你跟着我写了一个HelloWorld,本篇中,我们来谈谈一些C#程序中的小概念 1.C# 程序结构 一个 C# 程序主要包括以下部分: 命名空间声明(Namespace declarat ...

  2. IDEA上传项目至git

    今天来分享一下从idea上传项目至coding的过程. 本文基于windows系统. idea提供了很方便的控制git的界面化操作,除了安装git和一些必要的配置之外,用到命令行的地方会非常少. 1: ...

  3. JS 转换数字为大写

    function toUpper(n) { n = n+''; var unit = '十百千万'; var num = '一二三四五六七八九 '; var array = new Array(); ...

  4. C语言递归实现二叉树(二叉链表)的三种遍历和销毁操作(实验)

    今天写的是二叉树操作的实验,这个实验有三个部分: ①建立二叉树,采用二叉链表结构 ②先序.中序.后续遍历二叉树,输出节点值 ③销毁二叉树 二叉树的节点结构定义 typedef struct BiTNo ...

  5. java 类加载机制总结

    Java程序的运行,离不开class的加载,所谓类加载就是将编译好的class文件加载的jvm并形成class对象,只有class正确加载才能被实例化和调用. public class test { ...

  6. 海量服务实践──手 Q 游戏春节红包项目设计与总结(上篇)

    导语 大哥说.今年手Q游戏的春节红包你来做.那该怎么做?以及怎么做才干让大哥放心?本文从后台的角度出发讲述了这个过程和方法.对于关键的前台部分也有所涉及. 文件夹 1.需求背景 1.1.红包类别 1. ...

  7. SDUTOJ 贪心 -商人小鑫

    题目描写叙述 小鑫是个商人,当然商人最希望的就是多赚钱.小鑫也一样. 这天,他来到了一个遥远的国度.那里有着n件商品,对于第i件商品须要付出ci的价钱才干得到. 当然.对于第i件商品,小鑫在自己心中有 ...

  8. RPC-client异步收发核心细节?

    通过上篇文章的介绍,知道了要实施微服务,首先要搞定RPC框架,RPC框架分为客户端部分与服务端部分. RPC-client的部分又分为: (1)序列化反序列化的部分(上图中的1.4) (2)发送字节流 ...

  9. Java数组的一些使用方法及堆栈存储

    数组 用于存储一组同一数据类型数据的容器 数组会对放入其中的数据自动编号,编号是从0开始的---下标 定义格式 数据类型[] 数组名 = new 数据类型[数组的大小];---可以先声明再初始化 in ...

  10. 阿里云ECS部署ZooKeeper注意事项

    如果ECS为专有网络+弹性IP时,配置集群中,"自己"的ip要写成0.0.0.0,其他服务器可以写成公网ip.否则会包如下错误: java.net.BindException: C ...