![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3
文章平均质量分 71
改行不做程序员了
这个作者很懒,什么都没留下…
展开
-
实现一个vue3相对完善的响应式系统
watch,computed 等。原创 2022-11-23 16:01:28 · 308 阅读 · 0 评论 -
Vue.js设计与实现读书笔记五 第五章 非原始值的响应式方案
(1)主要问题是修改方法push/pop/shift/unshift 会在读取的时候会读取和设置length,如果一个reactive对象有两个effect函数,会造成,第二个修改length的时候,第一个副作用执行,然后又执行第二次副作用函数,然后就会无限循环,直到栈溢出。原因是arr[0]是个对象,所以会被变成深代理,创建一个新代理,而includes中的arr访问的元素也是一个对象,这两个对象不一样,每次使用reactive传的对象都是不一样的,即使参数相同。(3)把数组作为对象,使用for…原创 2022-11-23 14:34:17 · 220 阅读 · 0 评论 -
Vue.js设计与实现读书笔记十四 第十四章 内建组件和模块
KeepAlive的本质是缓存管理,再加上特殊的挂载/卸载逻辑。KeepAlive组件的实现需要渲染器层面的支持。在keepalive组件卸载时我们不能正的将他卸载,KeepAlive的插槽中的组件的Vnode被KeepAlive插入。KeepAlive的instance上有两个函数。原创 2022-09-18 23:05:03 · 158 阅读 · 0 评论 -
Vue.js设计与实现读书笔记十三 第十三章 异步组件与函数式组件
①异步组件是指:异步的加载一个组件并渲染他,是用于分隔代码,服务器下发组件等场景中②函数式组件是指:允许通过一个函数来定义组件,函数的返回值作为渲染的内容,函数组件的特定是无状态(没有data),编写简单直观。③vue3中的函数式组件和普通组件的性能区别不大,而vue2中函数式组件比不同组件性能好。原创 2022-09-18 21:55:23 · 251 阅读 · 0 评论 -
Vue.js设计与实现读书笔记十二 第十二章 组件的实现原理
当页面越来越大,内容越来越多,那么对应的Vnode也会非常多,这时候就需要组件化,组件的好处是可以复用,然后可以将页面拆为多个部分,分别来构建。原创 2022-09-15 22:30:17 · 354 阅读 · 0 评论 -
Vue.js设计与实现读书笔记十一 第十一章 快速Diff算法
如下图:然后让i向上移动,如果source[i]为-1表示这新子节点是。原创 2022-09-02 23:38:04 · 612 阅读 · 0 评论 -
Vue.js设计与实现读书笔记九 第九章 简单Diff算法
这一节要解决的问题,就是第八章的时候比较Vnode新与旧的的子节点,当新与旧的子节点都是一组的情况,之前的方法是直接将所以旧的子节点,调用unmount循环全部卸载掉,这样做会导致性能开销,要先卸载,然后再重新渲染,如果能复用节点,将节省性能,特别是如果子节点变化不大,如果能精准更新旧更好了,这一节,要解决的就是当新子节点中没有,旧子节点有的节点的删除,主要的问题是如何找到旧不可复用的子节点。如图,新子节点p-3对应的可复用的旧子节点的索引最大为2,而新的子节点p-1,p-2都比。原创 2022-09-02 10:59:12 · 250 阅读 · 0 评论 -
Vue.js设计与实现读书笔记八 第八章 挂载与更新
这里使用的是将DOM中绑定一个伪造事件处理函数,说白了,就是在绑定DOM中的会调函数中,使用对象调用真实绑定的函数,当更新的时候,更新这个对象的函数,就实现了事件更新,不用使用removeEventListenner解绑。注意:**当新children和旧的为一组时,这里的代码没有比较,直接将旧的卸载掉,重新渲染新的,如果子节点很多,那么性能肯定不行,vue使用的就是diff算法来解决的 **两者一般是一对一的,但是也有attitudes有的属性,properties没有,也有翻过来的。.........原创 2022-09-01 14:26:42 · 420 阅读 · 0 评论 -
Vue.js设计与实现读书笔记七 第七章 渲染器的设计
这里要解决的问题是,要将操作Dom的逻辑变成参数,提取出来,因为要设计一个多平台的渲染器,操作Dom的逻辑是浏览器专属的.创建dom,为标签插入字符,挂载到Dom上这些逻辑,都由用户传入,const {createElement , insert , setElementText } = options // 挂载 function mountElement(vnode , container) {...原创 2022-08-30 12:00:39 · 217 阅读 · 0 评论 -
Vue.js设计与实现读书笔记六 第六章 原始值的响应式方案
第六章主要讲解的是原始值的响应式方案,reactive,ref,toRef,toRefs之间的关系,以及他们的作用,简单来说,ref是由ractive构建的,toRefs是由toRef构建的。原创 2022-08-30 10:03:52 · 266 阅读 · 0 评论 -
Vue.js设计与实现读书笔记四 第五章 非原始值的响应式方案
(1)之前的代码,都是浅响应,例如:let obj={ test:{title:1}} 当访问obj代理 p访问属性时候,只有p.test能触发副作用函数,p.test.title不能,原因是test只是一个普通对象,(2)了解的浅响应的问题,那么我们可以在收集副作用的时候,判断属性对象是不是一个对象,如果是就递归调用,这样就实现深响应(3)深浅响应是真的属性的深度,原型是指代理对象的原型链,如果原型上的属性也是对象,那么遵循,对象属性上的规则。原创 2022-08-29 15:25:21 · 190 阅读 · 0 评论 -
实现vue3的 reactive,computed和watch
【代码】实现vue的computed和watch。原创 2022-08-29 12:00:25 · 367 阅读 · 0 评论 -
Vue.js设计与实现读书笔记三 第四章响应系统的作用与实现
然后watch内部的effect 使用了lazy,不立刻执行副作用函数, 最后执行effectFn(),获得第一次的旧值,同时触发track收集副作用函数,当监听的值改变,scheduler中执行effectFn()获得新值,执行cb()然后将新值赋值给旧值,这样,下一次改变监听的数据,旧值就是上一次的新值。这个主要是watch监听的数据改变,回调函数如果是异步函数,那么每次数据改变,就会触发异步函数,但是如果确定那个异步函数的结果是我们想要的,这里让最后一个异步函数的结果为最终结果。......原创 2022-08-27 11:16:47 · 189 阅读 · 0 评论 -
Vue.js设计与实现读书笔记二 第四章 响应系统的作用与实现
响应式数据是当对象数据(设置)改变的时候,会执行读取数据的操作,原创 2022-08-25 18:08:44 · 321 阅读 · 0 评论 -
vue3项目打包错误
这个错误似乎是 plugin-legacy 2.0需要 vite 3.0才行。(1)在安装包的时候忽略冲突,安装命令后面加。(2)更新所有的包到,最新,再来解决冲突。第一个报错js,右键点进去,搜索。但是我是这样的也报错。原创 2022-08-22 15:31:51 · 10550 阅读 · 0 评论 -
问题记录1
原因是v-bind,即使这段代码注销了也会报错。原创 2022-08-03 21:47:39 · 2576 阅读 · 1 评论 -
vue3 实现动态切换语言
1)创建一个文件,i18n/index.jsimportmZhLocalefrom'./lang/zh'//中文语言包importmEnLocalefrom'./lang/en'//英语语言包importgetLangfrom"../utilities/BrowserLang"//获取浏览器的语言import{getItem}from"../utilities/Storage"//获取本地存储设置的语言import{en{msg{...原创 2022-07-29 15:37:55 · 2808 阅读 · 0 评论 -
vue3实现网页切换加载组件
在这之前应该让这个组件,提前渲染到页面中如下将它的虚拟dom渲染到body下面。(2)由于这个是切换页面时候的动画,所以要在切换路由的时候,执行这两个方法,这个组件定义两个动画,一个是开动画,加载到90%,一个是加载到100%(1)LoadingBar.vue实现这进度条模板。切换之前1%-90%,切换之后90%-100%(3)当路由切换的时候,调用这两个方法。...原创 2022-07-16 11:11:21 · 719 阅读 · 0 评论 -
Vue.js设计与实现读书笔记一
第一章 权衡的艺术1.什么是声明式和命令式?更新局部数据innerHTML和虚拟DOM 以及原生DOM操作之间的性能对比?=》声明式就是:给参数 然后不用管过程,直接得到结果 命令式:从一步一步从开始到结果, 声明式式命令式的封装命令式:效率高 声明式:维护方便 简单=》innerHTML 跟新数据,是必须跟新全部数据,计算量包括,DOM操作innerHTML原理创建一个fragment(document碎片)将 newHTML 设置到 fragment 内部 (这里怎么设置的不必关心,原创 2022-05-18 19:50:01 · 372 阅读 · 0 评论