vue生命周期和生命周期的执行顺序

vue 生命周期 和 生命周期的执行顺序

参考资料 组件初始化过程： 组件更新过程： 组件销毁过程： 1、所有的生命周期钩子自动绑定 this 上下文到实例中 2、父子组件的生命周期都是同步执行的，如果在父组件中进行异步接口请求，并用于子组件渲染，建议在子组件的标签加上 v-if="传递的数据" ，或者还可以在子组件中使用 watch 监听 3、虽然 updated 函数会在数据变化时被触发，但却不能准确的判断是那个属性值被改变，所以在实际情况中用 computed 或 watch 函数来监听属性的变化 4、在使用 vue-router 时有时需要使用 keep-alive 来缓存组件状态，这个时候 created 等组件初始化钩子就不会被重复调用了，只能触发 activated、deactivated 这两个 keep-alive 专属钩子

vue页面的渲染过程

我们从最简单的new Vue开始： 1、new Vue，执行初始化 2、挂载$mount方法，通过自定义Render方法、template、el等生成Render函数 3、通过Watcher监听数据的变化 4、当数据发生变化时，Render函数执行生成VNode对象 5、通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素 至此，整个new Vue的渲染过程完毕。

vue异步渲染

vue是组件级更新，当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick） 分析： 当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会立即去执行，在update中会调用queueWatcher方法将watcher放到了一个队列里，在queueWatcher会根据watcher的进行去重，多个属性依赖一个watcher，如果队列中没有该watcher就会将该watcher添加到队列中，然后通过nextTick异步执行flushSchedulerQueue方法刷新watcher队列。

flushSchedulerQueue中开始会触发一个before的方法，其实就是beforeUpdate，然后watcher.run() 才开始真正执行watcher，执行完页面渲染完成，更新完成后调用updated。

解决vue开发时子组件数据和组件渲染的异步问题

在开发中有时候会遇到子组件渲染完成了请求也没响应回来的情况 父子组件的钩子并不会等待请求返回，请求是异步的，VUE设计也不能因为请求没有响应而不执行后面的钩子，因此，偶尔会遇到请求也正常请求了，数据也能在控制台打印出来，但是页面就是没渲染数据的问题，下面总结一下解决方案： 在渲染子组件的时候加上一个条件,data1是父组件调用接口返回的数据。当有数据的时候在去渲染子组件。

这样就会形成天然的阻塞。

在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。最后执行父组件的mounted。