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> ...
随机推荐
- SqlServer无备份下误删数据恢复
系统已上线,给客户修改bug的时候,使用delete语句删表数据,没想到库没切换成测试库.误删了正式库的数据,而且一次备份都没有做过,玩大了 不扯了,进入主题 网上很多方法,都是针对至少有一次备份的情 ...
- bash: lspci: command not found解决方法
在CentOS虚拟机使得lspci查看硬件信息.使用时,提示bash: lspci: command not found,大多使用/sbin/lspci即可,我发现我的系统中/sbin下也没有.使用y ...
- robotFramework第二篇之关键字的定义和使用
lesson.robot *** Keywords *** 打开谷歌浏览器并访问百度首页 Log 打开浏览器,输入http://www.baidu.com,进入百度首页 输入用户名 [Argument ...
- 网络浅析(<<网络是怎么连接的>> 总结)
概要 基本概念 网线 集线器 交换机 路由器 路由器和交换机 路由器和集线器 接入网 IP DNS 以太网 协议栈 网络连接过程 通信过程(浏览器 -> 服务器) 客户端和服务端 服务端的套接字 ...
- 用addRoutes实现动态路由
原文转自前端路上,转载请注明出处. 之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路,因为不喜欢在每次路由跳转的before钩子里做判断,所以在初始化Vue实例前对路由做了筛选,再用实 ...
- java 向上向下取整
Math.floor(1.4)=1.0 Math.round(1.4)=1 Math.ceil(1.4)=2.0 Math.floor(1.5)=1.0 Math.round(1.5)=2 Math. ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
- 使用.net core构建分布式SAAS系统(目录)
一 前言 二 项目背景 三 项目架构-从单体应用到微服务 四 大数据量下的分库分表 五 缓存处理--进程内缓存与Redis的使用 六 使用MNS队列来流量削峰 七 百万Job的任务调度系统 八 每天1 ...
- [Alpha阶段]测试报告
[Alpha]阶段测试报告 在测试过程中发现的BUG 在最后的测试阶段中,我们不可避免的遇到了各种各样的BUG.虽然大多数都不是严重的BUG,但是这些细枝末节的问题的堆积,依然会很大程度上降低用户 ...
- 关于 sip
1.html页面 添加拨打按键 拨打按键 下面 添加 音频流/视频流 2 引入 sip.js 和 **.js **.js页面 获取各个元素 创建 simple实例 3. addEventL ...