1. 安装node.js 2. cd到项目目录下 3. npm run serve Node.js下载与安装(npm) Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. JavaScript本来只能跑在浏览器上,然后Node.js就 是一种能让js直接运行在操作系统的工具.并且它就能够让JS代码在操作系统上实现一些类似文件操作等功能. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. npm 是JavaScript 世界的包管

Vue源码探究-事件系统 本篇代码位于vue/src/core/instance/events.js 紧跟着生命周期之后的就是继续初始化事件相关的属性和方法.整个事件系统的代码相对其他模块来说非常简短,分几个部分来详细看看它的具体实现. 头部引用 import { tip, toArray, hyphenate, handleError, formatComponentName } from '../util/index' import { updateListeners } from '../

分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$watchapi. 所以决定看一下vue的源码, 了解vue是如何实现响应式数据. 本文叙事方式为树藤摸瓜, 顺着看源码的逻辑走一遍, 查看的vue的版本为2.5.2. 目的 明确调查方向才能直至目标, 先说一下目标行为: vue中的数据改变, 视图层面就能获得到通知并进行渲染. $watchapi监

Vue 源码解析 Vue 的工作机制 在 new vue() 之后,Vue 会调用进行初始化,会初始化生命周期.事件.props.methods.data.computed和watch等.其中最重要的是通过Object.defineProperty设置setter和getter,用来实现响应式和依赖收集. 初始化之后,调用 $mount 挂载组件. 启动编译器compile(),对template进行扫描,parse.optimize.generate,在这个阶段会生成渲染函数或更新函数,ren

用了Vue很久了,最近决定系统性的看看Vue的源码,相信看源码的同学不在少数,但是看的时候却发现挺有难度,Vue虽然足够精简,但是怎么说现在也有10k行的代码量了,深入进去逐行查看的时候感觉内容庞杂并且搞不懂代码的目的,同时网上的深入去仔细阐述Vue的compile/link/ expression parse/依赖订阅和收集/batcher的文章却不多,我自己读源码时,深感在这些环节可供参考的资料稀缺.网上较多的文章都在讲getter/setter.Mutation Observer和LRU缓

上一篇是mount之前的添加一些方法,包括全局方法gloal-api,XXXMixin,initXXX,然后一切准备就绪,来到了mount阶段,这个阶段主要是 解析template 创建watcher并存入Dep 更新数据时更新视图 Vue源码里有两个mount 第一个 // src/platform/web/runtime/index.js Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean

