删除数据
抽取数据方法
添加数据
抽取添加数据
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响应式本质
网友评论