简单实现vue3相关功能,带你探索它的奥秘


vue3优点很多,它不仅拥有vue的响应式数据,还借鉴了react的hooks,更加接近函数式编程,在使用模板语法下,对于静态节点动态节点的捕捉优化也非常到位,接下来我想简单实现一下vue3相关的一些功能带大家了解一下它

首先了解一下项目结构:

在这里,我主要用到了四数:
h:通过参数生成虚拟dom节点
createApp:用于页面初始化时,执行的方法,会根据传入的options挂载到mount定义的标签上
reative:将传入的对象进行响应式处理,当触发get,set,delete,执行内部相应的函数
watchEffect:一个立即执行的副作用,当调用该函数时,会将传入的函数里面的响应式数据进行收集并在数据改变的时候触发函数再次执行


下面我一步一步带大家执行一遍代码,让大家有一个清楚的认知:
页面初始化vue3一般都是通过createApp函数去创建Vue实例的,而该函数会去调用ensureRenderer函数返回的createApp函数

createApp又是从哪里来的呢,它是通过createRenderer函数返回的,
这个函数在vue3中叫自定义渲染器,可以通过这个函数自定义自己的渲染逻辑,比如小程序,app。

从上图中发现createApp还包装了一层函数,名叫createAppAPI,该函数会返回一个创建Vue实例
的函数,通过副作用监听数据更新,每次更新响应式数据,重新执行render函数,render函数中的patch函数比较最小差异进行更新,这里vue2做的好的地方是对动态节点的标记


既然vue是通过副作用去监听数据变化的,那么下面我们看一看watchEffect是咋实现的
watchEffect将函数进行了包装,在触发传入的fn的时候会触发fn内响应式数据的get,从而触发track方法收集副作用函数

当副作用依赖的响应式数据变化的时候,触发set,从而触发trigger,trigger搜寻被这个响应式数据以来的所有副作用并执行它们。

最后我们说说Vue响应式是怎么做到的,上面我说了触发get,set,那get,set是什么呢,其实就是Vue通过ES6的Proxy类代理了传给reactive函数的对象,当查询该对象下的数据时会触发get,
当改变对象下的数据时会触发set,这就是响应式的具体含义

到这就结束了,写的怪累的,如果喜欢的话,希望点赞收藏,谢谢大家

来源:https://www.icode9.com/content-4-831951.html

(0)

相关推荐