eg
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h4 ref="strBox">{{str}}</h4> <my></my> </div> <script src="../js/vue.js"></script> <script> const my = { template: ` <div>hello woeld</div> `, methods: {}, beforeCreate() { console.log("beforeCreate" + "-------my1"); }, created() { console.log("created" + "-------my2"); }, beforeMount() { console.log("beforeMount" + "-------my3"); }, mounted() { console.log("mounted" + "-------my4"); }, beforeUpdate() { console.log("beforeUpdate" + "-------my5"); }, updated() { console.log("updated" + "-------my6"); }, beforeDestroy() { console.log("beforeDestroy" + "-------my7"); }, destroyed() { console.log("beforeDestroy" + "-------my8"); }, } Vue.component('my',my) var vm = new Vue({ el: '#app', data: { str:'你是个麻瓜' }, methods: {}, // vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 // 加loading事件 beforeCreate() { console.log("beforeCreate" + "-------app1"); }, // vue实例的数据对象data有了，$el还没有 // 结束loading、请求数据为mounted渲染做准备 created() { console.log("created" + "-------app2"); }, // vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。 beforeMount() { console.log("beforeMount" + "-------app3"); }, // vue实例挂载完成，data.filter成功渲染 mounted() { console.log("mounted" + "-------app4"); console.log(this.$refs.strBox); }, // data更新时触发 beforeUpdate() { console.log("beforeUpdate" + "-------app5"); this.$nextTick(() => { console.log(this.$refs.strBox); }) console.log(this.$refs.strBox); }, // data更新时触发 updated() { console.log("updated" + "-------app6"); }, // 组件销毁时触发 beforeDestroy() { console.log("beforeDestroy" + "-------app7"); }, // 组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在 destroyed() { console.log("beforeDestroy" + "-------app8"); }, }); </script> </body> </html>