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. Widows下利用OpenSSL生成证书

    1.下载OpenSSL的windows版本 32位:openssl-1.0.2a-i386-win32.zip 64位:openssl-1.0.2a-x64_86-win64.zip 下载之后解压即可 ...

  2. JS没有contains方法,可以用indexof实现

    我们很多时候会不自觉的在js代码里对一个字符串进行如下操作: str.contains("substr"); 但是js里面没有这个方法去判断字符串str是不是包含substr,而j ...

  3. 记Weblogic采用RAC方式链接数据库遇到的问题

      前几天,去客户现场部署系统,WEBLOGIC连接数据库使用RAC方式连接,好几个人弄了一下午愣是没搞定,总是报SID错误 开始一致认为是防火墙的原因,后来SSH登陆应用服务器后,再TELNET数据 ...

  4. Android 中状态栏、标题栏、View的大小及区分

    1.获得状态栏的高度(状态栏相对Window的位置): Rect frame = new Rect(); getWindow().getDecorView().getWindowVisibleDisp ...

  5. nginx学习(二)——基础概念之异步非阻塞

    上面讲了很多关于nginx的进程模型,接下来,我们来看看nginx是如何处理事件的. 有人可能要问了,nginx采用多worker的方式来处理请求,每个worker里面只有一个主线程,那能够处理的并发 ...

  6. odoo 的时差 坑

    很多人掉进了odoo的时间坑     odoo约定关于日期的数据,存放在数据库时,以 utc0 时区也就是不带时区 存放,应用程序读取日期展示日期时, 转换成用户的时区展示     例如,stock ...

  7. do export method of oracle all database tables with dmp files.

    usually we need to export the database tables to backup and others use. So we must know what to do e ...

  8. 轻松搞定RabbitMQ(五)——路由选择

    转自 http://blog.csdn.net/xiaoxian8023/article/details/48733249 翻译地址:http://www.rabbitmq.com/tutorials ...

  9. Spark SQL之External DataSource外部数据源(二)源代码分析

    上周Spark1.2刚公布,周末在家没事,把这个特性给了解一下,顺便分析下源代码,看一看这个特性是怎样设计及实现的. /** Spark SQL源代码分析系列文章*/ (Ps: External Da ...

  10. oracle基础操作(1)

    以前只是简单用程序操作数据,现在才发现自己没有系统的学习过,所以想在这里记录一下自己在数据库方面遇到的问题,会参考查询网络上一些资料,现在看的是韩顺平oracle视频的笔记: 一.关于oracle系统 ...