vue源码
文章平均质量分 78
南张门
我相信这不是我一个人的经历:傍晚时分,你坐在屋檐下,看着天慢慢地黑下去,心里寂寞而凄凉,感到自己的生命被剥夺了。当时我是个年轻人,但我害怕这样生活下去,衰老下去。在我看来,这是比死亡更可怕的事。
展开
-
vue2.x源码解析二——目录
Vue 因为版本的不同,目录可能会有所区别目录|— dist 打包之后文件所在位置|— examples demo示例|— flow 因为Vue使用了Flow来进行静态类型检查,这里定义了声明了一些静态类型|— packages vue还可以分别生成其它的npm包|— scripts 打包相关的配置文件,里面有build.js,其...原创 2018-06-30 11:16:30 · 590 阅读 · 0 评论 -
vue2.x源码解析四——3.Vue的实例方法
vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProxy // Proxy代理对象 vm._self // 当前vm实例 vm.$parent // 用于自定义子组件中,指向父组件的实例 vm.$root // 指向根vm实例 vm.$children // 当前组件的子组件实例数组 vm.$...转载 2018-07-04 11:18:07 · 335 阅读 · 0 评论 -
vue2.x源码解析五——数据驱动--1.简介
数据驱动Vue.js 一个核心思想是数据驱动。另一个是组件化数据驱动:是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据。它相比我们传统的前端开发,如使用 jQuery 等前端库直接修改 DOM,大大简化了代码量。 特别是当交互复杂的时候,只关心数据的修改会让代码的逻辑变的非常清晰,因为 DOM 变成了数据的映射,我们所有的逻辑都是对数据的修改,而不...原创 2018-07-04 13:45:40 · 248 阅读 · 0 评论 -
原 vue2.x源码解析六——组件化--1.简介
Vue.js 另一个核心思想是组件化,(还有上一章讲的[数据驱动](https://blog.csdn.net/haochangdi123/article/details/80911145))。组件化: 就是把页面拆分成多个组件 (component),每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的,组件在系统内部可复用,组件和组件之间可以...原创 2018-07-04 13:53:50 · 282 阅读 · 0 评论 -
vue2.x源码解析六——组件化--2.createComponent虚拟DOM组件
1.说明我们以Vue-cli 初始化的代码为例,来分析一下 Vue 组件初始化的一个过程。import Vue from 'vue'import App from './App.vue'var app = new Vue({ el: '#app', // 这里的 h 是 createElement 方法 render: h => h(App)})和我们上一章相...原创 2018-07-04 15:43:38 · 827 阅读 · 0 评论 -
vue2.x源码解析六——组件化--3.patch(将虚拟DOM映射为真实DOM)
1.patch通过vue2.x源码解析六——数据驱动,当我们通过 createComponent 创建了组件 VNode,接下来会走到vm._update —> vm.patch –> patch 方法,去把 VNode 转换成真正的 DOM 节点。这个过程我们在前一章已经分析过一个普通的 VNode 节点的path过程,原创 2018-07-05 17:11:12 · 825 阅读 · 0 评论 -
vue2.x源码解析六——组件化--4.实例解析组件的整个映射过程
1.准备工作1.加入断点我们利用断点的方式,一步一步分析,,我们采用的是Runtime+Compiler版本的vue.js,所以我们将debugger插入组件DOM的时候会走createComponent函数function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) { ... ...原创 2018-07-06 11:41:46 · 900 阅读 · 0 评论 -
vue2.x源码解析六——组件化--5.生命周期
1.生命周期Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 首先我们来看一下官网的生命周期图(我自己做了一点点注释): 也可以看我之前的博客 vue生命周期的理解 Vue提供给我们的钩子为上图的红色的文字。生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。 我们现...原创 2018-07-06 17:15:57 · 652 阅读 · 0 评论 -
vue2.x源码解析四——2.Vue的静态方法
// src/core/index.jsVue.version = '__VERSION__'// src/entries/web-runtime-with-compiler.jsVue.compile = compileToFunctions // 把模板template转换为render函数// src/core/global-api 在目录结构中,我们指出,Vue的静态方法...转载 2018-07-04 11:15:14 · 313 阅读 · 0 评论 -
vue2.x源码解析一 —— flow
Vue.js 的源码利用了 Flow 做了静态类型检查,所以我先介绍一下flow。1.flow是什么?Flow 是 facebook 出品的 JavaScript 静态类型检查工具。类型检查是当前动态类型语言的发展趋势,所谓类型检查,就是在编译期尽早发现(由类型错误引起的)bug,又不影响代码运行(不需要运行时动态检查类型),使编写 JavaScript 具有和编写 Java 等强...原创 2018-07-04 10:25:25 · 1449 阅读 · 0 评论 -
vue2.x源码解析五——数据驱动--6.模板和数据如何渲染成最终的 DOM
整个vue2.x源码解析五——数据驱动讲的其实就是模板和数据如何渲染成最终的 DOM,具体的过程如图所示原创 2018-07-02 20:18:41 · 263 阅读 · 0 评论 -
vue2.x源码解析三——源码构建
1.Rollup介绍官网:https://github.com/rollup/rollup Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下。1.2rollup和webpack都是区别webpack更加强大 可以将图片等都便以为css rollup 更适合于js库的编译,只适用于js部分,别的文件是不管的,并且更加友好2.Vu...原创 2018-06-30 11:36:19 · 853 阅读 · 0 评论 -
vue2.x源码解析四——1.入口文件
1.从package.json文件开始由上一节的学习,我们应该已经基本明白了Vue源码的整个构建的基本过程,下面我们来学习和了解Vue的入口文件1.1 npm run dev还是要看根目录下的package.json文件。这里我们只看第一个,也就是npm run dev所执行的命令。"dev": "rollup -w -c scripts/config.js --原创 2018-07-01 13:42:11 · 1039 阅读 · 0 评论 -
vue2.x源码解析准备--Runtime Only 和 Runtime+Compiler
1.了解Runtime Only 和 Runtime+Compiler在我们使用vue-cli的时候,会提示你安装的版本 可以看到有两种版本: Runtime Only 版本 和 Runtime+Compiler 版本1.1 Runtime Only我们在使用 Runtime Only 版本的 Vue.js 的时候,通常需要借助如 webpack 的 v...原创 2018-07-01 16:03:57 · 5659 阅读 · 2 评论 -
vue2.x源码解析准备--对源码进行debugger
1.debugger源代码我们学习vue源码采用的是Runtime+Compiler的版本 当我们vue-cli创建完成后build/webpack.base.conf.js中resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', ...原创 2018-07-01 16:05:54 · 1423 阅读 · 0 评论 -
vue2.x源码解析五——数据驱动--2.new Vue发生了什么
1.实现小小的例子我们使用vue-vli创建基于Runtime+Compiler的vue脚手架<div id="app"> <p>{原创 2018-07-01 17:15:00 · 490 阅读 · 0 评论 -
vue2.x源码解析五——数据驱动--3.Vue 实例挂载的实现
1.挂载到DOM在上一节中我们知道,在Vue初始化的最后是挂载到DOM上的。src/core/instance/init.js : 在初始化的最后,检测到如果有 el 属性,则调用 vm.$mount 方法挂载 vm,挂载的目标就是把模板渲染成最终的 DOM if (vm.$options.el) { vm.$mount(vm.$options.el) }...原创 2018-07-02 12:18:01 · 564 阅读 · 0 评论 -
vue2.x源码解析五——数据驱动--4.render
1.连接上一节在上一节中我们提到了在src/core/instance/lifecycle.js 中通过渲染Watcher实时去监测调用updateComponent方法,从而实现的页面实时渲染,vm._render()主要是生成的VNode(虚拟DOM),下面我们来讲一讲vm._render()方法的实现updateComponent = () => { vm._upd...原创 2018-07-02 18:50:14 · 1494 阅读 · 0 评论 -
vue2.x源码解析五——数据驱动--5.update
1.连接上一节在上一节中我们提到了在src/core/instance/lifecycle.js 中通过渲染Watcher实时去监测调用updateComponent方法,从而实现的页面实时渲染,vm._render()主要是生成的VNode(虚拟DOM),下面我们来讲一讲 vm._update方法的是如何实现数据渲染和更新的updateComponent = () => { ...原创 2018-07-02 20:16:26 · 500 阅读 · 0 评论 -
vue2.x源码解析六——组件化--6.组件注册
1.组件注册在 Vue.js 中,除了它内置的组件如 keep-alive、component、transition、transition-group 等,其它用户自定义组件在使用前必须注册。如果不注册报错信息:'Unknown custom element: <xxx> - did you register the component correctly? For re...原创 2018-07-06 18:22:30 · 795 阅读 · 0 评论