vue专栏 05.vue高阶API 03.计算属性新用法 03.引用类型

全栈开发

已于 2022-04-03 12:47:56 修改

阅读量154

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

于 2022-03-23 19:06:03 首次发布

本文链接：https://blog.csdn.net/m0_66351881/article/details/123693621

vue 专栏收录该内容

69 篇文章

订阅专栏

本文通过实例讲解了Vue.js中的`reactive`和`computed`特性，展示了如何创建动态更新的计数器和计算属性，并探讨了响应式数据在页面刷新和自定义事件中的应用。

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

# 03.引用类型

[toc]{type: "ol", level: [3]}

### 引用类型
```js
const app = Vue.createApp({
    setup() {
        const {reactive, computed} = Vue
        let numObj = reactive({count: 12});
        let cNum = computed({
            get: () => {
                return numObj.count * 12
            },
            set: (res) => {
                console.log(res);
                // numObj.count 从而改变页面的cNum
                numObj.count = res / 10;
            }
        })

        setTimeout(() => {
            // 默认页面无变化
            cNum = 100
        }, 2000)

        function add() {
            numObj.count += 10;
        }

        return {
            numObj, cNum, add
        }
    },

    template: `#idea`
}).mount('#app');

```
```html
<template id="idea">
    <div>
        <h3>{{numObj.count}}</h3>
        <h3>{{cNum}}</h3>
        <button @click="add">变化</button>
    </div>
</template>
```
![01](imgs/01.png)
![02](imgs/02.png)