Vue初始化流程
2020-12-14 15:09:45 0 举报AI智能生成
vue源码解析
作者其他创作
大纲/内容
Vue 初始化流程
new Vue()
文件位置：\\src\\core\\instance\\index.js
1. 定义了 Vue 的构造函数
2. Vue实例上API的初始化
实现 init 函数: initMixin()
init 函数
创建组件的实例，初始化数据、属性、事件等
initEvents(vm) ：处理父组件传递的事件和回调
initInjections(vm) ：获取注入数据
initState(vm) ：初始化 props，methods，data，computed，watch
initProvide(vm) ： 提供数据注入
$mount() 挂载
文件位置：\\src\\platforms\\web\\entry-runtime-with-compiler.js
扩展默认$mount 方法：处理template或el选项， 生成render函数
调用 Vue 原型上的 $mount 方法
文件位置：\\src\\platforms\\web\untime\\index.js
1. 安装web平台特有指令和组件
2. 定义__patch__：补丁函数，执行patching算法进行更新
3. 定义$mount：挂载vue实例到指定宿主元素（获得dom并替换宿主元素）
mountComponent()
文件位置：\\src\\core\\instance\\lifecycle.js
执行挂载，获取vdom并转换为dom
updateComponent()： 执行初始化或更新
new Watcher()：创建组件渲染watcher， 一个组件创建一个watcher
声明了生命周期 beforeMount、beforeUpdate、mounted 钩子函数
render() 渲染函数
文件位置：\\src\\core\\instance\ender.js
执行 render() 渲染组件，获取vdom
最后执行更新函数update()：初始化或更新，将传入vdom转换为dom，初始化时执行的是dom创建操作
0 条评论
下一页
