首页 > 其他 > 详细

Vue3.0 - computed函数

时间:2021-09-12 05:24:39      阅读:21      评论:0      收藏:0      [点我收藏+]

前言

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 -
梦想是咸鱼
关注一下吧
技术分享图片

Vue3.0 - computed函数

原文:https://www.cnblogs.com/maggieq8324/p/15251265.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!