vue相关
文章平均质量分 62
vue相关
路人i++
这个作者很懒,什么都没留下…
展开
-
Vue源码分析拓展 - Vue 模板编译渲染函数原理分析
render function —touch【依赖收集】—>getter。generate:针对不同目标平台生成的代码。optimize:静态节点优化。patch():更新数据,新老旧DOM对比,【组件映射成真实DOM中间起桥接作用】了。这三个阶段以后,组件中就会存在渲染。【不会改变的一些结构】new Vue():初始化。compile():编译。Watcher:观察数据。字符串的过程,得到结果是。DOM :映射到DOM。三个阶段,最终需要得到。【虚拟DOM】所需的。原创 2023-07-14 23:00:00 · 227 阅读 · 0 评论 -
Vue源码分析拓展 - 响应式系统搭建
当你把一个普通的JavaScript对象传入Vue实例作为data选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter.每个组件实例都对应一个watcher实例,它会在组件渲染的过程中把”接触“过的数据属性记录为依赖。这些getter/setter.对用户来说是不可见的,但是在内部他们让Vue能够追踪依赖,在属性被访问和修改时通知变更。献上一张AI生成图~原创 2023-07-13 06:15:00 · 112 阅读 · 0 评论 -
Vue源码分析拓展 - Vue生命周期钩子函数执行原理分析
每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。比如created钩子可用用来在一个实例被创建之后执行代码,也有一些其它的钩子,在实例生命周期的不同阶段被调用,如mounted、updated和destroyed。生命周期钩子的this上下文指向调用它的Vue实例。原创 2023-07-12 06:30:00 · 133 阅读 · 0 评论 -
Vue生态及实践 - Nuxt
nuxt-帮助我们更快的实现ssr的同构。原创 2023-07-11 06:15:00 · 173 阅读 · 0 评论 -
Vue生态及实践 - SSR(下)
SSR(ServerSideRender)服务器端渲染SSR(Server Side Render)原创 2023-07-10 22:00:00 · 187 阅读 · 0 评论 -
Vue生态及实践 - SSR(上)
目录目标理论Rendering你真的需要SSR亦或是同构吗?同构实践通用代码 同构第一步:避免单例src/app.js src/store.jssrc/router.js同构第二步:Server entry【服务端进入】;Client entry【客户端进入】src/entry-server.jssrc/entry-client.js同构第三步:打包部署build/webpack.client.config.jsbuild/webpack.server.config.jspackage.jsoncreate原创 2023-07-09 21:15:00 · 587 阅读 · 1 评论 -
Vue生态及实践 - 优化实践
可以缓存router-view。keep alive缓存组件。原创 2023-07-08 22:45:00 · 163 阅读 · 0 评论 -
Vue生态及实践 - 配置中心
分享的文章多是学习过程中记录的coding && 笔记~本文主要是关于项目配置的内容原创 2023-07-07 23:00:00 · 247 阅读 · 0 评论 -
Vue生态及实践 - 项目实践
实现一个掘金列表小应用。原创 2023-07-06 21:30:00 · 221 阅读 · 0 评论 -
Vue生态及实践 - Vue Router(2)
接上一篇文章~,代码部分会有部分重叠,想看完整版的代码,看这篇文章的~ vue router原创 2023-07-05 06:45:00 · 88 阅读 · 0 评论 -
Vue生态及实践 - Vue Router(1)
当url中的hash改变时页面不会刷新,但是会触发onhashchange事件。路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动。如:http://www.baidu.com#/hash【#/hash】在单页面应用中路由开始由后端走向前端,前端需要自己管理路由了。随着ajax技术的普及页面无刷新,有了更好的用户体验。传统web开发路由是后端控制的。监听浏览器History变化。指url中#开始到后面的部分。原创 2023-07-04 23:00:00 · 167 阅读 · 0 评论 -
Vue生态及实践 - vuex
目标Vue2.0是单向数据流的。原创 2023-06-29 22:15:00 · 197 阅读 · 0 评论 -
vue阶段 总结
封装副作用依赖副作用(依赖reactive值变化时的trigger->触发副作用)【trigger是watch的副作用】尽量用watch,不用watchEffect。原创 2023-07-03 06:45:00 · 34 阅读 · 0 评论 -
vue3原理和源码分析 - TS vue类型补充
Types.tsx、VNode、属性类型、Ref/Reactive类型、watch的类型、事件类型 / DOM原创 2023-07-02 21:30:00 · 456 阅读 · 0 评论 -
vue3原理和源码分析 - watch 源代码
【代码】vue3原理和源码分析 - watch 源代码。原创 2023-07-01 21:30:00 · 243 阅读 · 0 评论 -
vue3原理和源码分析 - reactive 源代码
学习封装技巧。原创 2023-06-30 22:45:00 · 127 阅读 · 0 评论 -
vue3原理和源码分析 - ref源代码
【代码】vue3原理和源码分析 - ref源代码。原创 2023-06-28 22:15:00 · 130 阅读 · 0 评论 -
vue3原理和源码分析 - Reactivity原理
什么地方用到reactive值,这个地方如有副作用,reactive值更新时,就会触发这个副作用依赖时副作用副作用时函数setup() {原创 2023-06-27 22:30:00 · 261 阅读 · 0 评论 -
vue3原理和源码分析 - VirtualDOM和DOMDIFF
为什么更新被称作patch(补丁)?这种增量更新的模式我们称为补丁,热更新为什么不用动态规划(O(n^3))算法?我们需要domDiff速度非常快,动态规划虽然会比对出最小更新,但是在比对时间上太耗时了,我们不一定要最小更新,比对时间+更新时间的最小值才是我们要的。原创 2023-06-24 13:15:00 · 320 阅读 · 0 评论 -
vue3实战技巧 - Vite和项目结构
vue3脚手架 Vite。原创 2023-06-22 06:15:00 · 444 阅读 · 0 评论 -
vue3实战技巧 - 封装筛选、表格和请求逻辑
【代码】vue3实战技巧 - 封装筛选、表格和请求逻辑。原创 2023-06-20 22:00:00 · 249 阅读 · 0 评论 -
vue3实战技巧 - 封装DOM事件
【代码】vue3实战技巧 - 封装DOM事件。目标:封装一个Draggable组件封装Draggable组件为更多组件提供拖拽能力原创 2023-06-18 20:00:00 · 110 阅读 · 0 评论 -
vue3实战技巧 - 组件的封装
追求的是语义上的完美。原创 2023-06-17 14:45:00 · 3746 阅读 · 0 评论 -
vue3的api解读 - ref和expose
父子组件交互能力。原创 2023-06-16 21:00:00 · 232 阅读 · 0 评论 -
vue3的api解读-生命周期钩子
钩子是一种消息机制:例1:GIT的Webhooks例2:杀毒软件在操作系统中注入的hook例3:React的Hooks。原创 2023-06-12 21:45:00 · 626 阅读 · 0 评论 -
vue3的api解读-provide inject
Context(上下文),是实体间共享的知识。举例1:this指针举例2:浏览器执行环境中的window对象举例3:前端系统的全局用户登录状态。原创 2023-06-11 11:00:00 · 389 阅读 · 0 评论 -
vue3的api解读-effect scope
英文:范围举例:变量的可见范围(variable scope)举例:闭包内变量的可见范围是词法作用域(lexical scope)举例:slot-scope绑定的变量的可见范围是template内部。原创 2023-06-09 21:30:00 · 745 阅读 · 0 评论 -
vue3的api解读-computed
思考2:如果vue3不提供computed,我们自己可以实现吗?很困难,不好写,我们需要知道所有的依赖【watch这个依赖】,进行缓存。思考1:什么时候用computed?当有昂贵的计算时,当有1w+个数据需要排序时。原创 2023-06-07 21:15:00 · 580 阅读 · 0 评论 -
vue3的api解读-watch
根据数据变化,触发副作用。watch,watchEffect原创 2023-06-06 22:21:00 · 467 阅读 · 0 评论 -
vue3的api解读-ref和reactive
Reactive【响应式,这个组件,这个值,在任何时候,像人一样,有主动思维,知道怎么响应外部的环境,知道怎么去做】拥抱函数式,没有办法显式的提供依赖,我们不确定值,setup时候知道,但是render渲染时候,没有办法给它依赖了。Observable【设计模式,架构手段,就是去观察可以被观察的东西】原创 2023-05-29 21:45:00 · 658 阅读 · 0 评论 -
vue3的api解读-VUE Reactivity
Reactivity是Vue3新加的一个库,新的package。原创 2023-05-27 09:45:00 · 756 阅读 · 0 评论 -
Vue3.x的设计理念-Vue3导读
类型响应环境变化发生变化,类型不关心谁响应,只是向外暴露自己的变化(事件)观察者模式【不耦合】原创 2023-05-26 21:00:00 · 2091 阅读 · 1 评论 -
Vue3.x的设计理念-Vue3介绍
描述业务逻辑,描述组件交互最好的方式就是 program,就是程序本身,没有之一。【推荐以后写JSX】前端必须有副作用(Effect),不然没法跳转页面、发起支付请求......VUE3是数据到视图的映射,以及副作用封装的一个框架,专注渲染的框架。js+html混合的方式更能够提高我们设计复杂组件的抽象能力。告别你所学过的vue知识,拥抱函数式。程序可以被预测,说明程序写的健壮。单论vue的视图渲染是一种纯函数。更符合人类直觉的设计。(展示性数据和操作)原创 2023-05-25 20:45:00 · 83 阅读 · 0 评论 -
深入Vue源码分析-computed & watch 源码分析
watch:有3个参数。会返回一个停止监听函数。原创 2023-05-24 21:30:00 · 904 阅读 · 0 评论 -
深入Vue源码分析-Diff Patch【算法】分析
2.Diff Patch实现【vue2.0中并没有一个完整的patch过程它的节点操作是在diff过程中同时进行的,也是通过这样一种形式vue在增删改查dom节点的效率】只对相同类型节点做对比,类型不同,直接创建新节点替换旧节点【哪怕它的子组件和原来一样,也仍需重新创建】1.Virtual Dom 【虚拟DOM】【不只是做性能优化,它是分层思想的体现】Virtual Dom提高了开发效率【省却了我们增删改查的操作】,而非应用性能。给每个值设置一个key,可以提升diff的效率。2.按类型进行diff。原创 2023-05-23 21:15:00 · 44 阅读 · 0 评论 -
深入Vue源码分析-异步更新队列(nextTick)源码分析
异步渲染队列。原创 2023-05-22 09:15:00 · 60 阅读 · 0 评论 -
深入Vue源码分析-响应式源码分析
let x;let y;x=1;y=f(x);// 200x=2;y=f(x);// 300x=3;y=f(x);// 400// 三份重复的样板代码;// 【都三遍了,不要重复你自己——>自动化——>解放自己、提升自我——>多陪陪家人】// x的值修改,通过f(x)映射到y上;初级进化思路let x;let y;// 监听x变化,执行回调:y值映射y = f(x);})x = 1;// 400。原创 2023-05-21 13:15:00 · 143 阅读 · 0 评论 -
探索Vue的组件世界-组件复用
函数接收一个组件作为参数,并返回一个新组件;可复用的逻辑在函数中实现。高阶函数的应用,装饰者模式的一种实现。左面子组件,右面是复用逻辑。原创 2023-05-20 13:15:00 · 1080 阅读 · 0 评论 -
探索Vue的组件世界-实现Vue插件
一个好的框架满足几大设计原则:开闭原则:对修改源码关闭,对功能扩展开放vue作为一个优秀的组件框架:满足开闭原则,提供良好的插件机制,以提供三方来扩展功能。原创 2023-05-19 08:30:00 · 324 阅读 · 0 评论 -
探索Vue的组件世界-组件通信
this.$parent 和this.$root会造成强耦合,不易于复用,如上图,同一个组件在不同父组件中使用,报错了。一级一级往上找直到找到name === componentName,把消息传过去。声明了当前组件依赖的父组件们(直系的祖宗)的外部prop有哪些。由此,为了解决这个问题引入了。Element-UI二次封装。原创 2023-05-18 08:30:00 · 226 阅读 · 0 评论