Vue.js源码（1）：Hello World的背后

2024-08-27 13:18
文章标签 javascript 源码 vue js frontend hello world 背后

本文主要是介绍Vue.js源码（1）：Hello World的背后，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

下面的代码会在页面上输出Hello World，但是在这个new Vue()到页面渲染之间，到底发生了什么。这篇文章希望通过最简单的例子，去了解Vue源码过程。这里分析的源码版本是Vue.version = '1.0.20'

<div id="mountNode">{{message}}</div>
var vm = new Vue({el: '#mountNode',data: function () {return {message: 'Hello World'};}
});

这篇文章将要解决几个问题：

  1. new Vue()的过程中，内部到底有哪些步骤

  2. 如何收集依赖

  3. 如何计算表达式

  4. 如何表达式的值如何反应在DOM上的

简单来说过程是这样的：

  1. observe: 把{message: 'Hello World'}变成是reactive的

  2. compile: compileTextNode "{{message}}"，解析出指令(directive = v-text)和表达式(expression = message)，创建fragment(new TextNode)准备替换

  3. link：实例化directive，将创建的fragment和directive链接起来，将fragment替换在DOM上

  4. bind: 通过directive对应的watcher获取依赖(message)的值("Hello World")，v-text去update值到fragment上

详细过程，接着往下看。

构造函数

文件路径：src/instance/vue.js

function Vue (options) {this._init(options)
}

初始化

这里只拿对例子理解最关键的步骤分析。文件路径：src/instance/internal/init.js

Vue.prototype._init = function (options) {...// merge options.options = this.$options = mergeOptions(this.constructor.options,options,this)...// initialize data observation and scope inheritance.this._initState()...// if `el` option is passed, start compilation.if (options.el) {this.$mount(options.el)}
}

merge options

mergeOptions()定义在src/util/options.js文件中，这里主要定义options中各种属性的合并（merge），例如：props, methods, computed, watch等。另外，这里还定义了每种属性merge的默认算法（strategy），这些strategy都可以配置的，参考Custom Option Merge Strategy

在本文的例子中，主要是data选项的merge，在merge之后，放到$options.data中，基本相当于下面这样：

vm.$options.data = function mergedInstanceDataFn () {var parentVal = undefined// 这里就是在我们定义的options中的datavar childVal = function () {return {message: 'Hello World'}}// data function绑定vm实例后执行，执行结果: {message: 'Hello World'}var instanceData = childVal.call(vm)// 对象之间的merge，类似$.extend，结果肯定就是：{message: 'Hello World'}return mergeData(instanceData, parentVal)
}

init data

_initData()发生在_initState()中，主要做了两件事：

  1. 代理data中的属性

  2. observe data

文件路径：src/instance/internal/state.js

