Vue.js中计算和方法之间的区别是什么

　　介绍

这篇文章主要介绍Vue。js中计算和方法之间的区别是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

官方文档中已经有对其的解释了,在这里把我的理解记录一下。

<>强计算的使用场景

HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护,都应当把相关逻辑放入计算属性。

比如这种

& lt; div id=皉oot"比; 　　& lt; p>扭转信息:“{{message.split (& # 39; & # 39;) .reverse () . join (& # 39; & # 39;)}}“& lt;/p> 　　& lt;/div>

在这个地方,模板不再是简单的声明式逻辑。这里是想要显示变量信息的翻转字符串,而这种包含复杂逻辑处理的表达式,都应当使用计算属性。

<>强和计算方法的区别

1。计算是属性调用,而方法是函数调用

这意味着在HTML的插值里

计算定义的方法是以属性访问的形式来调用,如{{reversedMessageComputed}}

方法定义的方法,则要加上()来调用,如{{reversedNameMethod()}},否则视图中会渲染出如下内容

函数(){}(本机代码)

2。方法计算带有缓存功能,而不是

这里我引用一下官方文档的说明

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

& lt; !——html比; 　　& lt; div id=皉oot"祝辞 　　& lt; p>扭转信息:“{{reversedNameMethod ()}}“& lt;/p> 　　& lt; p>扭转信息:“{{reversedMessageComputed}}“& lt;/p> 　　& lt;/div> //javascript 　　var vm=new Vue ({ 　　艾尔:& # 39;#根# 39; 　　数据:{ 　　名称:& # 39;亚历克斯# 39; 　　信息:& # 39;你好# 39; 　　}, 　　方法:{ 　　reversedNameMethod:函数(){ 　　返回this.name.split (& # 39; & # 39;) .reverse () . join () & # 39; & # 39; 　　} 　　}, 　　计算:{//计算属性的getter 　　reversedMessageComputed:函数(){//罢狻敝赶蛐槟饣道? 　　返回this.message.split (& # 39; & # 39;) .reverse () . join () & # 39; & # 39; 　　} 　　} 　　})

上面的例子中,缓存意味着只要消息还没有发生改变,多次访问reversedMessageComputed计算属性会立即返回之前的计算结果,而不必再次执行函数。而reversedNameMethod()方法,每次调用都会重新执行函数。

但同时需要注意,这也同样意味着下面的计算属性将不再更新,因为Date.now()不是响应式依赖:

//javascript 　　计算:{ 　　现在:函数(){ 　　返回Date.now () 　　} 　　现在}

的值将在Vue实例化时生成,并且不再改变。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

计算其他说明

计算和方法不可以重名

Vue会把方法和数据里的东西,全部代理到Vue生成的对象中,这会将计算中重名属性覆盖

以上是Vue.js中计算和方法之间的区别是什么的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

Vue.js中计算和方法之间的区别是什么