Vue中的计算属性和监听器(computed 与 watch)
react中数据是单向绑定的,而vue中数据是双向绑定的。为什么? 在react中,主要是通过setState 去改变state的值;而在vue中,会自动的触发set 与get 改变属性的值。
在vue中有两个比较重要的知识点,computed 与 watch;
一、computed
computed 适用计算一些属性,内存消耗较小依赖值不变,这个也不会变。

一般情况下,我们声明的计算属性,调取的是getter 函数,依赖于所绑定的msg 这个值,并随之发生变化。

在计算属性中设置set, 调用setter 函数,
。
此时this.changesmsg会发生改变,然后触发setter函数,设置this.msg, 最终this.changesmsg 的值是uwuw。
如果一个变量依赖于两个变量的,比如是两个变量的和,适用于这种方法。
computed必须在实例范围内。
vue中setter与getter 是想数据的双向绑定。
二、watch
vue 通过watch选项提供了一个更通用的方法,来响应数据的变化。一般数据变化是执行异步或开销较大的时候,比较适合。

三、methods
在vue中,还有methods这个方法,里面一边装着vue中需要调用的一些方法,这也可以改变数据,不过相比computed 开销较大,每次改变都需要调用。
PS : 最后说一点,在vue中,var vm = new Vue({}) ,其中vm是局部变量 ,需要在控制台打印的话 需要

Vue中的计算属性和监听器(computed 与 watch)的更多相关文章
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中的计算属性与$watch
计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
- Vue中的计算属性
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函 ...
- 简述Vue中的计算属性
1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...
- vue中的计算属性中的坑,
new Vue({ el: '#app', data: { msg:'121', val: '', }, computed:{ val:function(){ return 3; } }, }); 这 ...
- Vue.js-05:第五章 - 计算属性与监听器
一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
随机推荐
- (12)ubunto 快捷键
-----------------------------------------------------vi快捷键------------------------------------ 指令模式: ...
- go语言:函数参数传递详解
参数传递是指在程序的传递过程中,实际参数就会将参数值传递给相应的形式参数,然后在函数中实现对数据处理和返回的过程.比较常见的参数传递有:值传递,按地址传递参数或者按数组传递参数. 1.常规传递 使用普 ...
- Android 学习之路和App开发框架
学习之路: 1. http://www.stormzhang.com/android/2014/07/07/learn-android-from-rookie/ 框架: 2. https://gith ...
- 为什么硬盘明明还有空间,linux却说硬盘空间不足?inode;mkdir: 无法创建目录"shen1": 设备上没有空间
现象:df -h显示硬盘还有14G空间,但是touch file/mkdir directory都失败,提示硬盘没有空间 原因:df -ia查看下inode的使用情况,发现已经爆了,(下图显示使用88 ...
- DICOM医学图像处理:深入剖析Orthanc的SQLite,了解WADO & RESTful API
背景: 上一篇博文简单翻译了Orthanc官网给出的CodeProject上“利用Orthanc Plugin SDK开发WADO插件”的博文,其中提到了Orthanc从0.8.0版本之后支持快速查询 ...
- Android Developer:Allocation Tracker演示
这个演示展示了Allocation Tracker工具在Android Studio中的基本使用方法和流程. Allocation Tracker记录了一个app的内存分配,列出全部分配对象,用于分析 ...
- Android实战简易教程-第二十三枪(基于Baas的用户注冊和登录模块实现!)
接着上两篇文章.我们基于Bmob提供的API实现用户登录功能.总体看一下代码. 1.注冊页面xml: <RelativeLayout xmlns:android="http://sch ...
- hibernate5(10)注解映射[2]一对多单向关联
在上一篇文章里.我们从端方向一端建立关联关系,完毕了从文章到作者的关联关系建立.但在实际的博客站点中,用户肯定还须要获取自己所写的文章,这时能够建立用户(一)对文章(多)的单向关联映射. 先来看我们的 ...
- .Net 平台WebService的创建、部署和使用介绍
.NET平台内建了对Web Service的支持,包括Web Service的构建和使用.与其它开发平台不同,使用.NET平台,你不需要其他的工具或者SDK就可以完成Web Service的开发了.. ...
- java基础&&高薪面试
董鹏老师 ,多年经验总结出 [高薪就业必备]之java基础面试题[更新中]: 第01篇 学习Java基础的目的? 第02天 java语言中有没有gotoke ...