setup, 返回对象（可以直接使用，对象里有数据 方法）或渲染函数

image.png image.png

引用对象 （响应引用对象）

数据改变，页面变化

image.png

基本数据类型依然是引用对象实现
引用对象使用reative处理

image.png

Vue2.0修改数据的问题

image.png

解决方案

image.png

Vue3.0解决2.0的痛处直接调用

image.png

vue2捕获数据修改原理：

image.png

vue3捕获数据修改原理：

image.png image.png

setup注意点

image.png
image.png

计算属性

image.png

watch

如果监听对象oldValue也是新值

image.png
image.png

生命周期函数

image.png

钩子函数 组合代码 复用代码类似于vue2的mixin

image.png

创建钩子函数并提供使用

image.png

使用钩子函数

image.png

将数据值转换成ref toRef(object, 'key') 将对象具体某个属性拆开 toRefs(object) 将整个对象拆开

image.png

其他函数

image.png