Vue3.0 - computed函数

原创已于 2023-03-21 16:30:36 修改 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

以下为本篇文章的主要内容，希望大家多提意见，如果喜欢记得点个推荐哦作者：梦想是咸鱼本文版权归作者和CSDN博客共有，欢迎转载，转载时保留原作者和文章地址即可。

文章标签：

#vue #computed

于 2021-09-10 14:49:21 首次发布

Vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了Vue.js中computed属性的概念，强调了其相对于普通JS函数的性能优势，因为computed属性具有计算缓存。文章通过示例展示了computed属性的基础用法，演示了如何创建一个只读的计算属性。此外，还详细解释了computed属性的set和get方法，通过set方法可以实现对计算属性的修改。示例代码展示了如何在Vue应用中使用这些方法来绑定和更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

computed计算属性，与普通JS函数相比computed性能更好，以为它存在计算缓存，js函数没有，其计算结果是只读的，可通过set方法修改。

computed的基本用法

<body>
    <div id="app">
        <input v-model="firstName" type="number"/>
        <input v-model="lastName" type="number"/>
        <div>{{fullName}}</div>
    </div>
</body>
<script>
    const {createApp, ref, computed} = Vue;
    const firstName = ref(1);
    const lastName = ref(2);

    const app = {
        // 入口函数
        setup() {
            // 基础用法
            let fullName = computed(() => firstName.value + lastName.value)
             // console.log(fullName ++) // error computed 是只读的
            return {
                firstName,
                lastName,
                fullName
            }
        }
    }

    // 挂载(建立vue与dom的联系)
    createApp(app).mount('#app')
</script>

computed的set和get方法

<body>
    <div id="app">
        <input v-model="firstName" type="number"/>
        <input v-model="lastName" type="number"/>
        <div>{{fullNames}}</div>
    </div>
</body>
<script>
    const {createApp, ref, computed} = Vue;
    const firstName = ref(1);
    const lastName = ref(2);

    const app = {
        // 入口函数
        setup() {
        	// get set 方法
            const fullNames = computed({
                get: () => firstName.value + lastName.value,
                set: (val) => {
                    firstName.value = val
                }
            })
            fullNames.value = 7 // set
            return {
                firstName,
                lastName,
                fullNames
            }
        }
    }

    // 挂载(建立vue与dom的联系)
    createApp(app).mount('#app')

</script>

- End - - 个人学习笔记 - - 仅供参考 -