vue3.0 基础api

删除数据

抽取数据方法

添加数据

抽取添加数据

state没有从外界传递即可

上面是在当前文件引用删除添加方法
现在新建删除文件添加文件.js方式
rem.js

add.js

页面使用

非组合api
data 中业务数据
mothods中新增业务逻辑
数据和业务逻辑是分散的

组合api：定义封装好的具备独立功能的函数功能组合放到一起
当前的数据和当前的业务逻辑放在一起了

option api ：vue2.0的api
compsition api 注入api主要是return的age 注入到data中，myFn2 注入到methods中
如下图

混合使用

setup

this是undefined

异步 --页面无数据

reactive

赋值一个基础数据可以显示但点击后不可以更新数据

修改后---点击后可以更新

ref

使用reactive

使用ref：如果直接改变age=666无效；应该使用age.value=666即可

修改后

如果是通过ref创建的数据，那么在template中使用的时候不用通过.value来获取因为vue会自动给我们添加.value

区别

判断是ref还是reactive用isRef 和isReactive

递归监听

监听每一层级都监听耗费性能解决办法使用多级时使用非多级监听

使用reactive

使用ref

非递归监听 shallowReactive， shallowRef

只有第一层被监听
其它层不被监听

换成shallowRef的时候第一层也没有被监听；原因是监听的value变化

通过triggerRef 修改第n级的变化，vue3 没有提供triggerReactive的事件如果是reactive类型的数据，那么是无法主动触发界面更新的

如果myfn通过obj不能改变state页面参数 ，即使用的是同一地址

如果想不修改页面数据用toRaw
reactive

ref

markRaw如果永远都不想被追踪

把obj改成响应式数据用ref形式如下---ref相当于复制

toRef---引用

ref：复制，修改响应式数据不会影响以前的数据
toRef ：引用，修改响应式数据会影响以前的数据
ref：数据发生改变，界面会自动改变
toRef：数据发生改变，界面也不会自动更新

toRef应用场景：如果想让响应式数据和以前的数据关联起来，并且更新响应式数据之后还不想更新UI，那么就可以使用toRef

toRef只能一个属性一个属性改

如果想同时修改多个属性可以使用toRefs

customRef

setup异步

使用同步的话使用自定义的

修改

如果想在setup里拿到声明的box值可以放在onMounted里

vue3响应式本质