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. Vue开发之路由进阶

    1.路由组件传参 在一个页面中,需要根据路由获得参数,然后在页面进行逻辑处理,可以通过$route来获取相关参数 但是这样一来,页面组件与路由耦合太高,为了解耦,页面组件可以在更大程度上进行复用,可以 ...

  2. awk理论详解、实战

    答疑解惑: 为什么用awk取IP的时候用$4? ifconfig eth0 | awk -F '[ :]+' 'NR==2{print $4}' IP第二行内容如下: inet addr:10.0.0 ...

  3. CDOJ_24 八球胜负

    8球是一种台球竞赛的规则.台面上有7个红球.7个黄球以及一个黑球,当然还有一个白球.对于本题,我们使用如下的简化规则:红.黄两名选手轮 流用白球击打各自颜色的球,如果将该颜色的7个球全部打进,则这名选 ...

  4. BZOJ题目(持续更新)

    bzoj1009:kmp想法+递推+矩阵快速幂.很好的想法,考虑用长串去kmp匹配短串,dp[i][j]表示匹配指针分别指在i.j位置时候,前i位母字符串一共有多少种可能性,那么dp[i][j]=Σd ...

  5. Concurrency and Application Design (一)

    在计算机发展的早期,单位工作时间的最高限额是一台计算机可以执行通过CPU的时钟速度确定.但是,随着技术的进步和处理器设计变得更紧凑,热等物理约束开始限制处理器的最高时钟速度.因此,芯片制造商寻找其它的 ...

  6. Android handler 内存泄露分析及解决方法

    1. 什么是内存泄露? Java使用有向图机制,通过GC自动检查内存中的对象(什么时候检查由虚拟机决定),如果GC发现一个或一组对象为不可到达状态,则将该对象从内存中回收.也就是说,一个对象不被任何引 ...

  7. 【java】httpclient的使用之java代码内发送http请求

    场景: 需要本项目发送HTTP请求到另一个项目中,处理完成返回值给本项目. 1.本项目引入架包 <!-- httpclient 后台发送http请求--> <dependency&g ...

  8. 【转载】Java NIO学习

    这篇文章介绍了NIO的基本概念: http://www.iteye.com/magazines/132-Java-NIO Java NIO提供了与标准IO不同的IO工作方式: Channels and ...

  9. LeetCode 205 Isomorphic Strings(同构的字符串)(string、vector、map)(*)

    翻译 给定两个字符串s和t,决定它们是否是同构的. 假设s中的元素被替换能够得到t,那么称这两个字符串是同构的. 在用一个字符串的元素替换还有一个字符串的元素的过程中.所有字符的顺序必须保留. 没有两 ...

  10. java性能监控工具jcmd-windows

    jcmd Sends diagnostic command requests to a running Java Virtual Machine (JVM). Synopsis jcmd [-l|-h ...