Vue.js中computed和methods之间有什么不同？（附示例）

本篇文章给大家带来的内容是关于Vue.js中computed和methods之间有什么不同？（附示例），有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

官方文档中已经有对其的说明了，在这里把我的懂得记载一下。

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.js中computed和methods之间有什么不同？（附示例）的具体内容，更多请关注百分百源码网其它相关文章！