Vue生命周期
生命周期初识
生命周期详解（八个钩子函数）
- 生命周期
生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；
- 生命周期钩子函数
生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
生命周期的钩子函数中的this，会默认指向vue的实例;
- 钩子函数
beforeCreate created[可以获取数据及方法]
beforeMount mounted[可以获取到真实的DOM]
beforeUpdate updated[数据更新执行]
beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]
<body>
<div id="app">
<div>
{
{
msg}}
</div>
<ul>
<li v-for="a in arr"></li>
</ul>
<button @click="fn">点我一下</button>
</div>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；
// 生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
//生命周期的钩子函数中的this，会默认指向vue的实例
// beforeCreate created
// beforeMount mounted
// beforeUpdate updated
// beforeDestroy destroyed
// function Vue(options){
// let a = document.querySelector(options.el);
// for(let key in options.data){
// Object.defineProperty(options.data,key,{
// get(){
// },
// set(){
// }
// })
// }
// }
// new Vue({el:"#app",data:{}})
let vm = new Vue({
data: {
msg: "hello",
arr: [1, 2, 3, 4]
},
// 1. 在这个钩子函数执行之前初始化事件以及生命周期
beforeCreate() {
// 1. 在这个钩子函数中，不能获取data中的数据
// console.log(this.msg);
// 2. 这个函数不能操作DOM；
// console.log(document.getElementsByTagName("li"))
},
// 给Vue的实例注入数据，进行数据监听
created() {
// 在created发送请求
// 1. 可以获取到data中的数据
// 2. 不能操作DOM的
//console.log(this.msg);
// console.log(document.getElementsByTagName("li"))
axios.get("./carts.json").then(data => {
// 异步的；
this.arr = data.data;
console.log(2);
})
},
methods: {
getData() {
},
fn() {
this.msg = "world"
}
},
// 执行之前，判断是否有el,template;编译
beforeMount() {
// console.log(document.getElementsByTagName("li"))
},
// 挂载完毕
mounted() {
// debugger
// 挂载： 把VUE实例生成的虚拟的DOM转成真实的DOM，放在了页面中，这就是挂载；
// 编译出的DOM把原有的DOM替换完毕；
// 可以获取最终的DOM元素
// let d = {type:"div",a:"1",chidlren:[{type:"span",children:[]}]}
console.log(document.getElementsByTagName("li"));
//console.log("mounted","初始化");
},
// 当数据更新时，会调用beforeUpdate 和updated钩子函数；上面四个不再运行
beforeUpdate() {
console.log("beforeUpdate", "更新之前");
console.log(this.msg)
// 更新数据之前执行
},
updated() {
console.log("beforeUpdate", "更新之后");
// 数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数
},
// 销毁之前
beforeDestroy() {
// 销毁之前
// 清除定时器
console.log("beforeDestroy");
},
// 销毁之后
destroyed() {
console.log("destroyed");
// 销毁子组件，销毁观察者，事件监听者
// 元素的事件还在，但是更改数据不会再让视图进行更新了；
}
}).$mount("#app");
// vm.$destroy();
// console.log(vm);
// 在项目中，你遇到过什么问题，怎么解决的？
// 准备
</script>
</body>
</html>
Vue的DOM异步渲染
<body>
<div id="app">
<ul>
<li v-for="a in arr">{
{
a}}</li>
</ul>
{
{
sum}}
</div>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
data:{
arr:[1,2,3]
},
created(){
// 此时并没有编译模板
// 如果在created改变数据，那么编译进行一次；如果在mounted中改数据，会再次编译模板；
console.log(100);
},
beforeMount(){
console.log(200);
//this.arr=[1,2,3,4];// 开始编译模板编译原有数据编译3个li,存在内存中，
当数据更新时，立即将内存中的模板编译成4li;最后挂载到真实的DOM上；不会引发beforeUpdate函数的调用
},
computed:{
sum(){
// 在挂载的过程中,执行的这个函数
console.log(1);
return 100;
}
},
// 编译模板
// 在mounted之前改数据，不会调用beforeUpdate这个函数；
// DOM 已经挂载完毕
mounted(){
console.log(300);
this.arr=[1,2,3,4];
// 开始编译模板编译原有数据编译3个li,存在内存中，并且直接挂载到了真实DOM中，当数据更新时，
立即将内存中的模板编译成4li;再次把最新挂载到真实的DOM上；会引发beforeUpdate函数的调用
// VUE中DOM的更新是异步的；
// 如何在mounted中操作最新的DOM呢？
// $nextTick需要传入一个回调函数，会当真实的DOM再次更新完成，会立即调用这个回调函数；
this.$nextTick(()=>{
let oLis = document.getElementsByTagName("li")
console.log(oLis.length);
});
},
beforeUpdate(){
console.log("beforeUpdate");
}
}).$mount("#app");
</script>
</body>
</html>
生命周期（其他三个钩子函数）
component 和keep-alive
- component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件；
- 闭合标签使用组件
component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件
component: 每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁
<component is=“second”>
- keep-alive : keep: 保持 alive:活力
VUE项目的优化： keep-alive
- keep-alive : keep: 保持 alive:活力
<keep-alive>
keep-alive:用于缓存组件，如果该组件还会再启用，那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，也不需要再创建
<component v-bind:is=“one”> //如果是动态属性，那么会去data中取值
</keep-alive>
三个钩子函数详解
- 当keep-alive 缓存组件才会有的生命周期的钩子函数
- activated deactivated
- errorCaptured 当子孙组件出错时，会调用这个钩子函数
// keep-alive 缓存组件 生命周期的钩子函数 activated deactivated
// 生命周期的钩子函数
activated() {
// 当缓存组件有被显示出来时，会触发这个钩子函数
console.log(100);
},
deactivated() {
// 当缓存的组件隐藏时，会触发这个钩子函数；
console.log(200);
},
// 当子孙组件出错时，会调用这个钩子函数
errorCaptured(a, b, c) {
// 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
console.log(a);
console.log(b);
console.log©;
console.log(“子组件报错”)
},
<body>
<div id="app">
<button @click="fn">点一点</button>
<!-- // component : 内置组件，根据is属性来显示对应的组件;
is属性的属性值保持和组件名字一致；然后可以显示对应的组件
// 如果是动态属性，那么会去data中取值 -->
<!-- <component is="second"></component> -->
<keep-alive>
<!-- keep-alive:用于缓存组件，如果该组件还会再启用，
那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，
也不需要再创建 -->
<component v-bind:is="one"></component>
</keep-alive>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件；
// 闭合标签使用组件
// component: 每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁
// keep-alive : keep: 保持 alive:活力
// VUE项目的优化： keep-alive
let kkk = {
data() {
return {
a: 'cc'
}
},
template: "<div>{
{a}}</div>"
}
let first = {
destroyed() {
console.log("销毁")
},
components: {
kkk
},
// keep-alive 缓存组件 生命周期的钩子函数 activated deactivated
// 生命周期的钩子函数
activated() {
// 当缓存组件有被显示出来时，会触发这个钩子函数
console.log(100);
},
deactivated() {
// 当缓存的组件隐藏时，会触发这个钩子函数；
console.log(200);
},
// 当子孙组件出错时，会调用这个钩子函数
errorCaptured(a, b, c) {
// 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、
发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
console.log(a);
console.log(b);
console.log(c);
console.log("子组件报错")
},
template: "<div>我是老大<kkk></kkk></div>"
};
let second = {
template: "<div>我是老二</div>"
}
let third = {
template: "<div>我是老三</div>"
}
let vm = new Vue({
el: "#app",
data: {
one: "first"
},
methods: {
fn() {
let ary = ["first", "second", "third"];
let index = ary.indexOf(this.one);
if (index < 2) {
this.one = ary[index + 1];
} else {
this.one = ary[0];
}
//
// switch (this.one) {
// case "first":
// this.one = "second"
// break;
// case "second":
// this.one = "third"
// break;
// default:
// this.one = "first"
// break;
// }
}
},
components: {
first,
second,
third
},
});
</script>
</body>
今天的文章vue生命周期的钩子函数_react生命周期钩子函数有哪些[通俗易懂]分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/74577.html
