2. vue的初始化流程

timg.jpg

本篇文章主要讲解 Vue 时发生了什么？

我们需要在 index.html 文件，先按照vue的书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./dist/umd/vue.js"></script>
<body>
    <h3>测试</h3>
    <div id="app"></div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    a: 101
                }
            }
        })
    </script>
</body>
</html>

这个大家应该很熟悉了，我们用vue 的时候都有这个文件，Vue 的实例化对象。

既然这里都 new Vue 对象了，那我们肯定的有一个 Vue 类了。
我们在 src/index.js 文件里写个类。

// export const fn = () => {}

function Vue(options) {
    // 入库方法 初始化操作
    this._init(options)
}

Vue.prototype._init = function(options) {}

export default Vue

写到这里可能有的人会问，既然写类文件为什么不用 class 呢？
我写段代码大家看下就明白了。

class Vue{
    fn1() {
        
    }
    fn2() {
        
    }
    fn3() {
        
    }
    fn4() {
        
    }
    fn5() {
        
    }
    fn6() {
        
    }
    ......
}

这样的话可能就如上面所示了，我们的把很多方法或者属性都添加写到这个类文件中.

总结一句话：使用构造函数的方式就是为了解耦方便扩展。

接下来我们只需要把方法，写成一个个小的插件的形式挂载到原型上就可以了。

-新建 src/init.js 文件，把_init() 初始化方法单独在这里操作

export function initMixin(Vue) {
    Vue.prototype._init = function(options) {
        console.log(options, '测试123')
    }
}

接着把该文件引入到 Vue类文件中去

// export const fn = () => {}  // 这是之前的测试，可删除
import { initMixin } from './init'
function Vue(options) {
    // 入库方法 初始化操作
    this._init(options)
}

initMixin(Vue)   // 写成插件，方便解耦

export default Vue

这是我们可以先编译看下：

npm run dev

这里我们就应经打印出 Vue传过来的对象了。

这是我们需要把之前的代码稍微改造下
首先 index.html 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./dist/umd/vue.js"></script>

<body>
    <h3>测试</h3>
    <div id="app"></div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    a: 101
                }
            }
        })
        console.log(vm.$options); // 接收返回 vue 的实例
    </script>
</body>
</html>

然后init.js文件

export function initMixin(Vue) {
    Vue.prototype._init = function(options) {
        // console.log(options, '测试123')
        const vm = this
        vm.$options = options
    }
}

这里我们同样可以打印出。

最后我们把用户传过来的状态单独建个文件 src/initState.js

export function initState(vm) {
    console.log(vm, '测试vm')
}

init.js 文件调用下

import { initState } from './initState'

export function initMixin(Vue) {
    Vue.prototype._init = function(options) {
        // console.log(options, '测试123')
        const vm = this
        vm.$options = options
        initState(vm) // 初始化状态 单独建个状态文件 initState.js
    }
}

没问题，这里我们也接收到了。
这是我们就可以根据传过来的不同选项，做不同的初始化操作。

初始化状态

export function initState(vm) {
    console.log(vm, '测试vm')
    const opts = vm.$options
    if (opts.props) {
        initProps(vm) // 初始化属性
    }
    if (opts.methods) {
        initMethods(vm) // 初始化方法
    }
    if (opts.data) {
        initData(vm) // 初始化数据
    }
    if (opts.computed) {
        initComputed(vm) // 初始化计算属性
    }
    if (opts.watch) {
        initWatch(vm)
    }
}

function initProps(vm) {}
function methods(vm) {}
function initData(vm) {
    // 数据初始化
    let data = vm.$options.data
    console.log(data)
}
function computed(vm) {}
function initWatch(vm) {}

这是我们数据也打印出来了。

下一篇： 2. Vue的数据拦截（对象） , 更多请关注：2020 - Vue 源码解析与实现