Vue框架基础5-生命周期

最新推荐文章于 2024-08-12 16:32:44 发布

一杆老狙

最新推荐文章于 2024-08-12 16:32:44 发布

阅读量127

点赞数 6

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

本文链接：https://blog.csdn.net/akindofo/article/details/124852165

版权

Vue框架基础专栏收录该内容

19 篇文章 1 订阅

订阅专栏

生命周期

生命周期，指的是组件从开始创建，到最终销毁，所经历的整个过程。
也就是从这个对象开始到浏览器页面关闭称为一个生命周期
这个过程中会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
图示：

生命周期钩子

create(创造) 阶段

beforeCreate()：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
created()：在实例创建完成后被立即同步调用

mount阶段

beforeMount()：在挂载开始之前被调用
mounted()：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。

update 阶段

beforeUpdate()：在数据发生改变后，DOM 被更新之前被调用
updated()：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用

destroy 阶段（Vue3中将这个改为了unmount阶段）

通常会销毁：启动的定时器、未完成的网络请求、打开的网络socket连接等
beforeDestroy()：实例销毁之前调用
destroyed()：实例销毁后调用

执行顺序示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
    <son></son>
</div>
<script src="../libs/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            message:'hello vue2.js'
        },
        components:{
          son:{
              template:`
              <div>{{info}}</div>
              `  ,
              data(){
                  return {
                      info:"hello vue3.js"
                  }
              },
              beforeCreate(){
                  console.log("子元素：beforeCreate")
              },
              created(){
                  console.log("子元素：created")
              },
              beforeMount(){
                  console.log("子元素：beforeMount")
              },
              mounted(){
                  console.log("子元素：mounted")
              },
              beforeUpdate(){
                  console.log("子元素：beforeUpdate")
              },
              updated(){
                  console.log("子元素：updated")
              },
              beforeDestroy(){
                  console.log("子元素：beforeDestroy")
              },
              destroyed(){
                  console.log("子元素：destroyed")
              }

          }
        },
        beforeCreate(){
            console.log("父元素：beforeCreate")
        },
        created(){
            console.log("父元素：created")
        },
        beforeMount(){
            console.log("父元素：beforeMount")
        },
        mounted(){
            console.log("父元素：mounted")
        },
        beforeUpdate(){
            console.log("父元素：beforeUpdate")
        },
        updated(){
            console.log("父元素：updated")
        },
        beforeDestroy(){
            console.log("父元素：beforeDestroy")
        },
        destroyed(){
            console.log("父元素：destroyed")
        }

    })
</script>
</body>
</html>

上面代码在控制台输出的内容

父元素：beforeCreate
父元素：created
父元素：beforeMount
子元素：beforeCreate
子元素：created
子元素：beforeMount
子元素：mounted
父元素：mounted

vm.message=“hello wordle”
父元素：beforeUpdate
父元素：updated
‘hello wordle’

vm.$children[0].info=“hello world2”
子元素：beforeUpdate
子元素：updated
‘hello world2’

vm.$destroy()
父元素：beforeDestroy
子元素：beforeDestroy
子元素：destroyed
父元素：destroyed
undefined

一杆老狙

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
5
评论
Vue框架基础5-生命周期

生命周期生命周期，指的是组件从开始创建，到最终销毁，所经历的整个过程。也就是从这个对象开始到浏览器页面关闭称为一个生命周期这个过程中会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。图示：生命周期钩子create(创造) 阶段beforeCreate()：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用created()：在实例创建完成后被立即同步调用mount阶段beforeMount()：在挂载开始之前被调用mounted()：
复制链接

扫一扫

专栏目录