vue2 computed set与get函数
大家都知道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>
vue2 computed set与get函数的更多相关文章
- Vue2.x中的Render函数
Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...
- MobX中@computed和自定义get函数的区别
首先这两者解决方法都会得到一个相同的结果,但使用@computed的意义在于它能够由MobX进行更智能的优化. 如果我不使用computed属性,直接使用自定义的getTheValue函数的话,那么一 ...
- vue2源码分析:patch函数
目录 1.patch函数的脉络 2.类vnode的设计 3.createPatch函数中的辅助函数和patch函数 4.源码运行展示(DEMO) 一.patch函数的脉络 首先梳理一下patch函数的 ...
- 基于vue2.0原理-自己实现MVVM框架之computed计算属性
基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...
- Vue2源码分析-逻辑梳理
很久之前就看完vue1,但是太懒就一直没写博客,这次打算抽下懒筋先把自己看过了记录下来,否则等全部看完,估计又没下文了 看源码总需要抱着一个目的,否则就很难坚持下去,我并没做过vue的项目,我几乎很少 ...
- Vue2学习(1)
学习Vue2的computed 属性和 watcher 主要将computed 和methods和watcher作比较,对其各自的相关优缺点作了介绍. computed 属性会基于它所依赖的数据进行缓 ...
- vue3与vue2的区别
全局属性 vue2 对于一些第三方插件,vue2中通常使用prototype原型来挂载到vue对象中 import Vue from 'vue' Vue.prototype.$http=Axiox V ...
- Knockoutjs官网翻译系列(三) 使用Computed Observables
书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed o ...
- vue computed 原理
vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...
随机推荐
- pipelineDB里Combine用法
combine only works on aggregate columns that belong to continuous views. 创建CONTINUOUS CREATE CONTINU ...
- SQL Server Profiler追踪数据库死锁
- 【Cocos游戏实战】功夫小子第七课之游戏主功能场景逻辑功能和暂停功能场景的分析和实现
CSDN的markdown编辑器是吃屎了么! !.什么玩意.!写了一半写不了东西还全没了,搞个毛线! 本节课的视频教程地址是:第七课在此 假设本教程有帮助到您,希望您能点击进去观看一下,并且如今注冊成 ...
- Ubuntu1204 vim中文乱码解决方法
加入中文字符编码 sudo vi /var/lib/locales/supported.d/local #加入以下的中文字符集 zh_CN.GBK GBK zh_CN.GB2312 GB2312 zh ...
- Android-Volley网络通信框架(ImageRequest,ImageLoader,NetWorkImageView)
1.回想 上篇已经学习了,RequestQueue , StringRequest ,JsonObjectRequest 的使用 2.重点 (1)Volley请求图片的三种方式 (2)ImageRe ...
- python 创建列表和向列表添加元素方法
今天的学习内容是python中的列表的相关内容. 一.创建列表 1.创建一个普通列表 >>> tabulation1 = ['大圣','天蓬','卷帘'] >>> ...
- 【quickhybrid】API的分类:短期API、长期API
前言 一切就绪,开始规划API,这里在规划前对API进行了一次分类:短期API.长期API 首先申明下,这个是在实际框架演变过程中自创的一个概念,其它混合框架可能也会有这个概念,但应该是会在原生底层来 ...
- 三、Spring Boot 多数据源配置
下面一个Java类是已经写好的根据配置文件动态创建多dataSource的代码,其原理也很简单,就是读取配置文件,根据配置文件中配置的数据源数量,动态创建dataSource并注册到Spring中. ...
- Java的流程控制结构,细节详解
位运算符 &与 |或 ^异或 <<左移 >>右移 >>>无符号右移 ~取反 注意:位运算是针对整数运算的 int i = 6,j = 10; 方式一 ...
- 自学WPF之XAML(二)控件
摘自<深入浅出WPF>. 在WPF中是数据驱动UI,数据是核心,是主动的,UI从属于数据,并表达数据,是被动的.UI是展示给用户操作的.响应UI操作的元素是控件(control).下面是我 ...