Vue成神之路（一）：Vue对象创建，属性，钩子函数,Vue特殊方法

一：Vue对象创建和销毁钩子函数：

beforeCreate：对象初始化之前，data钩子函数初始化之前，dom对象没创建。

create：对象已经创建，data钩子函数已经初始化，dom对象没创建。

beforeMount：对象已经创建，data钩子函数已经初始化，dom对象已创建，data数据没有挂载到dom的指令中。

mounted：对象已经创建，data钩子函数已经初始化，dom对象已创建，data数据已经挂载到dom的指令中。

beforeDestroy：对象存在，data数据存在，dom对象销毁之前。

destroy：对象已经销毁，dom对象可能销毁。

1. new Vue()对象的时候，都做了什么操作，系统会去调用_init函数

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    /**
     *第一部分，初始化属性
     */
    vm._uid = uid++
    let startTag, endTag
    //测试相关的性能开发
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }
    vm._isVue = true
    /**
     *第二部分，合并相关option，vue会将相关的属性和方法都统一放到vm.$options中，为后续的调用做准备工作。
     */
    // merge options
    console.log("befor merge",vm.$options);
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    console.log("after merge",vm.$options);
 
     /**
     *第三部分，初始化相关功能
     */
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
 
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
     
   /**
     *第四部分，mount
     */
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }

2. 大概创建vue对象分步图
   a.合并option
   b.初始化各类属性和事件，我们梳理成下面的导图
   
   c.挂载dom
   
3. 官方流程图
   

二：vue对象对应的属性和钩子函数功能

1. vue对象对外暴露的钩子函数，用户可以在对应钩子函数内编写我们的业务代码。
2. vue对象上面包含的方法和属性。

new Vue({
		data(){  //定义基础数据，可以是各种数据类型
	       return{}
	    },
	    componets:{},//定义模板数据
	    props:{},//定义父组件向子组件传递的参数
	    watch:{},//监视器，监视data中某个数据的变化执行回调函数
	    computed:{},//计算属性，计算data中某个属性后，定义新属性，有缓存功能
	    methods:{},//函数集合属性，定义事件函数和其他方法
	    beforeCreate(){},//对象创建之前调用
	    create(){},//对象创建后调用
	    beforeMounted(){},//data数据没挂载到dom对象之前调用
	    mounted(){},//data数据挂载到dom对象之后调用
	    beforeDestroyed(){},//对象销毁之前调用
	    destroyed(){},//对象销毁后调用
})

三：vue对象对应的一些特殊全局方法和属性

1. Vue.set()和this.$set()的使用
   a.原因：动态给data里面某个对象添加属性，结果发现无法在页面上动态获取到，因为不是响应式的

data(){
	return{
			user:{
					age:" ",
					name:" ",
				}
		}
}

我们在方法里面添加如 this.user.sex=“男”,结果页面无法显示。
b.正确方式：Vue.set(object, propertyName, value)

Vue.set(vm.user, "sex", "男") 或者 this.$set(vm.user, "sex", "男");

2. this.$nextTick(()=>{})的使用
   a. 作用：dom对象渲染完毕后再执行该方法体里面的内容。
3. this.ref.name的使用