1、reactive定义响应对象

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据；
• 通常用来定义响应式的对象数据。

未定义响应式对象前：

<template>
  <div>name:{{obj.name}}</div>
  <button @click="updateName">修改name</button>
</template>

<script>
export default {
    setup() {
        // 普通对象，它不是响应式
         const obj = {
            name: 'zhangsan',
             age: 18
         };
        const updateName = () => {
            obj.name = '我是修改后的name'
        };
        return {
            obj,
            updateName
        }
    }
}
</script>

定义响应式对象后：
引入reactive—>用reactive包裹住变量—>实现数据响应式到页面上

<template>
  <div>name:{{obj.name}}</div>
  <button @click="updateName">修改name</button>
</template>

<script>
import { reactive } from 'vue'

export default {
    setup() {
        // 定义响应式对象
        const obj = reactive({
            name: 'lisi',
            age:20
        })
        const updateName = () => {
            obj.name = '我是修改后的name'
            console.log('我是按钮..........');
        };
        return {
            obj,
            updateName
        }
    }
}
</script>

2、toRef函数

toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且跟原来是数据的值是关联的。例如上例中，只想访问响应式对象obj中name属性，而不需要age。
通过对象结构出来的数据，不是响应式，需要使用toRef。

使用场景：有一个响应式对象数据，但是模板中只需要使用其中一项数据。

代码1：

<template>
  <div>{{name}}</div>
  <button @click="updataName">按钮</button>
</template>

<script>
import { reactive }from 'vue'
export default {
    setup() {
        // 定义响应式对象
        const obj = reactive({
            name: 'wangwu',
            age:30
        })
        // 对象解构出来的数据不再是响应式的
        let { name } = obj;
        // 修改name
        const updataName = () => {
            name = '我是修改后的name';
            console.log(name);
            console.log('update........');
        };
        return {
            name,
            updataName
        }
    }
}
</script>

代码2：

<template>
  <div>{{name}}</div>
  <button @click="updataName">按钮</button>
</template>

<script>
import { reactive, toRef }from 'vue'
export default {
    setup() {
        // 定义响应式对象
        const obj = reactive({
            name: 'wangwu',
            age:30
        })
        // 1、转换**响应式对象**中**某个属性**为单独响应式数据
        let name = toRef(obj,'name');
        // 修改name
        const updataName = () => {
            console.log('update........');
         // 2、toRef转换响应式数据包装成响应式数据，value是值存放的位置
            name.value = '我是修改后的name';
            console.log(name);
        };
        return {
            name,
            updataName
        }
    }
}
</script>

3、toRefs函数

转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是相关的

代码1：

<script>
import {reactive,toRefs} from 'vue'

export default {
    setup() {
        const obj = reactive({
            name: '张三',
            age:18
        })
        console.log(obj);
        
        const obj2 = toRefs(obj);
        console.log(obj2);

        // 解构之后重新赋值的是普通对象
        const obj3 = { ...obj };
        console.log(obj3);
    }
}
</script>

修改原始数据obj后会发现，转换过后的obj2中的值会跟着改变。

代码2：

<template>
<div>{{name}}</div>
<div>{{age}}</div>
<button @click="update">修改name</button>
</template>

<script>
import {reactive,toRefs} from 'vue'

export default {
    setup() {
        const obj = reactive({
            name: '张三',
            age:18
        })
        console.log(obj);

        const obj2 = toRefs(obj);
        console.log(obj2);

        // 解构之后重新赋值的是普通对象
        const obj3 = { ...obj };
        console.log(obj3);

        const update =()=> {
            obj.name = '我是修改的原始数据的obj'
        }
        return {
            // 解构obj2，用的时候直接拿属性名，不需要obj2.name或obj2.age
            ...obj2,
            update
        }
    }
}
</script>

4、ref函数

定义响应式数据：

• ref函数，常用于简单数据类型定义为响应式数据，其实也可以定义复杂数据类型的响应式数据，对于数据未知的情况下ref是最适用的。

•    在修改值，获取值的时候，需要.value
  

•    在模板中使用ref申明的响应式数据，可以省略.value，在js代码中修改ref声明的数据，需要加上.value。
  

代码：

<template>
  <div>name:{{name}}</div>
  <button @click="changeName">修改name</button>
</template>

<script>
import { ref } from 'vue'

export default {
    setup() {
        const name = ref('zhangsan');
        const changeName = () => {
            name.value = 'lisi'
        }
        return {
            name,
            changeName
        }
    }
} 
</script>