Vue3常用API之ref

ref函数

1. 作用：定义一个响应式的数据
2. 语法：

   const 属性名 = ref(属性值)
   

3. ref()函数会创建一个包含响应式数据的引用对象（reference对象）
4. 在js中操作数据方式：属性名.value
5. 在html模板中操作数据：<div>{{ 属性名 }}</div>
6. 在ref()函数中接收的数据类型可以是基本类型，也可以是对象类型

   // 引入ref
   import { ref } from 'vue'
   export default {
       name: 'App',
   	setup () {
           // 接收基本类型
           const name = ref('张三')
           // 接收对象类型
           const person = ref({
               name: '李四',
               age: 18
           })
           
           return {
               name,
               person
           }
       }
   }
   

ref()定义响应式数据的响应式原理

1. 基本类型：响应式依然依靠Object.defineProperty()中的set()方法与get()方法实现
2. 对象类型：在vue3内部求助使用了一个新函数 — reactive()函数
   1. reactive()函数其实就是对proxy操作进行了封装
   2. 所以对象类型实现响应式原理依靠的是proxy