Vue.js 运行机制全局概览浅读

前一段时间看了一下笔者写的这个，写的还是很好地，记录一下。

1.总体流程

初始化及挂载

在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化，也就是这里的 init 过程，它会初始化生命周
期、事件、 props、 methods、 data、 computed 与 watch 等。其中重要的是通过
Object.defineProperty 设置 setter 与 getter 函数，用来实现「响应式」以及「依赖收集」。

初始化之后调用 $mount 会挂载组件，如果是运行时编译，即不存在 render function 但是存在
template 的情况，需要进行「编译」步骤。

编译

compile编译可以分成 parse、 optimize 与 generate 三个阶段，终需要得到 render function。

parse：用正则解析template模板中的指令、class、style等数据，形成AST（抽象语法树）。

optimize ：用来标记静态节点，将来更新视图的时候，通过diff算法会跳过静态节点，达到优化的一个目的。

generate：将AST转化成render function字符串，得到结果是 render 的字符串以及 staticRenderFns 字符串。

响应式

当 render function 被渲染的时候，因为会读取所需对象的值，所以会触发 getter 函数进行「依赖收
集」，「依赖收集」的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中。

形成如下所示的这样一个关系。

在修改对象的值的时候，会触发对应的 setter， setter 通知之前「依赖收集」得到的 Dep 中的每一个
Watcher，告诉它们自己的值改变了，需要重新渲染视图。这时候这些 Watcher 就会开始调用 update 来
更新视图。

Virtual DOM

Virtual DOM 其实就是一棵以 JavaScript 对
象（ VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。

更新视图

patch()方法对比新VNode和旧VNode，通过diff算法得到差异，进行对应修改。

转载于:https://www.cnblogs.com/sxdjy/p/10365548.html

Vue.js 运行机制全局概览浅读相关推荐

Vue.js 运行机制全局概览
Vue.js 运行机制全局概览全局概览 Vue.js 运行机制全局概览这一节笔者将为大家介绍一下 Vue.js 内部的整个流程,希望能让大家对全局有一个整体的印象,然后我们再来逐个模块进行讲解.从 ...
Vue.js 运行原理解析、vue源码剖析
Vue.js 运行机制全局概览全局概览这一节笔者将为大家介绍一下 Vue.js 内部的整个流程,希望能让大家对全局有一个整体的印象,然后我们再来逐个模块进行讲解.从来没有了解过 Vue.js 实现 ...
浅谈 js运行机制、宏观任务、微观任务
**今天我们谈一下我对js 运行机制和宏观任务.微观任务的理解** js运行机制有同步运行和异步运行 js是单线程运行模式在进入任务当中如果是同步任务那么就直接被主线程运行如果是异步任务那么就 ...
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
最近发现有不少介绍JS单线程运行机制的文章,但是发现很多都仅仅是介绍某一部分的知识,而且各个地方的说法还不统一,容易造成困惑. 因此准备梳理这块知识点,结合已有的认知,基于网上的大量参考资料,从浏览器 ...
js中当等于最小值是让代码不执行_从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理...
前言见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
web前端培训JS 运行机制的梳理
展现形式:由于是属于系统梳理型,就没有由浅入深了,而是从头到尾的梳理知识体系, 重点是将关键节点的知识点串联起来,而不是仅仅剖析某一部分知识. 内容是:从浏览器进程,再到浏览器内核运行,再到JS引擎单 ...
JS 运行机制最全面的一次梳理
前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群最近发现有不少介绍JS单 ...
js 多个定时器_从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理(二)
作者:撒网要见鱼 https://segmentfault.com/a/1190000012925872 本文接上篇 <从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理(一)> ...
初识JS_API基础Day4——笔记整理+JS运行机制+1课后作业+蓝瘦香菇...
一. 常用的键盘事件 1. 键盘事件 2. 键盘事件对象二. BOM 1 . 什么是BOM 2 . window对象的常见事件页面(窗口)加载事件(2种) 第1种 window.onload 是窗 ...

Vue.js 运行机制全局概览浅读

Vue.js 运行机制全局概览浅读相关推荐

最新文章

热门文章