vue专栏 05.vue高阶API 04.watch新用法 02.引用数据类型

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