迷你版Vue--学习如何造一个Vue轮子

isLishude 发布于2019-08-23 14:17 / 1674人阅读

摘要：项目地址和的区别其实和最大的区别就是多了一个虚拟，其他的区别都是很小的。

项目地址

Vue1和Vue2的区别

其实Vue1和Vue2最大的区别就是Vue2多了一个虚拟DOM，其他的区别都是很小的。所以理解了Vue1的源码，就相当于理解了Vue2，中间差了一个虚拟DOM的Diff算法

文档

数据双向绑定

Vue主流程走向

组件

nextTick异步更新

MVVM

先来科普一下MVVM的概念及原理

配套插件

mini-vuex

实现一个迷你版的vue 实现的功能 全局方法

// 继承MiniVue 产生一个新的子类构造函数
MiniVue.extend
// 在实例化过程完成后运行
MiniVue.nextTick
// 注册自定义指令
MiniVue.directive
// 过滤器
MiniVue.filter 
// 组件 包括slot props
MiniVue.component
// 插件
MiniVue.use
// 混入
MiniVue.mixin

mixin filter component也可以局部注册在new一个实例时提供以下选项即可

filters
components
mixin

实例方法

vm.$watch
vm.$set
vm.$delete
vm.$on
vm.$once
vm.$off
vm.$emit
vm.$nextTick

指令

v-text
v-html
v-show
v-if
v-else
v-for
v-on
v-bind
v-model

计算属性

计算属性用法也和Vue一样

生命周期

init
created
beforeCompiled
compiled
destroyed

以上实现的功能用法和Vue一模一样 如何阅读源码

阅读源码要带有目的去看不能毫无目的的去看源码以免掉进无尽的细节陷阱中而出不来

Vue源码要怎么看呢

建议从一个Vue实例化的过程开始一直跟踪这条主线直到结尾为止(一定要打断点 debugger 我打了100多个断点才看懂主流程) 各种分枝暂时不要管等把主线理解清楚了细枝末节自然不在话下

Vue1.0模块

在Vue主线里和数据双向绑定有关的有以下几个模块

Vue构造函数

观察者observer

观察者watcher

指令系统 directive类和directives指令函数集合

DOM解析compile

watcher与observer之间的联系者dep

我们来看看他们之间的关系

如果不是想自己实现一个mvvm框架 Vue的源码不用细读只要明白主线的运行过程就行了想要熟练使用Vue看官方文档即可

想了解主线流程的可以看看我的v0.1版本 300行代码完整的实现了双向数据绑定的流程还有3条指令的实现过程其实其他的指令即使没实现也没什么关系主流程明白即可

MiniVue v0.1

学习Vue源码推荐看这篇文章

GPU云服务器云服务器 vue安卓版 vue3 学习笔记 (五)——vue3 阿里云服务器如何部署vue 造轮子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100405.html

用Vue自己造个组件轮子，以及实践背后带来的思考

摘要：用造个组件轮子吧闰土大叔如果你掌握了的组件知识，相关的指令事件，花点时间你也可以造出这么个入门级的小轮子。接下来，抛出造轮子实践背后带来的一些思考。以上三部分内容构成了的整个执行过程。 showImg(https://segmentfault.com/img/bV1Tnu?w=754&h=500); 前言首先，向大家说声抱歉。由于之前的井底之蛙，误认为Vue.js还远没有覆盖到二三线...

icyfire 2019-08-22 13:45 评论0 收藏0
前端--通用知識 - 收藏集 - 掘金

摘要：闭包有多重前端知识点大百科全书前端掘金，，技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 Vue全家桶实现还原豆瓣电影wap版 - 掘金用vue全家桶仿写豆瓣电影wap版。最近在公司项目中尝试使用vue，但奈何自己初学水平有限，上了vue没有上vuex，开发过程特别难受。于是玩一玩本项目，算是对相关技术更加熟悉了。原计划仿写完所有页面，碍于豆瓣的接口API有限，实现页面也有...

王笑朝 2019-08-20 16:57 评论0 收藏0
作为前端开发，如何写好一个简历

摘要：项目地址需求来源通常在各个招聘网站，我们填写完一些信息后，网站就可以帮助我们生成一个很不错的简历。但是作为一名开发者，尤其是前端开发者，可能对这种简历并不满意。，前端开发神器。最后，为了保护隐私。背景前一阵子，闲下来便开始着手做一个一直想做的东西--resume。经过几天业余时间的折腾，终于做出了一番模样。Github项目地址：https://github.com/eternity...

abson 2019-08-29 11:14 评论0 收藏0