Vue.js中 computed 和 methods 的区别

栏目: JavaScript · 发布时间: 5年前

内容简介:在这个地方,模板不再是简单的声明式逻辑。这里是想要显示变量这意味着在HTML的

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

computed 的使用场景

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

    • 比如这种

      <div id="root">
              <p>Reversed message: "{{ message.split('').reverse().join('') }}"</p>
          </div>

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

computedmethods 的区别

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其他说明

  • computedmethods 不可以重名

    • Vue会把 methodsdata 里的东西,全部代理到Vue生成的对象中,这会将computed中重名属性覆盖

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大数据时代小数据分析

大数据时代小数据分析

屈泽中 / 电子工业出版社 / 2015-7-1 / 69.00元

《大数据时代小数据分析》是一本大数据时代下进行小数据分析的入门级教材,通过数据分析的知识点,将各类分析工具进行串联和对比,例如:在进行线性规划的时候可以选择使用Excel或LINGO或Crystal Ball。工具的应用难易结合,让读者循序渐进地学习相关工具。JMP和Mintab用来分析数据,分析的结果使用Excel、LINGO、Crystal Ball来建立数据模型,最后使用Xcelsius来动......一起来看看 《大数据时代小数据分析》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具