vue3中的ref函数、reactive函数以及shallowReactive 函数和 shallowRef函数

一、ref函数

作用：定义一个响应式的数据

语法：const xxx = ref(initValue)

• 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
• JS中操作数据： xxx.value
• 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

备注：

• 接收的数据可以是：基本类型、也可以是对象类型。
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
• 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

处理基本类型： 

<template>
  <div class="hello">
    <h1>姓名:{{name}}</h1>
    <h1>年龄:{{age}}</h1>
    <button @click="changeInfo">修改人的信息</button>
   
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    
    let name = ref('张三')
    let age = ref(18)

    function changeInfo() {
      name.value = '李四',
      age.value = 48
    }
    
    return {
      name,
      age,
      changeInfo
    }
  }
}
</script>

<style scoped>

</style>

 处理对象类型：

<template>
  <div class="hello">
    <h1>姓名:{{name}}</h1>
    <h1>年龄:{{age}}</h1>
    <h1>职业：{{job.type}}</h1>
    <h1>薪资:{{job.salary}}</h1>
    <button @click="changeInfo">修改人的信息</button>
   
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'HelloWorld',
  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 = '30K'
    }
    
    return {
      name,
      age,
      job,
      changeInfo
    }
  }
}
</script>

<style scoped>

</style>

二、reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

<template>
  <div class="hello">
    <h1>姓名:{{name}}</h1>
    <h1>年龄:{{age}}</h1>
    <h1>职业：{{job.type}}</h1>
    <h1>薪资:{{job.salary}}</h1>
    <button @click="changeInfo">修改人的信息</button>
   
  </div>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    // 数据
    let name = ref('张三')
    let age = ref(18)
    let job = reactive({
      type:'前端工程师',
      salary:'30k'
    })

    function changeInfo() {
      // name.value = '李四',
      // age.value = 48
      job.type = 'UI设计师'
      job.salary = '60K'
    }

    return {
      name,
      age,
      job,
      changeInfo
    }
  }
}
</script>

<style scoped>

</style>

 三、shallowRef函数和shallowReactive 函数

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

使用场景：

• 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化，那就使用 shallowReactive，这样可以做一些性能上的优化
• 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换 那就使用shallowRef

shallowRef和ref的区别在于： ref可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象，但shallowRef定义对象（或数组）类型数据时，它不会通过reactive转为代理对象。