Vue生命周期(11个钩子函数)「建议收藏」

Vue生命周期生命周期初识生命周期详解(八个钩子函数)生命周期生命周期:Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这个初始化,又会不同阶段默认调用一些函数执行,这些函数就是生命周期的钩子函数;生命周期钩子函数生命周期钩子函数,让够让咱们…

大家好,又见面了,我是你们的朋友全栈君。

Vue生命周期

生命周期初识

生命周期图.png

生命周期详解(八个钩子函数)

生命周期函数文字.png

  • 生命周期

生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;
在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,
在这个初始化,又会不同阶段默认调用一些函数执行,这些函数就是生命周期的钩子函数;

  • 生命周期钩子函数

生命周期钩子函数,让够让咱们在初始化实例时,添加自己的代码;
生命周期的钩子函数中的this,会默认指向vue的实例;

  • 钩子函数

beforeCreate created[可以获取数据及方法]
beforeMount mounted[可以获取到真实的DOM]
beforeUpdate updated[数据更新执行]
beforeDestroy destroyed[销毁vue实例,不再具有双向数据绑定的特点]

生命周期图.jpg

<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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/125994.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号