vue 复习笔记(1)
一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍

1计算属性computed
在vue的computed中声明的是计算属性,可以使用箭头函数来进行定义。对于任何复杂的逻辑运算都应该使用计算属性。
例子
在vue的date中声明一个变量;
data:{
message:'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
现在我们在computed中声明了reversedMessage,它的值是根据data中的message的值来改变的。当message的值发生改变也会触发reversedMessage的值的变化。

与在表达式中调用的区别
其实在computed中通过表达式书写并调用这个函数会达到一样的效果。但计算属性相对于函数表达式的优点就在于,计算属性是基于两者之间的依赖进行缓存的。只有在依赖发生改变他们才会更新。当message发生改变时reversedMessage才会重新执行函数获得新的值并进行缓存。若message不发生改变的化那么你每次访问reversedMessage都会直接从缓存中取值,并不会在重新计算reversedMessage的值。当一个函数计算量特别大的时候我们就可以使用计算属性。

与侦听属性watch的区别
相对于侦听属性计算属性更加简便。
计算属性的 setter
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。

温故vue对vue计算属性computed的分析的更多相关文章

  1. Vue教程:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  2. [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别

    一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...

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

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

  4. vue监听器watch & 计算属性computed

    侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...

  5. VUE学习之计算属性computed

    计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...

  6. Vue学习3:计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  8. 007——VUE中非常使用的计算属性computed实例

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

  9. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

随机推荐

  1. GDAL线面互转换

    最近因为项目需要,需做GDAL线面互转的功能,查阅部分资料完成,下面把核心部分的代码贴出来,留个记录,也欢迎大家提问题指正完善. /* * @brief ConvertPolygonToPolylin ...

  2. github连接提示

    解决办法: 1,将连接方式从http更换为ssh.注意,github.com后面一定有(冒号): git remote rm origin git remote add origingit@githu ...

  3. JAVA后台框架优化之微服spring boot

    1.为什么要微服? 首先我们目前后台系统业务链目前还是相对不是那么复杂,但随着项目的拆分,业务的快速推进,各项目模块的接口也随之增加,开发的复杂度不断增加,为以后扩展埋下隐患,而规划新的框架目前主要解 ...

  4. linux系统PKWindows系统,从各方便分析linux和Windows的优劣

    服务器系统linux系统和linux系统哪个好用,公说公有理婆说婆有理,今天鼎峰凡凡大概对Linux系统与Windows系统的优缺点PK!可以从以下几个方面来看 ①成本  赞成Linux的声音Linu ...

  5. asp.net生成PDF文件参考 .

    TextSharp 是用来生成  PDF 的一个组件,在 1998 年夏天的时候,Bruno Lowagie ,iText 的创作者,参与了学校的一个项目,当时使用 HTML 来生成报告,但是,使用 ...

  6. webpack笔记一 起步

    webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...

  7. 外网访问用azure虚拟机搭建的网站

    1.Ubuntu+Apache+PHP的环境搭建(此处省去了mysql的步骤) 在azure上搭建上述的开发环境和在本地PC搭建是一样的步骤,具体介绍请参看这里. 2.从外网访问 注意,这一步的前提是 ...

  8. JavaScript 数组遍历方法的对比

    JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 ,,,] , len ...

  9. angularJs的指令系统和双向数据绑定

    一.langularJs的指令系统 <!DOCTYPE HTML> <html ng-app><!--这种以ng开头的就是指令系统,初始化的一个指令,不仅可以加在html ...

  10. 简单理解Socket 重要

    http://www.cnblogs.com/dolphinX/p/3460545.html 题外话 前几天和朋友聊天,朋友问我怎么最近不写博客了,一个是因为最近在忙着公司使用的一些控件的开发,浏览器 ...