ref,reactive,toRef和toRefs

1.reactive

1. reactive根据传入的对象，创建一个深度响应式对象。响应式对象属性值改动，不管层级多深，都会触发响应式。
2. reactive只能给对象添加响应式，对于值类型，比如String,Number,Boolean,Symbol是不可以的
3. 不能通过…person方式结构，这样会丢失响应式

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h3>工作种类：{{person.job.type}}</h3>
  <h3>工作薪水：{{person.job.salary}}</h3>
  <h3>爱好：{{person.hobby}}</h3>
  <h3>测试的数据{{person.job.a.b.c}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { reactive } from '@vue/reactivity'
export default {
  name: 'App',
  setup(){
    let person = reactive({
        name:"张三",
        age:18,
        job:{
            type:"前端工程师",
            salary:"30k",
            a:{
              b:{
                c:666
              }
            }
          },
          hobby:['抽烟','喝酒','烫头']
    })

    // 方法
   function changeInfo(){
      person.name = '李四'
      person.age= 48
      person.job.type = 'UI设计师'
      person.job.salary = '60k'
      person.job.a.b.c = 999
      person.hobby[0] = '学习'
   }
     return {
       person, //不能通过...person方式结构，会丢失响应式
       changeInfo
     }
  }
}
</script>

2.ref

1. ref用于为数据添加响应式状态，比如String,Number,Boolean,Symbol添加响应式就要用到ref
2. 获取数据值的时候加.value
3. 参数可以传递任意数据类型，传递对象类型时也能保持深度响应，适用性更广

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>工作薪水：{{job.salary}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
  name: 'App',
  setup(){
    //为基本数据类型添加响应式
    let name = ref('张三') 
    let age = ref(18)
    //为复杂的数据类型添加响应式
    let job = ref({
      type:'前端工程师',
      salary:"30k"
    })
    // 方法
   function changeInfo(){
      name.value = '李四'
      age.value = 48
      job.value.type = 'UI设计师'
      job.value.salary = '60k'
   }
     return {
        name,
        age,
        job,
        changeInfo
     }
  }
}
</script>

3.toRef

1. 针对响应式对象(reactive)的prop(属性)创建一个ref，保持响应式
2. 接收连个参数：源响应式对象和属性名，返回一个ref数据
3. 获取数据值的时候需要加.value
4. toRef后的ref数据如果是复杂数据类型时，不是原始数据的拷贝，而是引用，改变结果数据的值也会改变原始数据

<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪资：{{person.job.j1.salary}}</h2>
  <button @click="person.name+='~'">修改信息</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import { reactive, toRef} from "vue";
export default {
  name: "Demo",
  setup() {
    //数据  响应式对象
    let person = reactive({
        name:'张三',
        age:18,
        job:{
            j1:{
                salary:20
            }
        }
    })
    //通过toRef创建一个ref响应式
    const name2 = toRef(person,'name')
    //5秒后改变 两者保持引用关系
    setTimeout(()=>{
        name2.value = '343434'
    },5000)
     //6秒后改变 两者保持引用关系·
    setTimeout(()=>{
        person.name = '666666'
    },6000)

    return {
      person,
      name2,
      age:toRef(person,'age'),
      salary:toRef(person.job.j1,'salary')
    };
  },
};
</script>

4.toRefs

1. toRefs是一种用于破坏响应式对象并将其所有属性转换为ref的实用方法。
2. 获取数据值的时候需要加.value
3. toRef后的ref数据如果是复杂数据类型时，不是原始数据的拷贝，而是引用，改变结果数据的值也会改变原始数据

作用跟toref类似，toRef是对一个个属性手动赋值，而toRefs是自动解构赋值

<template>
    //不推荐这种方式
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
   //return需要{...toRefs(person)}
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}</h2>
  <button @click="name+='~'">修改信息</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import { reactive, toRef} from "vue";
export default {
  name: "Demo",
  setup() {
    //数据  响应式对象
    let person = reactive({
        name:'张三',
        age:18,
        job:{
            j1:{
                salary:20
            }
        }
    })
	
    return {
      person,//不建议使用这这方法
      ...toRefs(person)
    };
  },
};
</script>