有蓝-优快云博客

原创 Vue3ts动态组件

引入组件的时候如果通过reactive包裹了这个组件，那么vue会给你报错，因为把组件渲染成一个响应式对象是没有意义的，浪费性能，所以我们可以通过showRef或者markRaw来把它包裹一下。特别注意：vue3中如果需要使用动态组件的话，:is = “这里必须是组件实例，不能是字符串”

2022-09-09 14:57:15 871

原创 vue3ts 递归组件

参考：https://blog.youkuaiyun.com/qq1195566313。父组件中定义数据类型以及data。

2022-09-09 14:55:41 627 1

flush：副作用刷新时间，默认是pre，在这个时候，组件没有更新，意味着dom也没有更新，如果我们想对dom做一些操作，需要使用此配置项。oninvalidate无论如何都会在watchEffect中的代码段执行前执行。参考：https://blog.youkuaiyun.com/qq1195566313。在其中写了的值会自动帮你监听，而且默认开启非惰性（immediate）返回一个函数，调用这个函数就会停止监听。

2022-09-09 14:54:21 337

原创 Vue3ts computed和watch

有bug，当监听引用类型的数据时，oldvalue不能正常显示，原因是watch没有做缓存，所以一碰到引用类型就歇逼，而computed做了缓存。当使用ref的时候，需要开启深度监听，使用reactive会自动开启深度监听（就算你设置了deep：false也会监听）当依赖的属性值发生变化，才会触发他的更改，如果依赖的值不发生变化，使用的是缓存中的值。当监听reactve对象的时候，写不写deep无所谓，都可以监听到深层次变化。深度监听bug：当开启深度监听的时候，oldvalue会等于newVal。

2022-09-09 14:52:15 1710

原创 Vue3ts To全家桶 toRef toRaw toRefs

如果不使用toRefs，那么相应式对象解构取值后会丢失相应式，所以我们使用toRefs来对相应式对象进行解构取值。toRef传入的第一个参数必须是相应式对象，如果传入的是非响应式对象，那么不会触发视图更新，屌用没有。传入非响应式对象后log输出看起来是RefImpl对象，但是其中没有进行响应式处理。参考：https://blog.youkuaiyun.com/qq1195566313。这玩意没啥用，只不过toRefs是用它实现的。toRefs不能解构深层结构。简单实现toRefs源码。

2022-09-09 14:50:28 235

原创 Vue3tsReactive全家桶

原因是数组是一个引用对象，我们修改整个数组的时候（按下button1）它已经从响应式对象替换成了普通的数组。只改变浅层数据，但是深层次不改变，但是如果在dom挂载之前改变深层次数据，那么是会生效的。我们了解，reative是用来将复杂对象进行响应式的，什么情况会丢失响应式呢?点击button1之后我们发现，button2、3都无法正常修改，丢失了响应式。因为使用ref的使用需要.value，相当于外面套了一层。我们需要替换整个对象的时候该怎么做不丢失响应式呢？我们发现其中属性是不可以修改的。

2022-09-09 14:48:44 2543

原创 Vue3 ref全家桶

配合shallowRef使用，上面说到，shallowRef后其组件内部不具有响应式，但是我们可以使用triggerRef令其强制更新。当使用ref定义复杂类型的时候，他会帮我们调用reactive。在template中使用的时候会自动解包无需.value。整个对象具有相应式，但是其中内部属性不具有响应式。使用ref的时候需要.value。定义ref类型两种方式。另一种使用Ref判断是否为ref对象。trigger:触发。

2022-09-09 14:42:20 967

原创 vue3 ref与shallowRef共同使用的问题

讲道理，这个shallowRef在使用的时候，如果msg2.value.foo = ‘qiqi’，只是修改其中内容不会发生更新，但是，如果我们在改变shallowRef的时候同时修改了ref，并且引起视图更新，那么shallowRef也会触发更新，为什么会这样呢？最后调用的都是triggerRefValue这个方法，这个方法就是更新视图的方法，所以会出先上面的情况，我们使用ref会调用triggerRefValue更新视图，会导致我们shallowRef的数据一并被更。先从github下载vue源码。

2022-09-09 14:40:20 525