Vue computed()函数的用法

Vue computed() 函数主要用于创建依赖于其他状态的计算属性。

computed() 函数接收一个 getter 函数，并为 getter 返回的值返回一个不可变的响应式对象。

computed() 函数的用法如下。

<div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>反转字符串: {{ reversedMessage }}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const {ref, computed} = Vue;
        const vm = Vue.createApp({
             setup(){
              const message = ref('人世几回伤往事，山形依旧枕寒流');
              const reversedMessage = computed(() =>
                   message.value.split('').reverse().join('')
               );
               return {
                    message,
                    reversedMessage
               }
            }
    }).mount('#app');
</script>

在 Chrome 浏览器中运行程序，结果如下图所示。