Vue.js中 computed 和 methods 的区别
栏目: JavaScript · 发布时间: 5年前
内容简介:在这个地方,模板不再是简单的声明式逻辑。这里是想要显示变量这意味着在HTML的
官方文档 中已经有对其的解释了,在这里把我的理解记录一下。
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: { // 计算属性的 getter reversedMessageComputed: 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会把
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大数据时代小数据分析
屈泽中 / 电子工业出版社 / 2015-7-1 / 69.00元
《大数据时代小数据分析》是一本大数据时代下进行小数据分析的入门级教材,通过数据分析的知识点,将各类分析工具进行串联和对比,例如:在进行线性规划的时候可以选择使用Excel或LINGO或Crystal Ball。工具的应用难易结合,让读者循序渐进地学习相关工具。JMP和Mintab用来分析数据,分析的结果使用Excel、LINGO、Crystal Ball来建立数据模型,最后使用Xcelsius来动......一起来看看 《大数据时代小数据分析》 这本书的介绍吧!