开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
前言
周末了，为了加强自己的学习，去看了部分vue2中的源码实现，今天我们就来浅谈一些实现vue2初始化的实现原理，在这里给大家剖析一下
vue的构建选择
为什么vue中不用class去构建类，而是采用构造函数，因为采用class类需要在类里面去拓展方法，将所有方法耦合在一起，使用构造函数可以更方便的去拆分及管理方法，可以放入不同文件使用export default来导出管理
初始化操作封装
vue中实现初始化操作，调用了内部的init方法,init功能单独放入初始化文件中
// index.js
import {initMixin} from './init.js'
function Vue(options){// option就是用户选项
this._init(options)
}
initMixin(Vue) // 拖拽init方法
export default Vue
// init.js
import {initState} from './state.js'
export function initMixin(Vue){ // 给vue增加init方法
Vue.prototype._init = function(options){ // 用于初始化操作
// 把this改为vm用于区分
const vm = this
// 将用户的选项挂载到实例上
this.$options = options
// 初始化状态
initState(vm)
}
}
初始化状态
我们在源码中初始化会初始化好多东西，如data,computer,props,watch等等，初始化完后进行模板编译，然后创建虚拟dom然后再构建真实dom
// state.js
export function initState(vm){
const opts = vm.$options // 获取所有选项
// 对选项进行判断而进行不同操作
if(opts.data){ // 是data进行data操作
initData(vm)
}
if(opts.props){ // 是props进行props操作
initProps(vm)
}
......
}
数据初始化
判断用户传入了data属性后，在初始化操作里面拿到数据之后我们要对数据进行代理，在vue2中data可能是函数也可能是对象因为如果是根实例是可以用对象的，组件则必须用函数，所以拿到data的时候要先进行判断
// state.js
export function initData(vm){
let data = vm.$options.data // data可能是
data = typeof data === 'function'? data.call(vm) : data
}
结尾
后期会陆续出响应式原理，解析模板参数，模板转换ast语法树等等，希望大家一起学习记好笔记 往期精彩
