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

# 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)