怎样理解 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中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
随机推荐
- jquery+ajax 实现搜索框提示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PHP ajax 实现三级联动
在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: $(document).ready(function(e) { $("#sanji&qu ...
- tkinter入门-布局方式pack(), grid(), place()
pack 转载于https://www.cnblogs.com/kongzhagen/p/6144588.html\ 1. 使用pack函数的时候,默认先使用放到上面的,然后依次从上向下排 2. 可接 ...
- 性能优化 | JVM与性能优化知识点综合整理
JVM JVM是java的核心和基础,在java编译器和os平台之间的虚拟处理器.它是一种利用软件方法实现的抽象的计算机基于下层的操作系统和硬件平台,可以在上面执行java的字节码程序. java编译 ...
- SQL-W3School-基础：SQL 教程
ylbtech-SQL-W3School-基础:SQL 教程 1.返回顶部 1. SQL 是用于访问和处理数据库的标准的计算机语言. 在本教程中,您将学到如何使用 SQL 访问和处理数据系统中的数据, ...
- 使用Jsp/Js/Ajax/Json/Jquery/Easyui + Servlet + JDBC + Lucene/Mysql/Oracle完成数据库分页
package loaderman.action; import java.io.IOException; import java.io.PrintWriter; import java.util.L ...
- [jquery]JSON.parse()与JSON.stringify()
JSON.parse()[从一个字符串中解析出json对象] 例子: //定义一个字符串 var data='{"name":"goatling"}' //解析 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-3.微信网站扫码支付介绍
笔记 3.微信网站扫码支付介绍 简介:讲解微信网页扫码支付 1.扫码支付文档:https://pay.weixin.qq.com/wiki/doc/api/native.php ...
- Delphi动态事件深入分析
[delphi] view plain copy print? 首先做一个窗体如下 然后单元中如下代码: 在implementation下面声明两个方法如下: //外部方法,只声明一个参数,此时按 ...
- python基础知识（字典）
创建字典 变量名 = {key:value,.....} zip() 转换为zip对象 空字典 变量名 = {} 变量名 = dict(key = value,....) 创建只有键的字典 fr ...