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