Vue 生命周期详解

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

w_lightning

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

阅读量142

点赞数

分类专栏： Vue 文章标签： vue.js 前端框架

原文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/104623260?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162925491816780255283152%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162925491816780255283152&biz_id=0&utm

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

w_lightning

关注

0
点赞
踩
0

收藏

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

Vue生命周期生命周期初识生命周期详解（八个钩子函数）生命周期生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；生命周期钩子函数生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；生命周期的钩子函数中的this，会默认指向vue的实例;钩子函数beforeCreat
复制链接

扫一扫