怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实并不好. 最理想的情况是: html 只负责展示, 绑定的数据都是 赤裸裸 的 变量, 而非 表达式 , 这样就会比较人性化. 想要达到这种效果可以有两种方法: computed 和 methods.
1. 使用 methods 相当于是为这个 字符串倒序 的功能单独写了一个函数, 这个函数在 Vue 实例对象的 methods 属性中, 我们可以直接在 html 中使用它, 注意这里要带括号: inputValueReverse()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<input type="text" v-model:value="inputValue" />
<span>{{ inputValueReverse() }}</span>
</div>
<script>
var vApp = new Vue({
el: "#app",
data: {
inputValue: ''
},
methods: {
inputValueReverse: function () {
return this.inputValue.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
2. 使用 computed, 其效果跟使用 methods 类似, 只是 作用原理 不同, 计算属性 computed 的执行是 惰性 的, 只有它所 依赖缓存 的变量发生了改变, 它才会重新执行, 这是它和 methods 的本质区别, methods 是只要发生 重新渲染 就会执行, 而 computed 不会. 所以我们可以认为 使用 computed 时性能会更好, 但 使用 methods 会更灵活, 所以具体使用哪一个得视情况而定. 另外需要注意的一点是 使用 computed 时是 不需要加括号 的, 如下所示, 它可以像一般变量一样 赤裸裸 地绑定, 而且性能也好, 可以说是很 nice 了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<input type="text" v-model:value="inputValue" />
<span>{{ inputValueReverse }}</span>
</div>
<script>
var vApp = new Vue({
el: "#app",
data: {
inputValue: ''
},
computed: {
// 计算属性的 getter
inputValueReverse: function () {
return this.inputValue.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
怎样理解 Vue 中的计算属性 computed 和 methods ?的更多相关文章
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中的计算属性与$watch
计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...
- VUE学习之计算属性computed
计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...
- Vue教程：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- vue监听器watch & 计算属性computed
侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...
- [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别
一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...
- Vue中的计算属性和监听器（computed 与 watch）
react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...
- vue计算属性computed和methods的区别
computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
随机推荐
- Zookeeper系列（十）zookeeper的服务端启动详述
作者:leesf 掌控之中,才会成功:掌控之外,注定失败.出处:http://www.cnblogs.com/leesf456/p/6105276.html尊重原创,大家功能学习进步: 一.前 ...
- flask 第九篇 蓝图 Blueprint
蓝图,听起来就是一个很宏伟的东西 在Flask中的蓝图 blueprint 也是非常宏伟的 它的作用就是将 功能 与 主服务 分开怎么理解呢? 比如说,你有一个客户管理系统,最开始的时候,只有一个查看 ...
- 转载 AMI方案和Insyde方案
闲来无事回头看看,自毕业以来一直都在BIOS这个行业打转,目前的各种新闻来看全球的IT行业都似乎不太景气,PC出货量一泻千里,想要有所转机看起来不是一天两天的事情,想来无事来看看做过的几个UEFI B ...
- Java并发包同步工具之Exchanger
前言 承接上文Java并发包同步工具之Phaser,讲述了同步工具Phaser之后,搬家博客到博客园了,接着未完成的Java并发包源码探索,接下来是Java并发包提供的最后一个同步工具Exchange ...
- python小白之list使用笔记
List常见用法 list拆分 I=array([4.,2.]) print(I[:,newaxis])#将原本在一个列表里的两个数拆为两个不同列表里 list合并 法一 运算符重载 num=[1, ...
- js 中 new call apply bind JSON.stringify 的原理以及模拟实现
1.new的原理和实现 它创建了一个全新的对象. 它会被执行 [[Prototype]](也就是 __proto__)链接. 它使 this指向新创建的对象. 通过 new创建的每个对象将最终被 [[ ...
- Kafka消息流处理
- Canal——增量同步MySQL数据到ElasticSearch
1.准备 1.1.组件 JDK:1.8版本及以上: ElasticSearch:6.x版本,目前貌似不支持7.x版本: Kibana:6.x版本: Canal.deployer:1 ...
- linux下后台启动springboot项目（转载）
我们知道启动springboot的项目有三种方式: 运行主方法启动 使用命令 mvn spring-boot:run”在命令行启动该应用 运行“mvn package”进行打包时,会打包成一个可以直接 ...
- 7. grep
grep命令 grep grep是通用正则表达式分析程序(General Regular Expression Parser)的缩写. grep命令可以在它的输入中搜索指定的字符串模式(Pattern ...