温故vue对vue计算属性computed的分析
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的分析的更多相关文章
- Vue教程:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别
一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- vue监听器watch & 计算属性computed
侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...
- VUE学习之计算属性computed
计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...
- Vue学习3:计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
随机推荐
- 然之协同系统6.4.1 SQL注入导致getshell
前言 先知上一个大佬挖的洞,也有了简单的分析 https://xianzhi.aliyun.com/forum/topic/2135 我自己复现分析过程,漏洞的原理比较简单,但是漏洞的利用方式对我而 ...
- Unity射线
//射线原点 [SerializField] Transform tr; //射线长度 [SerializField] float dis = 5; //射线停留时间 [SerializFiel ...
- restful知识点之三restframework认证-->权限-->频率
认证.权限.频率是层层递进的关系 权限业务时认证+权限 频率业务时:认证+权限+频率 局部认证方式 from django.conf.urls import url,include from djan ...
- SCOM中的通配符
通配符模式匹配按从左到右的方式完成,一次匹配一个字符或基本通配符模式.模式和传入字符串必须完全匹配,因此,举例来说,模式“abc”与字符串“abcd”不匹配.复合模式包含由 (&) 号或波形符 ...
- Python学习---Model拾遗[1]180318
Model: 强大的数据库操作,弱小的数据验证 Form: 强大的数据验证 ModelForm: 强大的数据验证 + 弱小的数据库操作 Model拾遗 Model基本操作 1. 创建数据库表2. 修 ...
- HTML学习---基础知识学习
1.1. HTML 1.为什么要有HTML? "Hello" "<h1>Hello</h1>" - 浏览器渲染时使用一套HTML规则, ...
- 乘风破浪:LeetCode真题_014_Longest Common Prefix
乘风破浪:LeetCode真题_014_Longest Common Prefix 一.前言 如何输出最长的共同前缀呢,在给定的字符串中,我们可以通过笨办法去遍历,直到其中某一个字符不相等了,这样就得 ...
- 英语零散笔记Note整理
无意之间整理电脑发现还存放着以前自己看视频做的一些笔记,关于新概念英语的笔记,觉得不错,放于博客,以供学习. English Note1 定语从句 将不重要的动作放在定语从句中,重要的放在主干中. 倒 ...
- August 16th 2017 Week 33rd Wednesday
A man can be destroyed but not defeated. 一个人可以被毁灭,但不能被打败. Before he was destroyed, he would have bee ...
- TCP/IP 协议图--TCP/IP 基础
1. TCP/IP 的具体含义 从字面意义上讲,有人可能会认为 TCP/IP 是指 TCP 和 IP 两种协议.实际生活当中有时也确实就是指这两种协议.然而在很多情况下,它只是利用 IP 进行通信时所 ...