vuejs的生命周期演示

最新推荐文章于 2022-02-04 22:40:44 发布

bigfatDone

最新推荐文章于 2022-02-04 22:40:44 发布

阅读量332

点赞数 1

分类专栏： vue 文章标签： vue vuejs vue生命周期

本文链接：https://blog.csdn.net/bigfatDone/article/details/82588794

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

vuejs的生命周期之代码演示演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="./lib/vue.js"></script>
	<script>
		window.onload = function(){
    let vm = new Vue({
    	el:'#app',
    	data:{
           msg:'这是一个测试1'
    	},
    	methods:{
          show:function(){
          	console.log('这是一个测试2')
          },
          pageShow:function(){
          	console.log(document.getElementById('p').innerText)
          }

    	},


    	//---------------------1-beforeCreate-------------------------------
                  //这里是创建了vue实例对像，并且初始化周期钩子函数和默认方法
         beforeCreate:function(){
         	this.show;//show is not a function  ---访问不了，显示show没有定义
         	console.log(this.msg)//undefined  --这个是显示undefined
         },



         //--------------------2-create--------------------------------
        //在这里data和methods都被初始化，可以被调用
         created:function(){
         	 this.pageShow();   //{{msg}}    --可以访问,访问的是{{msg}},这说明还是没有被渲染在页面上
         	 console.log(this.msg)//这是一个测试1   --可以访问
         },



         //--------------------3-beforeMount------------------------
         //这里表示vue开始编辑模板，将vue里面的代码都执行成模板字符串，最终在内存中生成编译好了 
          的模板，并将模板渲染经内存中的dom里面，但是只是在内存中渲染了模板，
           并没有将其渲染到真实的页面上去
         beforeMount:function(){
         	this.pageShow(); //{{msg}}   --可以访问，但是没被vue渲染到页面上
         	console.log(this.msg)//这是一个测试1   --可以访问
         },


          //------------------ 4-mounted-------------------------
          //这里的是将内存中的模板挂载到到真实的页面上，用户可以在页面上看到渲染好的的页面
           mounted:function(){
           	this.pageShow();//这是一个测试1  ----从data获取的数据
           },


           //------------------5-beforeUpdate-------------------------
           //通过某些插件操作dom上的节点，会根据data的改变而触发0到多次的，这个表示对数据进行更改，
但是页面上的数据没有被更新，data里面的数据已经被更新了，页面上的数据和data里面的数据没有发生同步
           beforeUpdate:function(){
                 this.pageShow();//这是一个测试1  --页面的数据没有改变
                 console.log(this.msg)//这是一个测试3  --data里面的数据已经改变了的
           },



           //-------------------6-update------------------------
           //根据在data里面的数据，重新再内存中渲染出一份新的dom树，
           并将最新的dom重新渲染到页面中去
           updated:function(){
           	     this.pageShow();//这是一个测试3  --页面的数据已经改变
               console.log(this.msg)//这是一个测试3  --data里面的数据已经改变了的
           }


      
            //-------------------7-beforeDestroy------------------------
            //当执行beforeDestroy钩子函数的时候，data，methods，
            过滤器和方法还是处于可以访问的状态


           //-------------------7-destroy------------------------
           //当执行destroy钩子函数之后。。data，methods，过滤器和方法都不可用
      
    })
}
     
	</script>
</head>
<body>
	<div id="app">
        <p id="p" >{{ msg }}</p>
        <button @click='msg ="这是测试的数据3"' value="toggle">toggle</button>
	</div>
</body>
</html>