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)的更多相关文章

  1. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue中的计算属性与$watch

    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...

  3. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  4. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

  5. Vue中的计算属性

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函 ...

  6. 简述Vue中的计算属性

    1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...

  7. vue中的计算属性中的坑,

    new Vue({ el: '#app', data: { msg:'121', val: '', }, computed:{ val:function(){ return 3; } }, }); 这 ...

  8. Vue.js-05:第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  9. Vue - 在v-repeat中使用计算属性

    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...

随机推荐

  1. formValidator阻止提交跳转

    formValidator这个前台校验插件非常好用,其中有几个很有特点的方法可以单独提出使用,效果非常棒这里要说的是其核心方法之一,阻止提交动作,先校验,校验成功再执行提交动作 $("#ph ...

  2. ubuntu系统克隆

    使用clonezilla,原文地址:http://www.linuxidc.com/Linux/2014-09/107117.htm 类似的一篇:http://storysky.blog.51cto. ...

  3. react-redux的connect()方法

    容器组件使用 connect() 方法连接 Redux 我们用 react-redux 提供的 connect() 方法将“笨拙”的 Counter 转化成容器组件.connect() 允许你从 Re ...

  4. Odoo HRMS应用简介

    Odoo HRMS包含行政管理的大部分功能,包含 部门组织架构 员工清册 岗位规划以及招聘管理 用工合同 考勤管理 休假和加班 费用报销 员工考核 绩效.激励.培训成绩 薪资清册     个角色 角色 ...

  5. Android 学习之逐帧动画(Frame)

    帧动画就是将一些列图片.依次播放. 利用肉眼的"视觉暂留"的原理,给用户的感觉是动画的错觉,逐帧动画的原理和早期的电影原理是一样的. a:须要定义逐帧动画,能够通过代码定义.也能够 ...

  6. 每天进步一点点——Linux中的线程局部存储(二)

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/26876231     在Linux中另一种更为高效的线程局部存储方法,就是使用keyword ...

  7. Cent OS下发送邮件

    首先安装发送邮件的服务: yum install -y sendmail 安装完成之后在安装mutt yum install -y mutt 安装完成之后我们就可以发送邮件了 mutt     tes ...

  8. LeetCode -- 反转英文单词

    问题:给定英文句子.反转里面的每一个单词.比如"the sky is blue" 反转后为 "blue is the sky" 实现思路:对英文句子每一个字符做 ...

  9. HDMI速率计算

    我们在采集HDMI口的数据时,首先肯定要计算它的速率是多少.怎么计算这个速率,本文要跟大家分享的便是这个事情. HDMI口有三个TM-DS(Time Minimized Differential Si ...

  10. mysql 找出外键等约束

    找出employee表的所有外键约束 select TABLE_NAME,COLUMN_NAME,CONSTRAINT_NAME, REFERENCED_TABLE_NAME,REFERENCED_C ...