Vue生命周期

very good154

于 2023-08-05 19:46:26 发布

阅读量238

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_70457067/article/details/132120967

版权

1.什么是Vue生命周期

Vue生命周期就是vue创建到销毁的全过程，也就是new vue()开始就是生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。

2.钩子函数

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeUnmount	unmount

生命周期的过程，以及钩子函数的调用时机

3.初始化阶段

new Vue() —— Vue实例化（组件也是一个小的Vue实例）
Init Events & Lifecycle – 初始化事件和生命周期函数
beforeCreate – 生命周期钩子函数被执行
.Init injections&reactivity – Vue内部添加data和methods等
created – 生命周期钩子函数被执行, 实例创建

beforeCreate(初始化之前)

这时data和methods还未初始化到Vue内部，不能访问


beforeCreate() {
    console.log('----beforeCreate----')
    console.log(this.msg) //undefined
  }

Created(初始化之后)

data和methods初始化完成后，可以在created生命周期函数中发起ajax请求，从而初始化data数据


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

4.挂载阶段

1.template选项检查

有 - 编译template返回render渲染函数

无 – 编译el选项对应标签作为template(要渲染的模板)

2.虚拟DOM挂载成真实DOM之前

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

beforeMount(挂在前)

当vue实例中，el为挂载目标，未对el进行定义，则this.el显示undefined，但页面中存在template也能识别挂载目标，因为template可以被看成占位符。如果对其进

行定义则显示<div id="app"></div>，故所以，beforeMount读取不了真实的el，在mounted才能读取到真实的el，因为el只有渲染完成后才会存在。这里讲的el是真

实的el。在真实的el之前存在前，在beforeMount中的其实是页面中的#app，是挂载的目标。


  beforeMount() {
    console.log('----beforeMount----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//undefined
  },

Mount(挂载后)

此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动

<template>
  <div id="app">
    <span :model="msg"></span>
  </div>
</template>
<script>

mounted() {
    console.log('----mounted----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//<div id="app"><span model="msg"></span></div>
  },

</script>

5.更新阶段

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

beforeUpdate(更新前)

前提: data数据改变才执行；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用

<template>
<ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {{ val }}
          </li>
</ul>
</template>


    beforeUpdate(){
        console.log("beforeUpdate -- 执行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
    },

Update(更新后)

场景: 获取更新后的真实DOM;数据更新后执行

<template>
<ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {{ val }}
          </li>
</ul>
</template>
<script>
updated(){
        console.log("updated -- 执行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // 获取到arr中的数据
    }
</script>