![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 65
qq_41037004
这个作者很懒,什么都没留下…
展开
-
Vue.js设计与实现阅读笔记(十二)
在同构渲染过程中,组件的代码会分别在服务端和浏览器中执行一次。在服务端,组件会被渲染为静态的HTML字符串,并发送给浏览器。浏览器则会渲染由服务端返回的静态的HTML内容,并下载打包在静态资源中的组件代码。当下载完毕后,浏览器会解释并执行该组件代码。当组件代码在客户端执行时,由于页面中已经存在对应的DOM元素,所以渲染器并不会执行创建DOM元素的逻辑,而是会执行激活操作。在通过Vite搭建的同构项目中,可以使用环境变量。来判断当前代码的运行环境。原创 2023-04-16 21:01:18 · 110 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(十一)
Vue的模板编译器用于把模板编译为渲染函数。即把</编译为工作流程如下:fill:#333;color:#333;color:#333;fill:none;模板词法分析语法分析模板AST代码生成渲染函数。原创 2023-04-16 18:09:47 · 97 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(十)
使用虚拟节点的vnode.type属性来存储组件对象,渲染器根据虚拟节点的该属性来判断它是否是组件。如果是组件,则渲染器会使用mountComponent和patchComponent来完成组件的挂载和更新。原创 2023-04-14 11:50:14 · 46 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(九)
快速Diff算法包含预处理步骤,先处理新旧两组子节点中相同的前置节点和相同的后置节点。原创 2023-04-08 20:49:37 · 52 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(八)
双端Diff算法是一种同时对新旧两组子节点的两个端点进行比较的算法。因此,需要四个索引值,分别指向新旧两组子节点的端点。依次比较①②③④,当新旧节点的key值相同时,可以进行DOM复用。原创 2023-04-07 22:17:46 · 59 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(七)
对于新旧两组子节点的更新,若直接卸载全部旧子节点,再挂载全部新子节点,会产生极大的性能开销。改进方案:遍历新旧两组子节点中数量较少的那一组,并逐个调用patch函数进行打补丁,然后比较新旧两组子节点是数量,如果新的一组子节点数量更多,说明有新子节点需要挂载;否则说明在旧的一组子节点中,有节点需要卸载。原创 2023-04-06 17:57:06 · 93 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(六)
渲染器8.挂载与更新8.1挂载子节点和元素的属性function mountElement(vnode, container) { const el = createElement(vnode.type) if (typeof vnode.children === 'string') { setElementText(el, vnode.children) } else if (Array.isArray(vnode.children)) { v原创 2023-04-05 22:24:38 · 108 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(五)
在浏览器平台上,渲染器可以利用DOM API完成DOM元素的创建、修改和删除。为了让渲染器不直接依赖浏览器平台特有的API,将这些操作抽象成可配置的对象。用户可以在调用createRenderer函数创建渲染器的时候指定自定义的配置对象,从而实现自定义的行为。const {if(!n1) {console . log(` 创建元素 ${ tag } `) return {原创 2023-04-04 16:39:20 · 77 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(四)
由于Proxy的代理目标必须是非原始值,所以不能拦截对原始值的操作。为此,需要使用一个非原始值去包裹原始值。原创 2023-04-04 12:50:36 · 56 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(三)
Proxy用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。target:要使用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。handler:一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理p的行为。一个 可撤销 的代理是可以被禁用的代理。假设我们有一个资源,并且想随时关闭对该资源的访问。我们可以做的是将它包装成可一个撤销的代理,没有任何捕捉器。原创 2023-04-03 17:33:28 · 141 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(二)
副作用函数的执行会直接或间接影响其他函数的执行。原创 2023-03-30 18:05:59 · 112 阅读 · 0 评论 -
Vue.js设计与实现阅读笔记(一)
视图层框架通常分为命令式和声明式,命令式框架更关注过程,声明式框架更关注结果。对应的声明式代码为:原创 2023-03-26 22:44:23 · 136 阅读 · 0 评论