computed可定义一些函数,这些函数叫做【计算属性】
只要data里面的数据发生变化computed会同步改变
引用【计算属性】时不要加  () ,应当普通属性使用
例:console.log(this.computedName)
 
computed用的最多是在模板
模版中放入太多声明式逻辑会让模板臃肿尤其在页面大量使用复杂的逻辑表达式处理数据,
会对页面的可维护性造成很大的影响,而 computed 的设计初衷也正是用于解决此类问题。
例:<p>{{'名称:' + this.name + ',年龄:' + this.age + ',性别:' + (this.info.sex ? '男' : '女')}}</p>
 
尽量一张图解释清楚(尝试用圈圈区分关系):

ps:图片不清晰的尝试新窗口打开

 
一般都只用 getter ,以上内容就是 getter 的默认模式
很少用到 setter ,起码我做业务暂时没遇到,面试倒会有人会问
下面举个例子说说 setter
 
 
 
很多时候都会拿 Computed 与 Watch 对比(比如面试会问)
这两个都可以实现相同效果但过程有点不一样可以根据实际情况来用。

Computed特点:
需要主动调用,具有缓存能力只有数据再次改变才会重新渲染,
否则就会直接拿取缓存中的数据。

Watch特点:
无论在哪只要被绑定数据发生变化Watch就会响应,
这个特点很适合在异步操作时用上。

 
 
 

vue的computed计算属性的更多相关文章

  1. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  2. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  3. Vue中computed计算属性

    话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...

  4. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  5. Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...

  6. vue中computed计算属性与methods对象中的this指针

    this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...

  7. 小白学习vue第三天,从入门到精通(computed计算属性)

    computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...

  8. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  9. Vue(七):computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

随机推荐

  1. 康耐视软件VisionPro-max-u与VisionPro-plus-u的区别

    康耐视软件VisionPro-max-u与VisionPro-plus-u的区别 1.VisionPro-plus-u为基础版可以直接运用该软件包的算法,拖拽式的窗口程序 2.VisionPro-ma ...

  2. 数据结构与算法 python课后题(未完成)

    挖一个坑,先立个flag,后面慢慢填坑. 先放个其它人写的链接

  3. commonhelper 通用类:计时器、数组去重、自动生成日志编号、生成随机数、处理字符串

    using System;using System.Collections.Generic;using System.Diagnostics;using System.Text; namespace ...

  4. python-django-fastdfs+Nginx的安装和配置_20191122

    python-django-fastdfs+Nginx的安装和配置 FastDFS文件系统 FastDFS文件系统简介: 是c语言编写的,是淘宝的架构师写的,存储淘宝的图片,后来开源了, fastDF ...

  5. java基础之异常 · fossi

    在开发中,异常处理是一个不可绕开的话题,我们对于异常的处理已经非常熟练了,对于异常本身的概念.用法等不再赘述了,直接结合面试问题来加深对异常的理解吧. Throwable 可以用来表示任何可以作为异常 ...

  6. 最优化算法——常见优化算法分类及总结

    之前做特征选择,实现过基于群智能算法进行最优化的搜索,看过一些群智能优化算法的论文,在此做一下总结. 在生活或者工作中存在各种各样的最优化问题,比如每个企业和个人都要考虑的一个问题"在一定成 ...

  7. php--小数点问题

    1.用round去小数点后两位时,有时候会出现很长的小数解决方法 sprintf("%.2f",round($total_fee,2)); 使用sprintf再截取一遍.出现变态小 ...

  8. 正负小数js正则表达式

    var reg = /^(([1-9]\d+(.[0-9]{1,4})?|\d(.[0-9]{1,4})?)|([-]([1-9]\d+(.[0-9]{1,4})?|\d(.[0-9]{1,4})?) ...

  9. mybatis 添加后获得该新增数据自动生成的 id

    // useGeneratedKeys默认值为false,keyProperty的值对应的是User类中的主键字段名 // mybatis 写法如下 <insert id="inser ...

  10. Python不使用元类创建缓存实例

    问题 当创建类实例时我们想返回一个缓存引用,让其指向上一个用同样参数(如果有的话)创建出来的类实例. 这个问题常常出现在当我们想确保针对一组输入参数只会有一个类实例存在时. 解决方法: 使用一个与类本 ...