vue源码浅析

最新推荐文章于 2024-09-14 19:44:09 发布

weixin_34297704

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量89

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c6cc89df265da2de52d83ea

版权

该系列文章旨在记录解读源码的过程的一些自己的见解，希望能够帮助大家，如果错误，欢迎拍砖指点~

vue大致流程

文本将从vue中的核心功能出发，简析核心原理和配置。首先我们来大致看看vue执行的流程。举个栗子:

<div id="app">{{ text }}</div>
复制代码

var vm = new Vue({
    el: '#app',
    data: {
        text: 'hello world'
    }    
})
复制代码

然后再上一张官方的流程图:

在我们new Vue()的时候，vue会进行一系列的初始化操作，比如initData，initProps, initWatch等等，结合上述这个非常简单的hello world，其实内在调用了initData这个方法，它用来给我们的data对象上“加料”，它会通过Object.defineProperty这个方法劫持对象中的每个属性的getter和setter。

在我们访问data里的属性时（比如渲染时会访问，也就是上图的"touch"），会在此时进行依赖收集，而在我们修改属性时(比如vm.text = 'hi')，会触发setter，此时会通知更新, 会将该属性之前收集的依赖(实际上是一个Watcher数组)推入到异步更新队列，这个队列会异步的触发每一个watcher.run方法实现从而执行值计算和回调函数。

而后面就和模板编译相关了，如果我们传入了template或者el配置项，vue会把我们它们作为模板进行编译，编译的结果最重要的是得到一个render函数，当然如果我们手动传入了render配置项，就用自定义的，这个函数的是为了得到vnode对象，也就是虚拟DOM。然后会创建一个render watcher，这个Watcher实例在每个Vue实例中只可能存在一个，它会被推入到上述的异步更新队列，待队列批量执行时，它会调用vm._update方法, 将得到的虚拟DOM渲染为真实DOM进行挂载。

整个vue大致执行流程就是这样，当然我们例子很简单，只涉及到data配置项且数据简单，props, watch,computed等等未提及，将分文进行详细讲解。

转载于:https://juejin.im/post/5c6cc89df265da2de52d83ea