
vue内部实现原理分析
文章平均质量分 81
话不多说,上车!
恪愚
江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源;曾参与过中大型微信小程序项目前端开发,并主导过一些官网(原生)开发;着迷于vue、node、css以及原生js技术。热衷研究现有技术的成型创新应用。目前对前端可视化和webRTC、web安全有浓厚的兴趣。开源且目前维护的有:微信小程序扩展组件库—— https://github.com/1314mxc/yunUI ,欢迎star!
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue3中的vue-router简单实现以及router变迁带来的思考
jQuery 以及之前的时候,前端工程师并不需要了解路由的概念。对于每次的页面跳转,都由后端开发人员来负责重新渲染模板。前端依赖后端,并且前端不需要负责路由的这种开发方式,这样开发速度会很快、后端也可以承担部分前端任务等。当然,这种开发方式也有很多缺点,比如前后端项目无法分离、页面跳转由于需要重新刷新整个页面、等待时间较长等等,所以也会让交互体验下降。为了提高页面的交互体验,很多前端工程师做了不同的尝试。在这个过程中,前端的开发模式发生了变化,项目的结构也发生了变化:由原先的访问路由 -> 后端匹原创 2021-12-11 19:39:15 · 3183 阅读 · 0 评论 -
vue源码解析之『我的数据去哪了』
之前学习vue的时候就对$set很感兴趣,但奈何一直都是“小打小闹”,本以为莫非这玩意根本用不到而渐渐淡忘没想到最近项目中接二连三的出现类似的问题让我不得不重视起来。决心探探这“小雷音寺”。见微知著:new Vue()时都做了什么?首先找到vue的构造函数function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vu原创 2021-10-13 19:39:46 · 4541 阅读 · 1 评论 -
探索vue自定义指令的玄妙
自定义指令的语法Vue自定义指令语法如下:Vue.directive(id, definition)传入的两个参数,id是指指令ID,definition是指定义对象。其中,定义对象可以提供一些钩子函数:钩子函数定义对象的钩子函数如下:bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)update:被绑定元素所在的模板更新时调用,而不论绑定原创 2021-06-18 19:46:22 · 2019 阅读 · 0 评论 -
“别具一格”的vue双向数据绑定原理
背景和一点点看法见网上许多文章讲vue双向数据绑定一开口就大谈 Object.defineProperty 和 proxy。其实不然。vue 中有两个“特别的”概念:响应式(它和defineProperty有关)和双向数据绑定。其实响应式原理是一种单向行为:它是数据到 DOM (也就是view视图)的映射;而真正的双向绑定,除了数据变化会引起 DOM 的变化之外,还应该在操作 DOM 改变后反过来影响数据的变化!vue 中提供了(内置的) v-model指令实现双向绑定。v-model和双向绑定原创 2021-05-31 14:30:42 · 3212 阅读 · 6 评论 -
vue原理及运行机制(番外篇)
上下两篇为了“语义的连贯性”,其实说的东西并不多,这一节来补充一下一些同样重要的知识点:前文链接:剖析vue原理及运行机制(上)剖析vue原理及运行机制(下)专栏链接(免费的)Vue内部原理及运行机制如何“优雅地”实现一个VNodeVNode归根结底就是一个JavaScript对象,只需这个类的一些属性可以正确直观地描述清楚当前节点的信息即可:class VNode{ c...原创 2019-12-30 20:16:11 · 808 阅读 · 0 评论 -
剖析vue原理及运行机制(下)
上文链接:剖析vue原理及运行机制(上)专栏链接(免费):vue内部实现原理分析让我们跨过一切,来看一个很重要的知识点:批量异步更新——nextTick原理回顾前面一堆知识点,我们大概已知晓Vue是如何在我们修改data后修改视图了:这其实是一个 setter - Dep - Watcher - patch - 视图 的过程现在假设有如下情况:<templete> ...原创 2019-12-30 17:18:32 · 692 阅读 · 0 评论 -
剖析vue原理及运行机制(上)
这是笔者最近一段时间的学习收获,笔者历时半天将其整理成文,以便日后复习,也可能对各位有些许帮助。文章稍长,但绝对精粹。也算是笔者为各位献上的一份“元旦大礼”吧~~(因文章过长,故将其整理为上、下两篇,之间连续贯通)Vue运行机制全局预览初始化及挂载在new了vue之后,Vue会调用_init函数进行(全局)初始化。初始化生命周期、事件、props、methods、data、comput...原创 2019-12-30 09:40:46 · 1635 阅读 · 0 评论