Vue.js computed vs Methods

    xiaoxiao2021-03-25  92

    https://cn.vuejs.org/v2/guide/computed.html#计算缓存-vs-Methods

    <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } })

    我们可以使用methods 来完成计算属性需要完成的事,

    // in component methods: { reverseMessage: function () { return this.message.split('').reverse().join('') } }

    最终结果二者是一样的。

    区别:

    官网表明计算属性是基于它的依赖缓存

    计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

    每当重新渲染的时候,method 调用总会执行函数。

    也就是说只要不是直接使用浏览器刷新页面,当我们改变数据、DOM操作等引起页面重新渲染时,

    计算属性会直接使用缓存,不会重新执行函数。适合那些计算量很大且改变频率很低的属性

    如果使用methods,每次页面重新渲染时都会重新执行methods函数。

    一.computed适用于对多数据变动进行监听,然后维护一个状态(返回一个状态)。

    二.watch适用于对一个数据监听,我们也可以通过这些变化去维护一个状态,但不适用于监听一个数据来进行复杂的逻辑操作。

    转载请注明原文地址: https://ju.6miu.com/read-14748.html

    最新回复(0)