# 02.引用类型
### 侦听单个属性
```js
const app = Vue.createApp({
setup() {
const {reactive, watch, toRefs} = Vue
let eduObj = reactive({brand: 'Love', site: 'baidu.com'})
// 侦听器 侦听一个属性 用函数引入
watch(()=>eduObj.brand, (currentValue, preValue)=>{
// 当前值
console.log(currentValue);
// 先前值
console.log(preValue);
})
return {
brand, site
}
},
template: `#idea`
}).mount('#app');
```
```html
<template id="idea">
<div>品牌:<label><input type="text" v-model="brand"></label></div>
<p>品牌:{{brand}}</p>
</template>
```
![03](imgs/03.png)
### 侦听多个属性
```js
const app = Vue.createApp({
setup() {
const {reactive, watch, toRefs} = Vue
let eduObj = reactive({brand: 'Love', site: 'baidu.com'})
// 取出后便于侦听多个
const {brand, site} = toRefs(eduObj)
// 侦听器 侦听多个属性
watch([brand, site], ([currentBrand, currentSite], [preBrand, preSite])=>{
// 当前值
console.log(currentBrand, currentSite);
// 先前值
console.log(preBrand, preSite);
}, {
// 是否深度监视
// 默认只监视对象的值,深度会监视对象的属性值
deep: false,
})
return {
brand, site
}
},
template: `#idea`
}).mount('#app');
```
```html
<template id="idea">
<div>品牌:<label><input type="text" v-model="brand"></label></div>
<p>品牌:{{brand}}</p>
<div>网址:<label><input type="text" v-model="site"></label></div>
<p>网址:{{site}}</p>
</template>
```
![04](imgs/04.png)