生命周期钩子=生命周期函数=生命周期事件
<body> <div class = "app"> <h1 id="h1">{{msg}}</h1> <input type="button" value="chg" @click="msg='cc'" name=""> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'.app', data:{ msg:"自定义data", }, methods:{ chg(){ this.flag=!this.flag; } }, beforeCreate(){ //第一个生命周期函数，表示实例完全被创建出来之前，会执行它 //在此函数执行时，data和method中的数据都还没有被初始化，无法使用 }, created(){ //第二个生命周期函数 //此函数执行时，data和methods都已经初始化完毕，可以操作data和methods的最早函数 }, beforeMount(){ //表示模板已经在内存中渲染完毕，但是没有挂载到页面中 //执行此函数时，页面中的元素还没有被真正替换，只是之前写的模板字符串，即内容为{{msg}}的h标签内容仍是“{{msg}}”，而不是"自定义data" }, mounted(){ //表示内存中的模板已经真实的挂载到了页面中，用户可以看到渲染到的画面 //是实例创建期间的最后一个生命周期函数，表示实例已经完全创建好了，没有其他操作时，该实例将在内存中不变 //如果要操作dom中的节点，最早要在此函数中执行，，此函数之后组件以脱离了创建阶段，进入运行阶段 }, beforeUpdate(){ //开始运行阶段，表示页面没有被更新（document.getElementById()获得的值），此时数据已经发生改变(msg) //msg的初值不算数据改变，当通过点击事件等修改msg的值时，会进入当前函数 console.log(document.getElementById('h1').innerText);//自定义data console.log(this.msg);//cc }, updated(){ //当前函数执行的时候，data和updated中的数据已经时最新的 console.log(document.getElementById('h1').innerText)//cc console.log(this.msg)//cc } }) </script>