Vue生命周期

最新推荐文章于 2023-10-27 13:33:34 发布

CHERISH.zz

最新推荐文章于 2023-10-27 13:33:34 发布

阅读量88

点赞数

分类专栏： vue javascript 文章标签： html5 javascript vue.js

本文链接：https://blog.csdn.net/leader_li/article/details/120023844

版权

javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述 Vue实例的生命周期：
开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、销毁

生命周期阶段：
初始化、运行、销毁

new Vue() ->
创建前后：beforeCreate() -> created() ->
挂载前后：beforeMount() -> mounted() ->
更新前后：beforeUpdate() -> updated() ->
销毁前后：brforeDestory() -> destoryed()

运行之前要引入 Vue
官方地址：https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue生命周期</title>
    </head>
    
    <body>
        <div id="app">
            <!-- <h2 id="msg">{{message}}</h2> -->
            <!-- <button @click="show">更换message</button> -->
        </div>
    </body>

    <!-- 
    	<script src="这里输入vue.js的路径"></script>
    -->
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                // message: '数据信息'
            },
            methods: {
                show: function(){
                    // this.message = '被更改';
                    // console.log('调用了show方法');
                }
            },

            // 初始化阶段
            beforeCreate(){
                // console.log(this.message);  // undefined
                // this.show();                // TypeError: this.show is not a function（报错）
            },
            created(){
                // console.log(this.message);  // 数据信息
                // this.show();                // 调用了show方法
            },
            beforeMount(){
                // console.log( document.getElementById('msg').innerText );   // {{message}}
            },
            mounted(){
                // console.log( document.getElementById('msg').innerText );   // 数据信息
            },

            // 运行阶段
            beforeUpdate(){
                // console.log( document.getElementById('msg').innerText );   // 数据信息
            },
            updated(){
                // console.log( document.getElementById('msg').innerText );   // 被更改
            },

            // 销毁阶段
            beforeDestroy(){
                // console.log("此时data, methods等都处于可用状态，还未完全销毁");
            },
            destroyed(){
                // console.log("此时data, methods等都不能使用，完全销毁");
            }
        })
    </script>
</html>

初始化阶段一：
beforeCreate() 执行时，data、methods 的数据没有初始化
created() 执行时， data、methods 的数据被初始化

		 // javascript内的代码
		 data: {
             message: '数据信息'
         },
         methods: {
             show: function(){
                 // this.message = '被更改';
                 console.log('调用了show方法');
             }
         },

         // 初始化阶段一
         beforeCreate(){
              console.log(this.message);  // 控制台输出：undefined
              this.show();                // 控制台输出：TypeError: this.show is not a function（报错）
         },
         created(){
             console.log(this.message);  // 控制台输出：数据信息
             this.show();                // 控制台输出：调用了show方法
         }

初始化阶段二：
beforeMount() 执行时，模板没有挂载到页面中
mounted() 执行时，模板挂载到页面，实例创建完成

		<!-- body内的代码 -->
		<div id="app">
		    <h2 id="msg">{{message}}</h2>
		    <!-- <button @click="show">更换message</button> -->
		</div>
		
		  // javascript内的代码
	      data: {
              message: '数据信息'
          },
          methods: {
              show: function(){
                  // this.message = '被更改';
                  console.log('调用了show方法');
              }
          },

          // 初始化阶段二
          beforeMount(){
               console.log( document.getElementById('msg').innerText );   // 控制台输出：{{message}}
          },
          mounted(){
               console.log( document.getElementById('msg').innerText );   // 控制台输出：数据信息
          },

点击 “更换message” 按钮进入到运行阶段：
beforeUpdate() 执行时，页面没有和最新数据保持同步，页面中显示的数据时原来的
updated() 执行时，页面与最新数据保持同步，页面中的数据被更改为最新的

		<!-- body内的代码 -->
		<div id="app">
		    <h2 id="msg">{{message}}</h2>
		    <button @click="show">更换message</button>
		</div>

		 	// javascript内的代码
	     	data: {
                message: '数据信息'
            },
            methods: {
                show: function(){
                    this.message = '被更改';
                    // console.log('调用了show方法');
                }
            },

            // 运行阶段
            beforeUpdate(){
                console.log( document.getElementById('msg').innerText );   // 控制台输出：数据信息
            },
            updated(){
                console.log( document.getElementById('msg').innerText );   // 控制台输出：被更改
            },

关闭页面后进入到销毁阶段：

			// 销毁阶段
			beforeDestroy(){
                console.log("此时data, methods等都处于可用状态，还未完全销毁");
            },
            destroyed(){
                console.log("此时data, methods等都不能使用，完全销毁");
            }

CHERISH.zz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期

Vue实例的生命周期：开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、销毁生命周期阶段：初始化、运行、销毁new Vue() ->创建前后：beforeCreate() -> created() ->挂载前后：beforeMount() -> mounted() ->更新前后：beforeUpdate() -> updated() ->销毁前后：brforeDestory() -> destoryed()&lt.
复制链接

扫一扫

专栏目录