vue的计算属性与方法的不同
计算属性
vue的模板里可以使用表达式，但是它的设计初衷是用于简单计算，在模板中放入太多逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
这里很难一眼看出是要显示什么，而且要多次使用的话也很麻烦，因此对于复杂逻辑应使用计算属性
错误示例
```html
Title
{{ message.split('').reverse().join('') }}
<br>
正确写法
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 直接使用方法名就行，不用加括号 -->
<p>{{ reversedMessage }}</p>
</div>
<script>
//建议vue的变量命与作用的标签id一致
let app = new Vue({
el: "#app", //关联dom对象
data: {
message: 'I have a dream' //模板使用的数据
},
//定义计算属性
computed: {
// 在computed里定义方法，使用的时候直接写方法名
reversedMessage: function () {
// `this` 指向 app 实例，data里面的数据可以直接获取到htis.message
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
## 计算属性与方法的不同
上述例子中也可以通过调用方法来达到同样的目的
在组件中定义方法
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
调用方法
<p>Reversed message: "{{ reversedMessage() }}"</p>
就得到的结果而言，两种方式是完全一致的。但是不同的是，计算属性是基于它们的依赖进行缓存的，也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值，对于上述的例子，只要message不发生改变，多次访问reversedMessage计算属性会立即返回结果而不必再次执行函数
下面我们来验证这个结论
```html
Title
使用计算属性
{{reversedMessage}}
<hr>
<p>使用方法</p>
<p>{{reversedMessageMethod()}}</p>
```
打开html，右键检查-console
## 小结
- 模板内表达式包含复杂逻辑时，应使用计算属性
- 只要计算属性使用的数据不发生变化，计算属性就不会执行，而是直接使用缓存
vue的计算属性与方法的不同的更多相关文章
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- vue生命周期以及vue的计算属性
一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- VUE：计算属性和监视
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Maven入门教程（一）
1.Maven的简介 1.1 什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的.Maven是一个项目管理工具,它包含了一个项目对象模型 (Projec ...
- 我的Windows日常——Excel 打开.xls .xlsx 文件格式或文件扩展名无效
就问下各位,这个图,熟不熟?!! 不熟? 好吧当我没问,遇到过的没遇到过的都让我继续写下去吧.... 很多时候,我们新建了一个word文件,但是打开却会弹出这个小窗口,新建的文件出现这个问题,是什么原 ...
- 迁移FRS至DFSR SYSVOL
截至2017年6月20日,Windows 2016 RS1系统为最后一版支持FRS,后续版本将不再包含该功能,详细见 https://support.microsoft.com/en-us/help/ ...
- 记录Javascript的数据方法参考
concat >>连接2个或更多数组,并返回结果 var arr1 = [1,2,3]; var arr2 = [-1,-2,-3]; console.log(arr1.concat(ar ...
- 开发环境---->服务器（数据库迁移Migration）
1.查找服务器环境迁移记录表的最近一次迁移名称 SELECT * FROM __efmigrationshistory; 最后一次:20190225075007_UpdateSocialApplyCo ...
- NOIP 2018 大翻车记
都9102年了我才想起来写游记啊 Day -1 肚子里翻江倒海,一天去了七次厕所.吃了PPA把病压下去.安慰一下自己,说这样会涨人品. Loli讲述学长们的翻车笔记.我大概像是玩笑一样听过去了.(伏笔 ...
- Couchbase入门——环境搭建以及HelloWorld
一.引言 NoSQL(Not Only SQL),火了很久了,一直没空研究.最近手上一个项目对Cache有一定的要求,借此机会对NoSQL入门一下.支持NoSQL的数据库系统有很多, 比如Redis ...
- html与ios交互方法 WebViewJavascriptBridge
WebViewJavascriptBridge 1.html调用ios的方法 <!DOCTYPE html> <html lang="en"> <he ...
- 石家庄地铁系统开发（java web版）（二）
两种方法: 一,自己写数据库,自己写算法实现 二,调用已有软件的API(百度,高德)
- openstack 5大组件之间的关系和基本架构思维导图
云计算是一种按使用量付费的模式,这种模式提供可用的/便捷的/按需的网络访问,进入可配置的计算资源共享池(资源包括网络/服务器/存储/应用软件和服务),这些资源能够被快速提供,只需投入很少的管理工作或与 ...