Vue的初始化-从new之前的导入Vue说起-总结

一时失言乱红尘 2022-11-04 05:24 36阅读 0赞

# 导入Vue #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
vue.js导入的时候已经创建好一个Vue类  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]  
new Vue的时候都是基于这个类创建的（基于原型创建）

# 尝试在VueJs的原型中增加自己的方法 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]  
调用  
![在这里插入图片描述][2021030116581658.png]

# new Vue 后执行了一下方法 #

## init方法 ##

// vm 的生命周期相关变量初始化
        // $children/$parent/$root/$refs
        initLifecycle(vm)
        // vm 的事件监听初始化, 父组件绑定在当前组件上的事件
        initEvents(vm)
        // vm 的编译render初始化
        // $slots/$scopedSlots/_c/$createElement/$attrs/$listeners
        initRender(vm)
        // beforeCreate 生命钩子的回调
        callHook(vm, 'beforeCreate')
        // 把 inject 的成员注入到 vm 上
        initInjections(vm) // resolve injections before data/props
        // 初始化 vm 的 _props/methods/_data/computed/watch
        initState(vm)
        // 初始化 provide
        initProvide(vm) // resolve provide after data/props
        // created 生命钩子的回调
        callHook(vm, 'created')
    
     // 调用 $mount() 挂载Dom
        if (vm.$options.el) { 
          vm.$mount(vm.$options.el)
        }

此时数据已经是响应式 （created）  
由于太长总结成树状图了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221023/747218edbb2f42d781a0b01cab86a825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/411f62b9bc8345c49e8913197016757d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221023/c73151f858e54e18a2dedc40c1a78c25.png
[2021030116581658.png]: /images/20221023/d95f26e4ad0447fd8dc6b535d4604de0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221023/9563c30b5a3d4b628f7ebbdcc7596fa0.png