Vue.prototype._initState = function () {this._initProps()this._initMeta()this._initMethods()this._initData() // 这里this._initComputed()}

属性代理（proxy）

把data的结果赋值给内部属性：文件路径：src/instance/internal/state.js

var dataFn = this.$options.data // 上面我们得到的mergedInstanceDataFn函数
var data = this._data = dataFn ? dataFn() : {}

代理（proxy）data中的属性到_data，使得vm.message === vm._data.message：
文件路径：src/instance/internal/state.js

/*** Proxy a property, so that* vm.prop === vm._data.prop*/
Vue.prototype._proxy = function (key) {if (!isReserved(key)) {var self = thisObject.defineProperty(self, key, {configurable: true,enumerable: true,get: function proxyGetter () {return self._data[key]},set: function proxySetter (val) {self._data[key] = val}})}}

observe

这里是我们的第一个重点，observe过程。在_initData()最后，调用了observe(data, this)对数据进行observe。在hello world例子里，observe()函数主要是针对{message: 'Hello World'}创建了Observer对象。
文件路径：src/observer/index.js

var ob = new Observer(value) // value = data = {message:'Hello World'}

在observe()函数中还做了些能否observe的条件判断，这些条件有：

  1. 没有被observe过（observe过的对象都会被添加__ob__属性）

  2. 只能是plain object（toString.call(ob) === "[object Object]"）或者数组

  3. 不能是Vue实例（obj._isVue !== true）

  4. object是extensible的（Object.isExtensible(obj) === true）

Observer

官网的Reactivity in Depth上有这么句话：

When you pass a plain JavaScript object to a Vue instance as its data option, Vue.js will walk through all of its properties and convert them to getter/setters

The getter/setters are invisible to the user, but under the hood they enable Vue.js to perform dependency-tracking and change-notification when properties are accessed or modified

Observer就是干这个事情的，使data变成“发布者”，watcher是订阅者，订阅data的变化。

在例子中，创建observer的过程是：

  1. new Observer({message: 'Hello World'})

  2. 实例化一个Dep对象，用来收集依赖

  3. walk（Observer.prototype.walk()）数据的每一个属性，这里只有message

  4. 将属性变成reactive的(Observer.protoype.convert())

convert()里调用了defineReactive()，给data的message属性添加reactiveGetter和reactiveSetter
文件路径：src/observer/index.js

export function defineReactive (obj, key, value) {...Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {...if (Dep.target) {dep.depend() // 这里是收集依赖...}return value},set: function reactiveSetter (newVal) {...if (setter) {setter.call(obj, newVal)} else {val = newVal}...dep.notify() // 这里是notify观察这个数据的依赖（watcher）}})
}

关于依赖收集和notify，主要是Dep类
文件路径：src/observer/dep.js

export default function Dep () {this.id = uid++this.subs = []
}

这里的subs是保存着订阅者（即watcher）的数组，当被观察数据发生变化时，即被调用setter，那么dep.notify()就循环这里的订阅者，分别调用他们的update方法。

但是在getter收集依赖的代码里，并没有看到watcher被添加到subs中，什么时候添加进去的呢？这个问题在讲到Watcher的时候再回答。

mount node

按照生命周期图上，observe data和一些init之后，就是$mount了，最主要的就是_compile。
文件路径：src/instance/api/lifecycle.js

Vue.prototype.$mount = function (el) {...this._compile(el)...}

_compile里分两步：compile和link

compile

compile过程是分析给定元素（el）或者模版（template），提取指令（directive）和创建对应离线的DOM元素（document fragment）。

文件路径：src/instance/internal/lifecycle.js

Vue.prototype._compile = function (el) {...var rootLinker = compileRoot(el, options, contextOptions)...var rootUnlinkFn = rootLinker(this, el, this._scope)...var contentUnlinkFn = compile(el, options)(this, el)...
}

例子中compile #mountNode元素，大致过程如下：

  1. compileRoot：由于root node（<div id="mountNode"></div>）本身没有任何指令，所以这里compile不出什么东西

  2. compileChildNode：mountNode的子node，即内容为"{{message}}"的TextNode

  3. compileTextNode：
    3.1 parseText：其实就是tokenization（标记化：从字符串中提取符号，语句等有意义的元素），得到的结果是tokens
    3.2 processTextToken：从tokens中分析出指令类型，表达式和过滤器，并创建新的空的TextNode
    3.3 创建fragment，将新的TextNode append进去

parseText的时候，通过正则表达式（/\{\{\{(.+?)\}\}\}|\{\{(.+?)\}\}/g）匹配字符串"{{message}}"，得出的token包含这些信息：“这是个tag，而且是文本（text）而非HTML的tag，不是一次性的插值（one-time interpolation），tag的内容是"message"”。这里用来做匹配的正则表达式是会根据delimiters和unsafeDelimiters的配置动态生成的。

processTextToken之后，其实就得到了创建指令需要的所有信息：指令类型v-text，表达式"message"，过滤器无，并且该指令负责跟进的DOM是新创建的TextNode。接下来就是实例化指令了。

link

每个compile函数之后都会返回一个link function（linkFn）。linkFn就是去实例化指令，将指令和新建的元素link在一起，然后将元素替换到DOM tree中去。每个linkFn函数都会返回一个unlink function（unlinkFn）。unlinkFn是在vm销毁的时候用的，这里不介绍。

实例化directive：new Directive(description, vm, el)

description是compile结果token中保存的信息，内容如下：

description = {name: 'text', // text指令expression: 'message',filters: undefined,def: vTextDefinition
}

def属性上的是text指令的定义（definition），和Custome Directive一样，text指令也有bind和update方法，其定义如下：

文件路径：src/directives/public/text.js

export default {bind () {this.attr = this.el.nodeType === 3? 'data': 'textContent'},update (value) {this.el[this.attr] = _toString(value)}
}

new Directive()构造函数里面只是一些内部属性的赋值，真正的绑定过程还需要调用Directive.prototype._bind，它是在Vue实例方法_bindDir()中被调用的。
在_bind里面，会创建watcher，并第一次通过watcher去获得表达式"message"的计算值，更新到之前新建的TextNode中去，完成在页面上渲染"Hello World"。

watcher

For every directive / data binding in the template, there will be a corresponding watcher object, which records any properties “touched” during its evaluation as dependencies. Later on when a dependency’s setter is called, it triggers the watcher to re-evaluate, and in turn causes its associated directive to perform DOM updates.

每个与数据绑定的directive都有一个watcher，帮它监听表达式的值，如果发生变化，则通知它update自己负责的DOM。一直说的dependency collection就在这里发生。

Directive.prototype._bind()里面，会new Watcher(expression, update)，把表达式和directive的update方法传进去。

Watcher会去parseExpression：
文件路径：src/parsers/expression.js

export function parseExpression (exp, needSet) {exp = exp.trim()// try cachevar hit = expressionCache.get(exp)if (hit) {if (needSet && !hit.set) {hit.set = compileSetter(hit.exp)}return hit}var res = { exp: exp }res.get = isSimplePath(exp) && exp.indexOf('[') < 0// optimized super simple getter? makeGetterFn('scope.' + exp)// dynamic getter: compileGetter(exp)if (needSet) {res.set = compileSetter(exp)}expressionCache.put(exp, res)return res
}

这里的expression是"message"，单一变量，被认为是简单的数据访问路径（simplePath）。simplePath的值如何计算，怎么通过"message"字符串获得data.message的值呢？
获取字符串对应的变量的值，除了用eval，还可以用Function。上面的makeGetterFn('scope.' + exp)返回：

var getter = new Function('scope', 'return ' + body + ';') // new Function('scope', 'return scope.message;')

Watch.prototype.get()获取表达式值的时候，

var scope = this.vm
getter.call(scope, scope) // 即执行vm.message

由于initState时对数据进行了代理（proxy），这里的vm.message即为vm._data.message，即是data选项中定义的"Hello World"。

值拿到了，那什么时候将message设为依赖的呢？这就要结合前面observe data里说到的reactiveGetter了。
文件路径：src/watcher.js

Watcher.prototype.get = function () {this.beforeGet()        // -> Dep.target = thisvar scope = this.scope || this.vm...var value value = this.getter.call(scope, scope)...this.afterGet()         // -> Dep.target = nullreturn value
}

watcher获取表达式的值分三步：

  1. beforeGet：设置Dep.target = this

  2. 调用表达式的getter，读取（getter）vm.message的值，进入了message的reactiveGetter，由于Dep.target有值，因此执行了dep.depend()将target，即当前watcher，收入dep.subs数组里

  3. afterGet：设置Dep.target = null

这里值得注意的是Dep.target，由于JS的单线程特性，同一时刻只能有一个watcher去get数据的值，所以target在全局下只需要有一个就可以了。
文件路径：src/observer/dep.js

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null

就这样，指令通过watcher，去touch了表达式中涉及到的数据，同时被该数据（reactive data）保存为其变化的订阅者（subscriber），数据变化时，通过dep.notify() -> watcher.update() -> directive.update() -> textDirective.update()，完成DOM的更新。

到这里，“Hello World”怎么渲染到页面上的过程基本就结束了。这里针对最简单的使用，挑选了最核心的步骤进行分析，更多内部细节，后面慢慢分享。

原文地址：https://segmentfault.com/a/1190000006866881?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly

这篇关于Vue.js源码（1）：Hello World的背后的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1111770。

相关文章

Java汇编源码如何查看环境搭建

Java汇编源码如何查看环境搭建

《Java汇编源码如何查看环境搭建》：本文主要介绍如何在IntelliJIDEA开发环境中搭建字节码和汇编环境,以便更好地进行代码调优和JVM学习,首先,介绍了如何配置IntelliJIDEA以方... 目录一、简介二、在IDEA开发环境中搭建汇编环境2.1 在IDEA中搭建字节码查看环境2.1.1 搭建步
阅读更多...
Node.js 中 http 模块的深度剖析与实战应用小结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器：基石搭建（一
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...
python解析HTML并提取span标签中的文本

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2