Vue.js中 computed 和 methods 的区别
官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods、watch、computed
computed
的使用场景
HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护,都应当把相关逻辑放入计算属性。
比如这种
```<div id="root"> <p>Reversed message: "{{ message.split('').reverse().join('') }}"</p> </div> ```
在这个地方,模板不再是简单的声明式逻辑。这里是想要显示变量 message
的翻转字符串,而这种包含复杂逻辑处理的表达式,都应当使用计算属性。
computed
和 methods
的区别
1. computed是属性调用,而methods是函数调用
这意味着在HTML的插值
里
- computed定义的方法是以属性访问的形式来调用,如
{{reversedMessageComputed}}
- methods定义的方法,则要加上
()
来调用,如{{reversedNameMethod()}}
,否则视图中会渲染出如下内容 function () { [native code] }
2. computed带有缓存功能,而methods不是
这里我引用一下官方文档的说明
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
<!-- html --> <div id="root"> <p>Reversed message: "{{ reversedNameMethod() }}"</p> <p>Reversed message: "{{ reversedMessageComputed }}"</p> </div>
// javascript
var vm = new Vue({el: '#root',data: {name: 'Alex',message: 'Hello'},methods: {reversedNameMethod: function () {return this.name.split('').reverse().join('')}},computed: {// 计算属性的 getterreversedMessageComputed: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}
})
上面的例子中,缓存意味着只要 message
还没有发生改变,多次访问 reversedMessageComputed
计算属性会立即返回之前的计算结果,而不必再次执行函数。而 reversedNameMethod()
方法,每次调用都会重新执行函数。
但同时需要注意,这也同样意味着下面的计算属性将不再更新,因为 Date.now()
不是响应式依赖:
// javascript
computed: {now: function () {return Date.now()}
}
now
的值将在Vue实例化时生成,并且不再改变。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
computed其他说明
computed
和methods
不可以重名- Vue会把
methods
和data
里的东西,全部代理到Vue生成的对象中,这会将computed中重名属性覆盖
- Vue会把
来源:https://segmentfault.com/a/1190000017920016
转载于:https://www.cnblogs.com/lalalagq/p/10283157.html
Vue.js中 computed 和 methods 的区别相关推荐
- vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想 在Vue的 ...
- Vue 中 computed vs methods的区别
computed:计算属性 methods:方法 watch:侦听器 computed与methodes区别 1.computed是响应式的,methods并非响应式. 2.调用方式不一样,compu ...
- Vue中computed和methods的区别
为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重 ...
- computed用发_Vue.js中computed使用详解
这次给大家带来Vue.js中computed使用详解,Vue.js中computed使用的注意事项有哪些,下面就是实战案例,一起来看一下. JS属性: JavaScript有一个特性是Object.d ...
- vue中的属性方法computed与methods的区别
一.computed与methods的区别: 1.实质上computed计算属性中定义的是属性而不是函数,所以使用时直接用{{xxx}},而不要使用{{xxx()}}:--后面详细说明 而method ...
- php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- html5怎么改为vue_是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型...
点击上方"前端印象",选择"设为星标"第一时间关注技术干货! 引言 要理解本篇文章,必须具备JavaScript中基本数据类型和引用数据类型的概念,大家可以花两 ...
- Vue.js中的v-model指令(双向绑定)
Vue.js中v-model的作用 v-model的作用和使用场景 1.v-model的作用--双向绑定 2.v-model双向绑定的使用场景--表单 3.总结 v-model的作用和使用场景 你好! ...
最新文章
- 检验xpath的小妙招
- 日期格式校验方法工具
- 【JAVA多线程学习笔记】(1)实现线程的方式 线程生命周期 操作线程的方法
- php用switch编写车费的输出,PHP Switch语句在实际代码中的应用
- 电源模块的安全设计和热设计
- eclipse警告与报错的修复
- MyBatis-Plus_实体作为条件构造器构造方法的参数
- es6 next()方法的参数
- warning LNK4098: defaultlib MSVCRT conflicts with use of other libs; use /NODE
- 经典机器学习系列(十三)【结构化学习】
- EventBus (一) 使用详解——初步使用EventBus
- 第四部分 在configure.in中使用宏来检测
- 【教程】Android系统手机 菜鸟扫盲汇总
- 美著名电话飞客去世 可凭口哨打免费电话(图)
- 程序员英文简历范例(Java, Python)
- linux修改挂载文件系统权限,Linux配置启动挂载:fstab文件详解
- 服务器系统要用GUID还是MBR,分享win10分区格式MBR和GUID有什么区别 教你区分MBR和GUID格式...
- java程序员表白代码_程序员表白代码,用过的人都找到了对象...
- 考出面试者基本功的 10 个简单编程题
- 基于Transformer的时空融合网络地铁客流预测模型