摘要:官方文档中已经有对其的解释了,在这里把我的理解记录一下。的使用场景模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护,都应当把相关逻辑放入计算属性。只在相关依赖发生改变时它们才会重新求值。
官方文档中已经有对其的解释了,在这里把我的理解记录一下。computed 的使用场景
HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护,都应当把相关逻辑放入计算属性。
比如这种
Reversed message: "{{ message.split("").reverse().join("") }}"
在这个地方,模板不再是简单的声明式逻辑。这里是想要显示变量 message 的翻转字符串,而这种包含复杂逻辑处理的表达式,都应当使用计算属性。
computed 和 methods 的区别 1. computed是属性调用,而methods是函数调用这意味着在HTML的插值里
computed定义的方法是以属性访问的形式来调用,如 {{reversedMessageComputed}}
methods定义的方法,则要加上 () 来调用,如 {{reversedNameMethod()}} ,否则视图中会渲染出如下内容
function () { [native code] }
2. computed带有缓存功能,而methods不是这里我引用一下官方文档的说明
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
Reversed message: "{{ reversedNameMethod() }}"
Reversed message: "{{ reversedMessageComputed }}"
// 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 和 methods 不可以重名
Vue会把 methods 和 data 里的东西,全部代理到Vue生成的对象中,这会将computed中重名属性覆盖
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101117.html
摘要:官方文档中已经有对其的解释了,在这里把我的理解记录一下。的使用场景模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护,都应当把相关逻辑放入计算属性。只在相关依赖发生改变时它们才会重新求值。 官方文档中已经有对其的解释了,在这里把我的理解记录一下。 computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护,都应当把相关逻辑放入计算属性。 比如这...
摘要:前言最近在学习计算属性的源码,发现和普通的响应式变量内部的实现还有一些不同,特地写了这篇博客,记录下自己学习的成果文中的源码截图只保留核心逻辑完整源码地址可能需要了解一些响应式的原理版本计算属性的概念一般的计算属性值是一个函数,这个函数showImg(https://user-gold-cdn.xitu.io/2019/5/6/16a8b98f1361f6f6); 前言 最近在学习Vue计...
摘要:本文是小羊根据文档进行解读的第一篇文章,主要内容涵盖的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑的代码以供练习和测试之用在最后,我参考上的一篇技博,对进行初入的 本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代...
摘要:本文是小羊根据文档进行解读的第一篇文章,主要内容涵盖的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑的代码以供练习和测试之用在最后,我参考上的一篇技博,对进行初入的 本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代...
阅读 1321·2021-10-08 10:05
阅读 3021·2021-09-26 10:10
阅读 854·2019-08-30 15:55
阅读 469·2019-08-26 11:51
阅读 371·2019-08-23 18:10
阅读 3752·2019-08-23 15:39
阅读 615·2019-08-23 14:50
阅读 726·2019-08-23 14:46