<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> </body> <script src="js/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ }, methods:{ }, beforeCreate(){ // 这是我们遇到的第一个生命周期函数，表示实例被完全创建出来之前，会执行他 // 注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据还没有被初始化 }, created(){ // 这是遇到的第二个生命周期函数 // 在created中，data和methods都已经被初始化好了 // 如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作 }, beforeMount(){ // 这是遇到的第三个生命周期函数，表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中去 // 在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串 }, mounted(){ // 这是遇到的第四个生命周期函数，表示内存中的模板，已经真实的挂载在页面中，用户已经可以看到渲染好的页面了 // mounted是实例创建期间德 最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了 // ，此时如果没有其他操作的话，这个实例就在我们的内存当中 }, // 接下来是运行中的两个事件 beforeUpdate(){ // 这时候表示我们的界面还没有被更新【数据被更新了吗？数据肯定被更新了】 // 得出结论：当执行beforeUpdate的时候，页面中的显示数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步 }, updated(){ // updated 事件执行的时候，页面和data数据已经保持同步了，都是最新的 }, beforeDestroy(){ // 当执行beforeDestroy钩子函数的时候Vue实例就已经从运行阶段，进入到了销毁阶段； // 当执行beforeDestroy的时候，是实例身上所有的data和所有的methods，以及过滤器，指令......都 // 处于可用状态，此时还没有真正的执行销毁的过程 }, destroyed(){ // 当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器...... // 都已经不可用了 } }) </script> </html>