- 博客(16)
- 收藏
- 关注
原创 Vue源码学习(七)——Vue的生命周期
我们在学习Vue的时候,都知道Vue是有生命周期beforeCreate,created,beforeMounted等等,以及从源码学习当中经常看到类似代码,根据注释才知道是生命周期钩子,那么生命周期如何注册我们还不知道。
2023-12-18 13:34:39
164
原创 Vue源码学习(六)——ReactiveEffect(依赖处理优化)
'hello':msg.name)) 当我们刚开始进行依赖收集的时候,这个effect时加入msg.name的dep中,但是当msg.flag为true的时候,表达式返回hello,和msg.name无关了,当msg.name触发trigger的时候,还会触发当前这个effect嘛?再次执行的时候,都要先将上一次收集过的清空掉,重新进行收集,这么做的目的其实是为了避免上一次收集到的依赖,本次不需要去收集的情况所导致的依赖收集错误。因此Vue进行了优化处理,通过位运算和给dep打标记的方式进行了优化。
2023-12-18 13:01:07
123
原创 Vue源码学习(五)——reactive,ref
上面说到是通过调用render函数,触发track进行依赖收集,但是又是为什么可以进行收集???我们一般会将reactive,ref声明响应式对象放在setup中,因此就执行reactive,ref,然后通过调用render函数,触发track进行依赖收集,但是为什么可以进行收集,什么是track,我们需要看一下reative源码。
2023-12-17 14:10:14
465
2
原创 Vue源码学习(四)——setupRenderEffect
上文说到的主要核心就是这三个函数的调用,而则是组件依赖收集,更新的关键,而依靠的就是本文主要讨论如何使用会先根据创建一个实例,并赋值给instance.effect, effect ,然后声明函数effect.run,并赋值给update以及instance.update,最后调用update函数。
2023-12-17 13:27:17
146
1
原创 Vue源码学习(三)——mountComponent
上一篇说到的主要核心就是这三个函数的调用,这篇就分别探讨一下这三个函数的使用create。
2023-12-16 14:23:29
434
1
原创 Vue源码学习(二)——createVnode
上文说到mount方法的核心就是通过createVnode创建虚拟节点,并且基于vnode调用render函数,我们先从createVnode开始了解。
2023-12-14 15:05:22
1324
1
原创 Vue的双向绑定
当数据属性被修改时,就会触发setter方法。在vue中每个响应式属性都会有一个dep,存放订阅它的watcher实例,Watcher实例会监听数据的变化。当数据发生变化时,Watcher实例会通知对应的Dep实例,Dep实例会通知所有订阅它的Watcher实例进行更新。当组件实例中的数据属性被读取时,会触发getter方法,并且Dep.target会被设置为当前正在处理的Watcher实例,当数据属性被修改时,会触发setter方法,并且Dep实例会通知所有订阅它的Watcher实例进行更新-----
2023-07-11 14:47:17
66
1
原创 如何在vue中使用svg图标
注意:如果想使用 fill更改颜色---(往往svg代码中自带fill会导致代码失效)1.删除SVG代码中的fill元素。5.进行封装并注册为全局组件。
2023-06-14 16:46:10
252
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人