关于vue.js: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函数的时候,组件曾经齐全销毁(渣都不剩),此时组件中的所有的数据,办法,指令,过滤器…都曾经销毁(不可用了)。

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>

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>

销毁

  • 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>

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据