vuejs-logo.png 组件生命周期(Lifecycle) 图中 beforeCreate 和 created 是创建 hook 方法，提供这些方法让我们根据组件创建过程不同阶段去干不同的事。 beforeCreate Observe Data Init Events created 注意我们通常是请求数据更新视图，那么在 before create 时候还没有完成数据和视图依赖关系，这时候是拿不到数据，所以请求数据这一步通常放到 created 这个 hook 函数来做，也可以写作 mount 这个 hook 函数中。 如果在创建阶段即使我们没有通过 el 属性来指定将 vue 组件绑定到哪个 dom 元素上也没有关系，我们可以随后通过vm.$mount(el)来绑定组件。那么如果在定义组件时没有指定要挂载的元素，随后也没有调用vm.$mount(el)指定要挂载哪一个元素上，这个组件就会被浏览器回收掉。 如果有 template 属性值，就将模板编译为 render 方法执行，如果没有 template 就会将 outerHTML 作为模板使用 beforeMount 和 mounted 是我们通过 render function 渲染出 dom 和要挂载元素之间结合的前后阶段，beforeMount 拿到，关于 beforeMount 和 mounted 不同可以通过下图一目了然 屏幕快照 2020-05-11 上午5.19.06.png beforeUpdate 和 update 是更新数据到视图的两个 hook 函数，这两函数区别是当数据更新是否通过 re-render 方法更新到其他dom上，例如一个文本输入框，输入框旁边有一个显示输入内容元素，beforeUpdate 是在输入框输入文字还没有更新到旁边dom之前的 hook 函数。 屏幕快照 2020-05-11 上午5.22.13.png 移除元素vm.$destroy()调用就会移除组件，beforeDestroy 是在执行移除前通知开发人员要开始移除组件，移除 watcher 子组件和事件监听器 document.getElementById('del').addEventListener('click', function () { vm.$destroy(); }) 进入 destroy 并不会移除 html 元素，而是将 vue 组件实体与其之前绑定 html 元素脱离，不再有任何关系。

本文章由javascript技术分享原创和收集