一. vue源码 我们安装好vue以后, 如何了解vue的的代码结构, 从哪里下手呢? 1.1. vue源码入口 vue的入口是package.json 来分别看看是什么含义 dependences: "dependencies": { "vue": "^2.5.2" }, 这段代码告诉我们vue的版本: 2.5.2 engines "engines": { "node": ">= 6.0.

当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog,欢迎 Watch 和 Star. 简介 专栏的第一篇,主要介绍专栏的目的.规划.适用人群,以及准备工作和扫盲的基础知识. 前言 最近在准备一些 Vue 系列的文章和视频,之前 Vue 的源码也读过好几遍,但是一直没写相关的文章,所以最近就计划写一写. 目标 精通 Vue 技术栈的源码原理,这是这系

文章地址:http://www.hcoding.com/?p=46 上一篇分析Symfony2框架源码,探究Symfony2如何完成一个请求的前半部分,前半部分可以理解为Symfony2框架为处理请求做准备工作,包括container生成.缓存.bundls初始化等一些列准备工作(Symfony2源码分析——启动过程1).而这一篇讲的是Symfony2如何根据请求的数据生成Response对象,向客户端返回响应数据. 在分析前需要了解Symfony2的事件驱动机制:Symfony2事件驱动. 言

VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后出不来~ 从package.json文件知道我们在执行命令npm run dev(只是以dev为例prod一样) 对应的是config.js文件里面的web-full-dev,然后找到config.js文件 config.js 'web-full-dev': { entry: resolve('we

其实吧,写这些后记我才真正了解到vue源码的精髓,之前的跑源码跟闹着玩一样. go! 之前将AST转换成了render函数,跳出来后,由于仍是字符串,所以调用了makeFunction将其转换成了真正的函数: function compileToFunctions(template, options, vm) { // code... // compile var compiled = compile(template, options); // code... // 转换render res.

vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过一下~ 想到什么写什么了,这节就简单说说钩子函数吧! vue中的钩子函数主要包含初始化的beforeCreated/created,Virtual Dom更新期间的beforeUpdate/updated,页面渲染期间的beforeMount/mounted,组件销毁期间的beforeDestroy

阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的最对脾气的 MVVM 框架.之前也使用过 knockout,angular,react 这些框架,但都没有让咱产生 follow 的冲动.直到见到 Vue,简直是一见钟情啊. Vue 的官方文档已经对 Vue 如何使用提供了最好的教程,建议 Vue 新手直接去官网学习,而不要在网上找些质量参差不齐的

阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先把它干掉. 编译器代码藏在哪 前面已经提到,Vue 项目中的 entry-runtime.js 文件是 Vue 用于构建 仅包含运行时 的源码文件,而 entry-runtime-with-compiler.js 是用于构建 同时包含编译器和运行时 的全功能文件.因此两个文件的差集必然就是编译器实现

阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST 的具体过程.这对 Vue 的使用通常没什么帮助,但熟悉这个过程会对 Vue 的内部工作原理有更清晰的认识. 主代码位置:Vue 项目的 src/compiler/parser/html-parser.js 文件. AST 节点定义 AST 是由一个个节点组成的,正如 DOM 树是由 DOM 节点组成

阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 Vue 源码做简化处理,探究 Vue 是如果根据 AST 生成所需要的 render 函数的. 优化 AST 优化 AST 的目的是优化整体性能,避免不必要计算.比如那些不存在数据绑定的节点,即纯静态的(purely static)在更新视图时根本不需要改变,因此在数据批处理,页面重渲染时可直接跳

阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 Vue 源码做简化处理,探究 Vue 是如果根据 AST 生成所需要的 render 函数的. 优化 AST 优化 AST 的目的是优化整体性能,避免不必要计算.比如那些不存在数据绑定的节点,即纯静态的(purely static)在更新视图时根本不需要改变,因此在数据批处理,页面重渲染时可直接跳

阅读目录 Vue 实例的生命周期 实例创建 响应的数据绑定 挂载到 DOM 节点 结论 研究 runtime 一边 Vue 一边源码 初看 Vue 是 Vue 源码是源码 再看 Vue 不是 Vue 源码不是源码 再再看 Vue 是调用栈 源码也是调用栈 -- By DOM哥 Vue 运行时这一块是非常有意思的,不像 Vue 编译器那么枯燥,这里面有大量的实用技巧和设计思想可以学习.使用过 Vue 的小伙伴应该对 Vue [响应的数据绑定](也叫双向绑定)的印象非常深刻,在修改了数据之后,视图就

开发vue项目有段时间了, 之前用angularjs 后来用 reactjs 但是那时候一直没有时间把自己看源码的思考记录下来,现在我不想再浪费这 来之不易的思考, 我要坚持!! 看源码我个人感觉非常开心,每每看上一段,自己就充实许多,不知道你是否和我一样. vue 源码是众多module(模块)用 rollup 工具合并而成, 从package.json 中能够看到.现在让我们从github上下载vue项目,开始我们今天的"思考". 我下载的源码版本是: "version&

Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一些疑问,可能官网上只会建议你这么做,但是核心实现我们可能并不知道.比如: v-for key 是如何达到"就地复用"策略 数组更新检测是如何完成的 set 为什么就能动态添加根级别的响应式属性 为什么Vue可以跨平台支持weex,以及后来出现的mpvue ... 其次,很久没有更新内容了,

Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一些疑问,可能官网上只会建议你这么做,但是核心实现我们可能并不知道.比如: v-for key 是如何达到"就地复用"策略 数组更新检测是如何完成的 set 为什么就能动态添加根级别的响应式属性 为什么Vue可以跨平台支持weex,以及后来出现的mpvue ... 其次,很久没有更新内容了,