vue3-04vue3中ref函数( 定义一个响应式的数据)

1.前言

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

语法:

 const xxx = ref(initValue)

1. 创建一个包含响应式数据的引用对象 (reference对象，简称ref对象)
2. JS中操作数据: xxx .value
3. 模板中读取数据: 不需要.value，直接:
   {xxx]}

---

备注:

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

2.例子

2.1 未使用ref函数-点击按钮更改信息

未双向绑定渲染 ，更改数据渲染失败。

2.2 使用ref

使用get与set进行响应式处理（数据劫持）

2.2.1查看ref后-数据变化

引入实例对象 

2.2.2读取ref后的数据

 2.2.2.1基本类型-get 与set

 双向绑定渲染 ，更改数据渲染成功。

2.2.2.2对象数据-proxy代理对象封装在vue3中的reactive函数中

在模板中无需.value

修改对象中的属性，第一层.value