头图

P20. vue3 生命周期 勾子

Vue每个生命周期的详细介绍:
beforeCreate(){}:Vue创建前,此阶段为实例初始化之后,this指向创建的实例,数据观察,数据监听事件机制都未形成,不能获得DOM节点。data,computed,watch,methods 上的方法和数据均不能访问,注:date和methods的数据都还未初始化。

Created(){}: Vue创建后,此阶段为实例初始化之后,data、props、computed的初始化导入完成, 注:要调用methods中的方法,或者操作data中的数据,最早只能在Created中操作

能访问 data computed watch methods 上的方法和数据,初始化完成时的事件写这个里面,

此阶段还未挂载DOM。

beforeMount(){}: Vue载入前,阶段执行时, 模板已经在内存中编译好了,但是未挂载到页面中,(页面还是旧的)

注:这个阶段是过渡性的,一般一个项目只能用到一两次。

Mounted(){}:Vue载入后,(完成创建vm.$el,和双向绑定); 只要执行完mounted,就表示整个Vue实例已经初始化完成了,此时组件已经脱离里了创建阶段, 进入到了运行阶段。

beforeUpdate(){}:Vue更新前, 当执行beforeUpdate的时候,页面中显示的数据还是旧的,此时date数据是最新的,页面尚未和最新数据数据保持同步。但是DOM中的数据会改变,这是vue双向数据绑定的作用,可在更新前访问现有的DOM,如手动移出添加的事件监听器。

Updated(){}:Vue更新后, Updated执行时数据已经保持同步了,都是最新的,

完成虚拟DOM的重新渲染和打补丁。
组件DOM已完成更新,可执行依赖的DOM操作。

注意:不要在此函数中操作数据(修改属性),否则就会陷入死循环。

beforeUnmount(){}:(Vue销毁前,可做一些删除提示,比如:您确定删除**吗?)

当执行beforeDestroy的时候,Vue实例就已经从运行阶段进入到销毁阶段了。实例上的所有date和methods以及过滤器和指令都是处于可用状态,此时还没有真正的执行销毁过程。

unmounted(){}:Vue销毁后, 当执行到destroted函数的时候,组件已经完全销毁(渣都不剩),此时组件中的所有的数据,方法,指令,过滤器...都已经销毁(不可用了)。

image.png

create

  • App.vue
<script>
import Hello from "./components/Hello.vue";
export default {
  data() {
    return {
      message: '',
    };
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    Hello
  }
}

</script>

<template>
  <div>
    <Hello/>

  </div>

</template>


  • Hello.vue
<template>
  
  <div>Hellokugou</div>
  
</template>

<script>

export default {
  data(){
    return{
      counter: 0,
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },
  name: "Hello"
}
</script>

<style scoped>

</style>

image.png

update

  • App.vue
<script>
import Hello from "./components/Hello.vue";
export default {
  data() {
    return {
      message: '',
    };
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    Hello
  }
}

</script>

<template>
  <div>
    <Hello/>

  </div>

</template>


  • Hello.vue
<template>
  <div>
    <div>Hellokugou</div>
    <h2>{{counter}}</h2>
    <button @click="counter++">change counter</button>
  </div>


</template>

<script>

export default {
  data(){
    return{
      counter: 0,
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },
  name: "Hello"
}
</script>

<style scoped>

</style>

image.png

image.png

image.png

销毁

  • App.vue
<script>
import Hello from "./components/Hello.vue";
export default {
  data() {
    return {
      message: '',
      isShow: true
    };
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    Hello
  }
}

</script>

<template>
  <div>
    <Hello v-if="isShow"/>
    <button @click="isShow=!isShow">销毁Hello组件</button>

  </div>

</template>



  • Hello.vue
<template>
  <div>
    <div>Hellokugou</div>
    <h2>{{counter}}</h2>
    <button @click="counter++">change counter</button>
  </div>


</template>

<script>

export default {
  data(){
    return{
      counter: 0,
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },
  name: "Hello"
}
</script>

<style scoped>

</style>

image.png

image.png
image.png

这个人很懒,没有什么说的。

89 声望
15 粉丝
0 条评论
推荐阅读
P34. vuex 状态管理
App.vue {代码...} Home.vue {代码...} index.js {代码...}

台湾省委书记阅读 78

封面图
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.4k评论 7

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.1k评论 7

一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图

这个人很懒,没有什么说的。

89 声望
15 粉丝
宣传栏