Vue生命周期

最新推荐文章于 2024-07-22 11:56:16 发布

北海之灵

最新推荐文章于 2024-07-22 11:56:16 发布

阅读量252

点赞数 1

分类专栏： Vue 文章标签： Vue 生命周期

本文链接：https://blog.csdn.net/xukongjing1/article/details/81775366

版权

Vue 专栏收录该内容

35 篇文章 19 订阅

订阅专栏

一.组件创建期间的4个钩子函数

1.beforeCreate

实例完全被创建出来之前会执行这个函数，在这个阶段，data 和 methods中的数据都未被初始化，还不能访问。

2.created

实例已经创建出来了，如果要调用methods中的方法，或者操作data中的数据，最早只能在 created中操作。

3.beforeMount

模板已经编译完成，尚未渲染到页面上。

在beforeMount 执行的时候，页面中的元素没有被真正替换过来，只是之前写的一些模板字符串

4.mounted

内存中模板，已真实的挂载到页面,用户可以看到渲染好的页面了。

如果要操作dom,最早在mounted中操作，当执行完 mounted就表示，实例已经被完全创建好了。

二.组件运行期间的两个钩子函数

数据更新了之后会触发beforeUpdate和updated函数

1.beforeUpdate

根据data数据的改变，有选择性的触发0次到多次
数据被更新，界面没被更新。

当执行beforeUpdate的时候，页面中的显示数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步

2.updated

data 和页面中的数据已经保持同步了

三.组件销毁期间的两个钩子函数

1.beforeDestroyed

Vue实例就已经从运行阶段，进入到了销毁阶段；此时data和methods中的数据还在。

2.destroyed

实例完全被销毁。data和methods中的数据不存在了。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <input type="button" @click="change" value="修改msg"/>
    <h3 id="h3">{{msg}}</h3>
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      msg:'ok',
    },
    methods:{
      show(){
        console.log('执行了show方法');
      },
      change(){
        this.msg = "NO"
      }
    },
    //表示实例完全被创建出来之前执行它
    beforeCreate(){
      //data 和 methods中的数据都未被初始化
      //console.log(this.msg);
      //this.show()
    },
    created(){
      //如果要调用methods中的方法，或者操作data中的数据，最早，只能在 created中操作
      console.log(this.msg);
      this.show()
    },
    //模板已经编译完成，尚未渲染到页面上
    beforeMount(){
      //console.log(document.getElementById('h3').innerText)
      //在beforeMount 执行的时候，页面中的元素没有被真正替换过来，只是之前写的一些模板字符串
    },
    //内存中模板，已真实的挂载到页面,用户可以看到渲染好的页面了
    mounted(){
      //如果要操作dom,最早在mounted中操作
      //当执行完 mounted就表示，实例以及被完全创建好了，
      //Vue实例被初始化好了。
    },
    //运行中的两个事件
    //根据data数据的改变，有选择性的触发0次到多次
    //数据被更新，界面没被更新
    beforeUpdate(){
      console.log(document.getElementById('h3').innerText)
      console.log(this.msg)
      //当执行beforeUpdate的时候，页面中的显示数据，还是旧的，此时data
      //数据是最新的，页面尚未和最新的数据保持同步
    },
    updated(){
      // data  和页面中的数据已经保持同步了
    },
    beforeDestroyed(){
      //Vue实例就已经从运行阶段，进入到了销毁阶段；
    },
    destroyed(){

    }
  });
</script>
</html>