newVue(),new命令的底层机制第一步是创建一个空对象,让obj={},这个空对象就是我们常说的vm实例,但现在在这个实例上什么都没有。之后的所有过程可以简单概括为:给这个空对象添加一些属性和方法,最后返回。接下来,这个空对象就要开始生命周期之旅了。第一次初始化,具体初始化需要看源码。初学者不需要知道,但你能看懂。官方说法是:initEvents&LifeCycle,中文翻译为:初始化事件和生命周期;第一个初始化完成后,会触发beforeCreate钩子,此时会执行你在这个钩子里写的代码;然后会进行第二次初始化,第二次初始化内容官方说法是:initinjection&reactivity(初始注入和响应式),简单的说:给实例添加一些属性和方法(注入),比如数据,computed,methods,实现流程中数据的响应性。至此整个初始化过程结束,此时会触发创建的钩子;下面开始模板编译阶段(这个阶段主要有两个判断):6.1首先,进行第一次判断。有el选项吗?如果有,转6.2;如果没有,就停在这里,直到调用vm.$mount(el)然后转到6.2。通俗一点理解:我没有什么可挂载的,为什么我要花那么大的力气去编译?在您确保为我安装了目标后,我将开始工作。6.2是时候开始编译了,但是编译呢?这里将进行第二次判断。如果有模板选项,将编译模板。如果没有,将编译外部HTML。编译完成后,应该会触发beforeMount钩子;将el元素赋值给vm.$el,然后我们就可以使用vm.$el来访问这个元素了;安装后,触发安装的钩子。此时页面已经渲染完成,等待与用户交互。一般会出现两种情况:当一些响应式数据发生变化时,Vue不得不通知DOM重新渲染,不过不用担心,在DOM重新渲染之前,“我”必须先触发beforeUpdatehook,以及然后开始渲染。渲染完成后,记得触发updatedhook。如果用户想通过某种操作销毁“I”,那么就执行vm.$destroy()。这个函数第一步是触发beforeDestroy钩子,第二步是开始销毁。什么内容被销毁了?官方的说法是teardownwathcers,childcomponentsandeventlisteners(移除observers,subcomponentsandeventlisteners),第三步触发destroyed钩子。最后用官方的生命周期流程图总结一下上面的整个过程:
