Vue.js中计算属性和方法的区别

在vue.js中,计算属性和方法达到的效果是一样的,但是计算属性是基于依赖进行缓存的,只有message发生改变才会导致reverseMessage发生改变,只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数;而方法是每次调用都会执行。

计算属性:

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
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('')
        }
    }
})
</script>

方法:

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Method reversed message: "{{ reversedMessage() }}"</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    methods: {
        reversedMessage: function () {
            return this.message.split('').reverse().join('')
        }
    }
})
</script>

需要注意的是,因为 Date.now() 不是响应式依赖,所以

computed: {
    now: function () {
        return Date.now()
    }
}
不会更新。必须用methods:
methods: {
    now: function () {
        return Date.now()
    }
}

转自博客:https://blog.csdn.net/BigFish123456789/article/details/77941540

猜你喜欢

转载自blog.csdn.net/a3060858469/article/details/80041203
今日推荐