![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3
文章平均质量分 78
volit_
这个作者很懒,什么都没留下…
展开
-
深入学习Vue.js(十四)同构渲染
而SSR则是服务端渲染,数据的获取和拼接都是在服务端进行,服务器直接返回拼接好的HTML文件,因此加载速度很快。同构渲染在首次渲染时与SSR是一样的,即直接返回静态HTML文件,但是有一点不同的是,同构渲染返回的文件中,不会包含已经处理好的数据。在CSR中,我们对于全局状态的使用和我们在SSR中是不一样的,因为CSR中的全局状态只在CSR环境中运行,而SSR中的全局状态确实当前所有访问的用户共用的,因此要避免因为一个用户修改全局状态,而其他用户得到与预想结果不同的操作这种情况。在Vue3中,提供了组件。原创 2023-01-26 01:23:58 · 747 阅读 · 0 评论 -
深入学习Vue.js(十三)编译优化
很明显,与直接替换标签中的内容相比,传统diff算法需要做很多无意义的操作,如果能够去除这些无意义的操作,将会省下一笔很大的性能开销。其实,只要在模板编译时,标记出哪些节点是动态的,哪些是静态的,然后再通过虚拟DOM传递给渲染器,渲染器就能根据这些信息,直接修改对应节点,从而提高运行时性能。因此,我们可以使用“静态提升”,即将静态节点,提取到渲染函数之外,这样渲染函数在执行的时候,只是保持了对静态节点的引用,而不会重新创建虚拟节点。然后,我们在创建虚拟节点的时候,对动态节点进行收集。原创 2023-01-25 09:52:44 · 649 阅读 · 0 评论 -
深入学习Vue.js(十二)编译器
编译器实际上是一段程序,他用来将一种语言A翻译为另一种语言B。其中,A被称为源代码,B被称为目标代码。编译器将源代码翻译为目标代码的过程被称为编译。完整的编译过程通常包含词法分析、语法分析、语义分析、中间代码生成、优化、目标代码生成等步骤。而整个编译过程通常分为编译前端和编译后端,其中编译前端包括词法分析、语法分析和语义分析,编译前端通常与目标平台无关,仅负分析源代码。编译后端则通常与平台有关,设计中间打吗生成、优化和目标代码生成。但是,编译后端不一定会带有中间代码和优化这两个环节,这取决于具体实现。原创 2023-01-21 20:41:24 · 1282 阅读 · 0 评论 -
深入学习Vue.js(十一)内建组件和模块
在之前的KeepAlive组件实现中我们设置的缓存是只要一个组件存在于缓存中,就直接返回该组件,否则将该组件添加到缓存中。默认情况下,KeepAlive组件会对所有组件进行缓存。KeepAlive组件本身不会渲染额外内容,它的渲染函数最终只返回需要被KeepAlive的组件,我们把需要被KeepAlive的组件称为“内部组件”。shouldKeepAlive标记的作用就是在组件卸载函数中,判断被卸载的是否是一个KeepAlive组件,如果是,调用KeepAlive组件的deActive方法进行组件的隐藏。原创 2023-01-20 20:44:19 · 849 阅读 · 0 评论 -
深入学习Vue.js(十)异步组件和函数式组件
除了超时导致加载组件失败之外,我们还需要对异步组件的加载错误做更加细粒度的处理,比如说加入组件加载过程中,出现报错信息,我们可以将报错信息传递给error组件,来进行更加细粒度的错误提示;异步组件受网络影响较大,加载过程可能时快时慢,当加载缓慢的时候,可能会给用户带来一种“卡死”的感觉,而加载过快则可能出现闪烁的情况。同时它也可以接收props参数。异步组件本质上是通过封装手段来实现友好的用户接口,从而降低用户的使用复杂度。除了基本的加载异步组价需求外,我们还需要处理组件的超时和加载失败的情况。原创 2023-01-18 16:45:57 · 1359 阅读 · 0 评论 -
深入学习Vue.js(九)组件实现原理
setup函数时Vue3新增的组件选项,有别于Vue2中的其他组件选项,setup函数主要用于配合组合式API,为用户提供一个地方,用于创建组合逻辑、创建响应式数据、创建通用函数、注册生命周期钩子等。但是,响应式数据修改的同时,相对应的组件也会重新渲染,当多次修改组件状态时,组件将会连续渲染多次,这样的性能开销明显是很大的。在组件中,我们约定组件使用data函数来定义组件自身的状态,同时可以在渲染函数中,调用this访问到data中的状态。通常来说,组件渲染函数的返回值必须是其组件本身的虚拟DOM。原创 2023-01-17 13:33:18 · 758 阅读 · 0 评论 -
深入学习Vue.js(八)快速Diff算法
具体代码实现就是使用一个pos存储当前最大索引,然后定义一个moved标记是否需要移动,最后使用一个变量存储当前已经匹配好的节点数量,当超过需要操作子节点数量时,说明此时新子节点都已处理完毕,还剩下旧子节点中有多余节点。第一种,当j>oldEnd,j原创 2023-01-10 22:57:45 · 465 阅读 · 0 评论 -
深入学习Vue.js(七)双端Diff算法
简单Diff算法利用虚拟节点的key属性,尽可能地复用DOM元素,并通过移动DOM的方式来完成更新,从而减少不断地创建和销毁DOM元素带来的性能开销。而简单Diff算法的问题就在于,它的移动操作并不是最优的。而双端Diff算法,顾名思义,就是一种同时对新旧两组子节点的两个端点进行比较的算法。因此需要四个索引值,分别指向新旧两组子节点的两个端点。原创 2023-01-08 14:07:34 · 474 阅读 · 0 评论 -
深入学习Vue.js(六)简单Diff算法
如果使用上述代码执行,将会产生四次操作。而为了确定新老Node之间是否存在相同结点,就需要引入一个key作为标记,只要两个节点的type和key属性是一样的,那么我们就认为它们是相同节点,但是我们仍然还是要对两个节点进行打补丁的操作,因为节点的内容可能发生了变化。首先,以最基本的更新两组子节点的方法为例,通常我们会先将旧节点全部卸载,再安装所有的新节点,那么将会执行旧节点数量+新节点数量次。当新一组节点的长度大于旧节点时吗,将会有新节点被直接挂载,而当旧一组节点的长度大于新节点是,将会有节点被直接卸载。原创 2023-01-06 19:27:37 · 1189 阅读 · 0 评论 -
深入学习Vue.js(五)实现ref函数
虽然toRef函数解决了响应丢失的问题,但随即带了了增加用户心智负担的问题,因为对于每一个ref对象,我都要通过.value来获取它的值,同时我们在模板中,使用ref变量的值的时候,同样也不希望使用.value去访问变量的值,这时我们就可以使用到前面提到过的__v_isRef标记了,通过封装一个proxyRefs函数,判断属性是否拥有ref对象标记,来赋予属性自动脱ref的能力。但是此时你会发现,obj对象的响应式特性丢失了,当我们修改obj的属性值的时候,并没有触发响应式操作。原创 2023-01-04 12:50:08 · 1468 阅读 · 0 评论 -
深入学习Vue.js(四)实现reactive函数
实现Vue3的reactive函数。原创 2023-01-02 19:07:25 · 1318 阅读 · 4 评论 -
深入学习Vue.js(三)渲染器的设计
在前文中我们提到过,因为虚拟DOM将UI抽象成了对象,因此借助虚拟DOM我们可以很容易的实现跨平台的特性。而渲染系统作为最核心的几个子系统之一,将它设计成可配置的,解耦合是非常有必要的。const {// 调用 createElement 函数创建元素 const el = createElement(vnode . type) if(typeof vnode . children === 'string') {原创 2022-12-31 18:40:50 · 1126 阅读 · 0 评论 -
深入学习Vue.js(二)响应式原理
而若将该操作运行在我们前面的响应式系统中,它将会产生死循环,因为当我们进行了读取操作后,会立即进行赋值操作,而在赋值操作中,读取操作再次被触发,然后循环的执行这一系列操作。当有操作对响应式数据进行读取中,我们将其添加至一个依赖队列,当修改响应式数据的值时,将依赖队列中的操作依次取出,并执行。 当effect函数执行时,它会设置body的内容,而body是一个全局变量,除了effect函数外任何地方都可以访问到,也就是说effect函数的执行会对其他操作产生影响,即effect函数是一个副作用函数。原创 2022-12-29 22:10:58 · 526 阅读 · 0 评论 -
深入学习Vue.js(一)Vue.js的设计思路
声明式框架往往会提供一个清晰的结果,至于怎么达到这个结果,这就涉及Vue的底层实现了,换句话说,Vue帮我们封装了过程。 声明式框架的性能理论上比不上命令式代码(在写出极致优化的命令式代码的情况下),因为声明式框架为了实现最优的更新性能,需要先找出前后差异,并只更新发生变化的地方。ps.声明式框架的内部实现一定是命令式的,而暴露给用户的是生命式的表现形式。 声明式框架是目前比较流行的视图层框架,比如说Vue,该类框架更加。即代码描述的是做事的过程,这样的写法比较符合我们的直觉。原创 2022-12-27 15:16:50 · 1107 阅读 · 0 评论 -
Vuex初探
对于一个数据,如果只是组件内部使用就是用 ref 管理;如果我们需要跨组件,跨页面共享的时候,我们就需要把数据从 Vue 的组件内部抽离出来,放在 Vuex 中去管理。安装完成后,在src/store目录下新建index.js。(2)mutations,修改state中的状态内容。(1)state,保存vuex中的状态。(3)actions,异步修改状态内容。集中式存储管理应用的所有组件的状态。(4)getters,获取状态内容。然后在main.js中进行注册。...原创 2022-08-13 16:32:33 · 157 阅读 · 0 评论 -
Vue3响应式原理
Vue中用过三种响应式解决方案,分别是defineProperty、Proxy和value setter。原创 2022-08-12 22:31:27 · 159 阅读 · 0 评论 -
搭建一个基于Vue3+Vite+TypeScript的项目
最近准备搭建工作室的官方网站,在这里记录一下项目搭建的过程。原创 2022-08-12 21:22:15 · 2599 阅读 · 0 评论 -
Vue3新特性
在Vue2中,响应式只服务于Vue,而在Vue3的组织架构中,响应式独立了出来,Vue3的响应式就和Vue解耦了,你甚至可以在Node.js和React中使用响应式。原创 2022-08-12 20:05:02 · 175 阅读 · 0 评论