Vue3核心API详解

1、setup 与vue2中的data和methods

data和methods可以读取到setup里面的东西，但是setup读取不到vue2的内容

2、vue2与vue3的API差异

vue2使用的是选项式API，vue3可以是选项式API也可以是组合式API，官方推荐使用组合式API，

在vue3中可以存在vue2的语法内容，是可以共存的

3、响应式数据创建===>ref（可以定义基本类型数据和对象类型数据）

从vue引入ref，import { ref } from 'vue'；定义字符串型数据 let xxx =  ref('aaa')；在html里用{ {}}插值表达式，在ts里使用xxx.value进行访问和修改。

当ref定义对象类型数据时，在js访问和修改时需要添加上.value

let car = ref({peice:'100'});   
console.log(car.value.price)

4、响应式数据创建===>reactive（只能定义对象类型数据）

从vue引入reactive，import { reactive } from 'vue'；定义对象型数据 let xxx =  reactive({name:'张三'})；

reactive定义的数组或对象是深层次的，无论层级有多少，都会是响应式的

5、ref对比reactive

从宏观角度看

1、ref用来定义基本数据类型、对象类型数据

2、reactive用来定义对象类型数据

区别:

1、ref创建的变量必须使用.value(可以使用volar插件自动添加.value)

当使用ref定义的对象型数据，进行全量覆盖赋值时，是保留了其响应特征的

let xx = ref({name:'张三'})；
xx.value = { name:'李四' }

2、reactive重新分配一个新对象，会失去响应式(可以使用Object.assign去整体替换)

比如定义好的数据，直接重新给数据赋值一个新的原对象时，会失去响应式

let xx = reactive({name:'张三'})； xx = { name:'李四' }

当遇到需要把reactive定义的数据进行全量覆盖时，需要使用Object.assign