一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6.updated,7.beforeDestroy,8.destroyed. 用官方的一张图就可以清晰的了解整个生命周期: Vue最新源码下载:地址 二:源码分析 1.先看new Vue实例的方法 创建Vue实例的文件是: src/core/instance/index.js function Vue…

上一篇 文章 了解了Vue.js的生命周期.这篇分析Observe Data过程,了解Vue.js的双向数据绑定实现原理. 一.实现双向绑定的做法 前端MVVM最令人激动的就是双向绑定机制了,实现双向数据绑定的做法大致有如下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化,我…

  Vue是数据驱动的框架,在修改数据时,视图会进行更新.数据响应式系统使得状态管理变的简单直接,在开发过程中减少与DOM元素的接触.而深入学习其中的原理十分有必要,能够回避一些常见的问题,使开发变的更为高效. 一.实现简单的数据响应式系统   Vue使用观察者模式(又称发布-订阅模式)加数据劫持的方式实现数据响应式系统,劫持数据时使用 Object.defineProperty 方法将数据属性变成访问器属性.Object.defineProperty 是 ES5 中一个无法 shim 的特性,…

  Vue本质是上来说是一个函数,在其通过new关键字构造调用时,会完成一系列初始化过程.通过Vue框架进行开发,基本上是通过向Vue函数中传入不同的参数选项来完成的.参数选项往往需要加以合并,主要有两种情况: 1.Vue函数本身拥有一些静态属性,在实例化时开发者会传入同名的属性. 2.在使用继承的方式使用Vue时,需要将父类和子类上同名属性加以合并.   Vue函数定义在 /src/core/instance/index.js中. function Vue (options) { if (pr…

又看完一遍中文社区的教程接下来开始做vue2.0的源码解读了! 注:解读源码时一定要配合vue2.0的生命周期和API文档一起看 vue2.0的生命周期分为4主要个过程 create. 创建---实例化Vue(new Vue) 时,会先进行create. mount.挂载---根据el, template, render方法等属性,会生成DOM,并添加到对应位置. update.更新---当数据发生变化后,更新DOM. destory.销毁---销毁时执行. 接下来再看看生命周期图是不是很明朗呢…

  在阅读 nextTick 的源码之前,要先弄明白 JS 执行环境运行机制,介绍 JS 执行环境的事件循环机制的文章很多,大部分都阐述的比较笼统,甚至有些文章说的是错误的,以下为个人理解,如有错误,欢迎指正. 一.浏览器中的进程与线程   以 chorme 浏览器为例,浏览器中的每个页面都是一个独立的进程,在该进程中拥有多个线程,通常有以下几个常驻线程: 1.GUI 渲染线程 2.JavaScript引擎线程 3.定时触发器线程 4.事件触发线程 5.异步http请求线程   GUI 渲染线程…

vm._render是怎么实现的 上述updateComponent方法调用是运行了一个函数: // src\core\instance\lifecycle.js updateComponent = () => { vm._update(vm._render(), hydrating) } 其中会先运行vm._render函数,那么vm._render函数又是从哪里定义的呢?我们回到src\core\instance\index.js,这里一开始会运行renderMixin方法,而renderM…

准备 一.首先去GitHub上把vue源码download下来,传送门:https://github.com/vuejs/vue 二.搭建一个vue-cli跑起来,用于代码调试,不看着代码动起来只看源码是没效果的,运行代码在node_modules\vue\dist\vue.runtime.esm.js中. 数据驱动 什么是数据驱动?数据驱动对我们又有什么帮助呢? Vue.js 一个核心思想是数据驱动.所谓数据驱动,是指视图是由数据驱动生成的,对视图的修改,不会直接操作 DOM,而是通过修改数据…

合并配置 通过之前的源码学习,我们已经了解到了new Vue主要有两种场景,第一种就是在外部主动调用new Vue创建一个实例,第二个就是代码内部创建子组件的时候自行创建一个new Vue实例.但是无论那种new Vue方式,我们都需要进入了Vue._init,执行mergeOptions函数合并配置.为了更直观,我们整个demo调试耍耍. // src\main.js let childComp = { template:"<div>{{msg}}</div>"…

组件化 组件化是vue的另一个核心思想,所谓的组件化就,就是说把页面拆分成多个组件(component),每个组件依赖的css.js.图片等资源放在一起开发和维护.组件是资源独立的,在内部系统中是可以多次复用的,组间之间也是可以互相嵌套的. 接下来我们用vue-cli为例,来分析一下Vue组件是如何工作的,还是它的创建及其工作原理. import Vue from 'vue' import App from './App.vue' var app = new Vue({ el: '#app',…