vue的生命周期

Posted kinblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的生命周期相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的生命周期</title>
    <script src="./js/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="button" value="修改msg" @click="msg = ‘no‘">
    <h3 id="h3">{{ msg }}</h3>
  </div>
  <script>
    var vm = new Vue({
      el: ‘#app‘,
      data: {
        msg: "ok"
      },
      methods: {
        show() {
          console.log(‘执行了show方法‘)
        }
      },
      /*创建的四个事件*/
      /*实例创建前-在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化*/
      beforeCreate() {
        // console.log(this.msg);
        // this.show()
      },
      /*实例创建后-在created生命周期执行的时候,data和methods中的数据被初始化*/
      created() {
        // console.log(this.msg);
        // this.show()
      },
      /*模板挂载前-在beforeMount生命周期执行的时候,表示模板在内存中编译完成,但还未渲染到页面中*/
      beforeMount() {
        // console.log(document.getElementById(‘h3‘).innerText);
      },
      /*模板挂载后-在mounted生命周期执行的时候,将模板渲染到页面中,如果需要操作DOM节点,最早可以在这里进行*/
      mounted() {
        // console.log(document.getElementById(‘h3‘).innerText);
      },
      
      /*运行的两个事件*/
      /*数据更新前-在beforeUpdate生命周期执行的时候,将数据更新,但页面还没有被更新*/
      beforeUpdate() {
        // console.log(‘页面数据:‘ + document.getElementById(‘h3‘).innerText);
        // console.log(‘data数据:‘ + this.msg);
      },
      /*数据更新后-在updated生命周期执行的时候,将数据更新到页面中*/
      updated() {
        // console.log(‘页面数据:‘ + document.getElementById(‘h3‘).innerText);
        // console.log(‘data数据:‘ + this.msg);
      },

      /*销毁的两个事件*/
      /*销毁实例前-在beforeDestroy生命周期执行的时候, 实例进入销毁阶段,但功能还可以使用*/
      beforeDestroy() {

      },
      /*销毁实例后-在destroyed生命周期执行的时候,实例被销毁,功能不能使用*/
      destroyed() {

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

 

以上是关于vue的生命周期的主要内容,如果未能解决你的问题,请参考以下文章

在不存在的片段上调用片段生命周期和 onCreate 的问题

Android片段生命周期:onResume调用了两次

导航上的片段生命周期重叠

Android 片段生命周期

关于片段生命周期,何时调用片段的 onActivityResult?

理解片段事务期间片段的生命周期方法调用