Vue.js中 computed 和 methods 的区别

待我称王封你为后i 2022-03-26 15:14 327阅读 0赞

> [官方文档][Link 1]中已经有对其的解释了，在这里把我的理解记录一下 [Vue中的methods、watch、computed][Vue_methods_watch_computed]

# `computed` 的使用场景 #

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

<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不是 ##

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

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

\`\`\` <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中重名属性覆盖

来源：[https://segmentfault.com/a/1190000017920016][https_segmentfault.com_a_1190000017920016]

[Link 1]: https://cn.vuejs.org/v2/guide/computed.html
[Vue_methods_watch_computed]: http://www.jqhtml.com/20017.html
[https_segmentfault.com_a_1190000017920016]: https://segmentfault.com/a/1190000017920016