vue3 中定义响应式数据

1、ref函数

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

语法：const xxx = ref(initValue)

创建一个包含响应式数据的引用对象(reference对象)

js中操作数据：xxx.value

模板中读取数据：不需要.value，直接写：{{xxx}}

说明：

接收的数据可以是基本类型，也可以是对象类型。

基本类型的数据：响应式靠Object.defineProperty()的get和set实现。

对象类型的数据：内部使用了reactive函数实现响应式。

2、reactive函数

作用：定义一个对象类型的响应式数据（基本类型不能用它，用ref函数）

语法：const 代理对象 = reactive(源对象)

接收一个对象（或属组），返回一个代理对象（proxy对象）

reactive定义的响应式数据是“深层次的”。

内部基于ES6的Proxy实现，通过代理对象操作源对象，内部数据都是响应式的。