Vue.js中 computed 和 methods 的区别

TwIStOy 发布于2019-08-02 14:06 / 2181人阅读

摘要：官方文档中已经有对其的解释了，在这里把我的理解记录一下。的使用场景模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。只在相关依赖发生改变时它们才会重新求值。

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

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

computed 和 methods 不可以重名

Vue会把 methods 和 data 里的东西，全部代理到Vue生成的对象中，这会将computed中重名属性覆盖

GPU云服务器云服务器中SP与DP的区别宽带和专线的区别专线和宽带的区别空间和域名的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53570.html

Vue.js中 computed 和 methods 的区别

摘要：官方文档中已经有对其的解释了，在这里把我的理解记录一下。的使用场景模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。只在相关依赖发生改变时它们才会重新求值。官方文档中已经有对其的解释了，在这里把我的理解记录一下。 computed 的使用场景 HTML模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。比如这...

Raaabbit 2019-08-23 14:46 评论0 收藏0
[Vue.js进阶]从源码角度剖析计算属性的原理

摘要：前言最近在学习计算属性的源码，发现和普通的响应式变量内部的实现还有一些不同，特地写了这篇博客，记录下自己学习的成果文中的源码截图只保留核心逻辑完整源码地址可能需要了解一些响应式的原理版本计算属性的概念一般的计算属性值是一个函数，这个函数showImg(https://user-gold-cdn.xitu.io/2019/5/6/16a8b98f1361f6f6); 前言最近在学习Vue计...

melody_lql 2019-05-23 17:30 评论0 收藏0
Vue.js起手式+Vue小作品实战

摘要：本文是小羊根据文档进行解读的第一篇文章，主要内容涵盖的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用在最后，我参考上的一篇技博，对进行初入的本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代...

CompileYouth 2019-08-21 11:18 评论0 收藏0
Vue.js起手式+Vue小作品实战

摘要：本文是小羊根据文档进行解读的第一篇文章，主要内容涵盖的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用在最后，我参考上的一篇技博，对进行初入的本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代...

付伦 2019-08-01 16:07 评论0 收藏0
vue面试

摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。路由的钩子函数首页可以控制导航跳转，，等，一般用于页面的修改。谈谈你对MVVM开发模式的理解 MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；...

vspiders 2019-08-23 18:38 评论0 收藏0