vue原理简单实现(一)

书接上文点这里

• 首先来说vue是个类，当实例化这个类的时候会传入一个对象例如：

new Vue({
   
    el:"#app",
    data(){
   
        return {
   
            a:1
        }
    }
})

这种传参的方式叫做options api

• 在真实的vue中由于考虑到方便类的扩展问题，所以vue采用的是用构造函数的方式来写的

function Vue(options){
   
    this._init(options)// 入口方法，用来做数据初始化的
}
// 做成公共方法
Vue.prototype._init = funciton (options){
   

}
export Vue

在vue中首先vue会对传过来的数据做一次初始化操作，调用init方法，因为后期的组件操作中要用到这个方法，所以把这个方法做成一个公共的方法

• 为了方便扩展和解耦vue采用插件的模式为构造函数扩展方法
• vue会先拿到实例然后定义一个$options变量，然后把参数(用户传进来的options)赋值给这个变量

export function initMixin(Vue){
   
    Vue.prototype._init = funciton (options){
   
        const vm = this // 把实例赋值给变量vm
        vm.$options = options // 通过$options存储options
    }
}

接下来就是vue核心部分:响应式数据原理

• 这里先说一下MVVM框架，首先来讲vue并不是MVVM框架，文档中应该也有写到，为什么不是呢？
• MVVM指的是数据更新视图,不会操作dom而vue中会有dom的操作（$ref会操作dom）
• 拿到vm实例后先通过initState方法初始化一下数据

export function initMixin(Vue){
   
    Vue.prototype._init = funciton (options){
   
        const vm = this // 把实例赋值给变量vm
        vm.$options = options // 通过$options存储options
        initState(vm)
    }
}

• initState中包括了很多需要初始化的数据(版本源码2.6.12)如下：

export function initState (vm: Component) {
   
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data)