VUE3.0总结回顾-VUE3.0组合式API

1.setup

1.setup是属性式函数。
2.可以定义变量，函数（代替vue2.x的data,mothed）。
3.输出，变量，函数，也可以输出渲染函数。
4.是vue3.0组合式API使用的“场地”。

2.ref函数

1.定义一个响应式函数，一般处理基本类型数据。
2.使用方法:

let name=ref("初始值")

3.也可以处理对象类型，但是底层也是调用reactive函数实现响应式

3.reactive

1.定义一个响应式函数，一般处理引用类型数据。基本类型不能使用它。
2.使用方法:

let name=reactive("初始值")

3.底层是使用proxy实现深层次的响应式。

4.proxy

vue2.x的响应式原理

1.对象类型是通过Object.defineProperty()对属性的读取，修改进行拦截，数据劫持。
2.数组类型是通过重写更新数组的一系列方法来实现拦截。对数组的变更方法进行了修改。

Object.defineProperty(data,"name",{
set(){},
get(){}
})

缺点：
1.新增，删除属性界面不会更新。
2.直接通过下标修改数组，不会更新。

VUE3.0响应式原理

1.通过proxy代理拦截对象中任意属性的变化，含属性的读写，删除，修改，新增。
2.通过refflect对被代理的属性进行操作

5.watch

1.直接监听ref处理定义的值，不需要写deep直接可以获取新旧值。

2.监听定义的reactive处理的值，只能获取到新值，强制开启了deep，不能获取旧值

3.监听具体reactive处理属性，deep史有效地.

6.watchEffect

1.watch需要具体指明监听数据对象
2.watchEffect不用指明具体监听哪个属性,监听回调函数中使用到哪个属性,那个属性就有了被监听特性.

watchEffect(()=>{
let name=objData.name
let job=objData.job
})

7.生命周期

• beforeDestroy改名为 beforeUnmount
• destroyed改名为 unmounted
• beforeCreate===>setup()
• created=======>setup()
• beforeMount ===>onBeforeMount
• mounted=======>onMounted
• beforeUpdate===>onBeforeUpdate
• updated =======>onUpdated
• beforeUnmount ==>onBeforeUnmount
• unmounted =====>onUnmounted

8.toRef和toRefs

1.创建一个ref对象,其value值指向另外一个对象中的某个属性.
例如:

let name = toRef(person,'name')

2.toRefs可以批量处理toref处理的工作
例如:

...toRef(person)

如上在setup中return返回,可以直接使用name属性.