vue3 ref reactive

使用vue3开发最重要的就是了解vue3中的响应式数据

首先来一起了解一下vue3和vue2的响应式原理的不同：

vue2： 区分对象和数组

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。 存在问题：数组数据已经改变页面不更新

vue3：不区分对象数组

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

通过Reflect（反射）: 对源对象的属性进行操作。

想详细了解的同学可以去vue3中文文档了解一下：vue3文档

然后来了解一下基础使用：

注：vue3使用组合api，响应式的数据需要自己引入api再手动定义(也是组合api让vue3比vue2更加轻量化，在此文章不过多叙述)

import { ref, reactive } from 'vue'

ref ：处理基本数据类型返回RefImpl对象

// 语法: 
let num = ref( 1 )
// JS中使用响应式：
xxx.value = 2
// html中读取数据: 不需要.value
<template>
    <div>{{xxx}}</div>
</template>

注：接收的数据可以是：基本类型、也可以是对象类型。当传入对象类型的数据ref会求助内部的reactive函数。 

reactive：处理复杂数据类型返回proxy对象

// 语法: 
let obj = reactive({name: '张三'})
// JS中使用响应式：
obj.name = '李四'
// html中读取数据:
<template>
    <div>{{obj.name}}</div>
</template>

注：不能处理基本数据类型! 因为使用proxy，也可以处理数据数据了