vue 生命周期(详情版面试题+代码)

最新推荐文章于 2023-08-09 10:07:46 发布

一染星辰

最新推荐文章于 2023-08-09 10:07:46 发布

阅读量533

点赞数

分类专栏：综合大复习 vue 每日一面文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_59519449/article/details/122456519

版权

每日一面同时被 3 个专栏收录

73 篇文章 18 订阅

订阅专栏

vue

53 篇文章 12 订阅

订阅专栏

综合大复习

12 篇文章 2 订阅

订阅专栏

1.什么是生命周期?

2.beforeupdate 和 updated 的区别是什么？

3,发送ajax 最早在哪个生命周期里？

4.页面加载的时候，vue生命周期的触发顺序是怎样的呢？

5每个生命周期函数的特点是什么？

1.什么是生命周期?

生命周期：是指一个事物从产生，到最后消亡的整个过程;

vue：vue 实例组件的生命周期：实例，从创建到消毁的整个过程；

在不同的生命周期，可以执行不同的操作；

2.beforeupdate 和 updated 的区别是什么？

beforeupdate 数据在内存中更新完成，但是在页面节点中还没有更新的；

updated data中的数据更新后才触发；在内存与页面中都更新了

3,发送ajax 最早在哪个生命周期里？

发送ajax请求最早在created;

4.页面加载的时候，vue生命周期的触发顺序是怎样的呢？

beforecreate created beforemount mounted

5每个生命周期函数的特点是什么？

beforeCreate
创建之前，在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化，不能访问data数据

beforeCreate(){
    console.log('beforeCreate',this.msg);
},

created
创建之后，data和methods中的数据已经初始化，此时可以访问data数据
一般在这个函数中发起ajax请求

created(){
    console.log('created',this.msg);
},

beforeMount
挂载之前，表示模板已经在内存中编译完成，但尚未把模板渲染到页面中。
此时还没有渲染用数据生成的新dom

beforeMount(){
    console.log('beforeMount',this.$el);
},

mounted
表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
此时可以访问dom

mounted(){
    console.log('mounted',this.$el);
},

beforeUpdate
当且仅当data被修改时才触发这个生命周期函数，但此时仅仅是数据被修改，页面还未更新。

beforeUpdate(){
    console.log('beforeUpdate',this.msg);
    console.log('beforeUpdate',this.$el.innerHTML);
},

updated
会根据新数据生成最新的内存DOM树，重新渲染到真实的页面中去，
此时的data数据和页面已完成同步

updated(){
    console.log('updated',this.$el.innerHTML);
},

beforeDestroy
当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段。
当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令...都处于可用状态，此时还没有真正执行销毁过程。

beforeDestroy(){
    console.log('beforeDestroy');
},

destroyed
当执行到destoryed函数的时候，组件已经被全部销毁了，data与methods均不可用。
更改data数据，页面不会更新

destroyed(){
    console.log('destroyed');
}

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
<script type="text/javascript" src="lib/vue.js"></script>
<style type="text/css">
 * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 500px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 50px auto;
            overflow: hidden;
        }
        ul {
            width: 600px;
            height: 40px;
            margin-left: -1px;
            list-style: none;
        }
        li {
            float: left;
            width: 101px;
            height: 40px;
            text-align: center;
            font: 600 18px/40px "simsun";
            background-color: pink;
            cursor: pointer;
        }
        span {
            display: none;
            width: 500px;
            height: 160px;
            background-color: yellow;
            text-align: center;
            font: 700 100px/160px "simsun";
        }
        .show {
            display: block;
        }
        .current {
            background-color: yellow;
        }
</style>
</head>
<body>
<div id="app">
	<div id="box" ref="box" style="border:1px red solid;width:100px;height: 100px;">
		aaa{{n}}
	</div>
	<button @click="updaten">更新n</button>


	<div class="box">
    <ul>
        <li class="current">鞋子</li>
        <li>袜子</li>
        <li>帽子</li>
        <li>裤子</li>
        <li>裙子</li>
    </ul>
    <span class="show">鞋子</span>
    <span>袜子</span>
    <span>帽子</span>
    <span>裤子</span>
    <span>裙子</span>
</div>
</div>
<script type="text/javascript">
//生命周期： 是指一个事物从产生，到最后消亡的整个过程；
//树：种子发芽，小苗， 大苗 ，小树，大树， 枯萎； 
//人： 出生，婴儿，小儿童，大儿，少年，青年，壮年，老年，去世
//vue：vue 实例 组件的生命周期： 实例，从创建到消毁的整个过程； 
//在不同的生命周期，可以执行不同的操作；

//生命周期函数，生命周期钩子
//新打开组件，页面，执行哪些函数：be 
let app = new Vue({
	el:"#app",
	data:{
		n:1,
		k:2
	},
	methods:{
		updaten(){
			this.n = "2"
		}
	},

	beforeCreate(){
		//实例产生之前调用这个方法； 此时这个实例在内存中还没有产生
		//此时，data,el,methods方法都无效； 

		console.log("A实例产生之前调用");
	    // console.log(this.n);
	    // this.updaten();
		//获取节点在MOUNTED中获取不能beforecatea;
		// let box = this.$refs.box;
		// console.log(box);
		// box.style.backgroundColor="pink";
	},
	created(){
		// 指这个实例已经在内存中产生；但是还没有放到页面中； 
		console.log("B实例已经创建完毕，但是没有挂载到 页面");
		//可以操作DOM nextick();   发送ajax请求；
		//可以拿到数据；拿不到el; 
		console.log(this.$el);
		console.log(this.n);
		// this.updaten();
	},

	beforeMount(){
		//即将从内存中挂到页面中
		console.log("C挂载前");
		console.log(this.$el);
	},

	mounted(){
		// 内存中的实例已经彻底挂到页面中；
		console.log("D挂载到父节点");
		//可以操作DOM   发送ajax请求；
            var liArr = document.getElementsByTagName("li");
            var spanArr = document.getElementsByTagName("span");
            for(var i=0;i<liArr.length;i++){
                //绑定索引值（新增一个自定义属性：index属性）
                liArr[i].index = i;
                liArr[i].onmouseover = function () {

                    //1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].className = "";
                        spanArr[j].className = "";
                    }
                    this.className = "current";
                    spanArr[this.index].className = "show"; //【重要代码】
                }
            }

	},
	beforeUpdate(){
		//beforeupdate  updated 区别； 
		//数据在内存中更新完成，但是在页面节点中还没有更新的； 
		console.log("data更新前");
		console.log(document.getElementById('box').innerHTML); // 1
	},
	updated(){
		//data中的数据更新后才触发； 
		//在内存与页面中都更新了； 
		console.log("更新后");
		console.log(document.getElementById('box').innerHTML); //2
	}
	//watch
})
</script>

<script type="text/javascript">
//什么是生命周期； 
//生命周期有哪些： beforecreate created beforemount  mounted  beforeupadate updated; 
//每个周期的特点：

//发送ajax请求最早在created; 
//页面组件，重新加载时会触发哪些生命周期；
</script>
</body>
</html>

一染星辰

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue 生命周期(详情版面试题+代码)

1.什么是生命周期?生命周期：是指一个事物从产生，到最后消亡的整个过程;vue：vue 实例组件的生命周期：实例，从创建到消毁的整个过程；在不同的生命周期，可以执行不同的操作；2.beforeupdate 和 updated 的区别是什么？...
复制链接

扫一扫