• vue生命周期钩子函数


    示例图

    home代码

    <template>
      <!-- 所有的内容要被根节点包含起来 -->
      <div id="life">
    
        生命周期函数的演示 ---{{msg}}
    
        <br>
        <button @click="setMsg()">执行方法改变msg</button>
      </div>
    
    </template>
    
    
    <script>
    /*
    
      生命周期函数/生命周期钩子: 
    
        组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法  这些方法就叫做生命周期函数
    */
    export default {
      data() {
        return {
          msg: "msg"
        };
      },
      methods: {
        setMsg() {
          this.msg = "我是改变后的数据";
        }
      },
    
      beforeCreate() {
        console.log("实例刚刚被创建1");
      },
      created() {
        console.log("实例已经创建完成2");
      },
      beforeMount() {
        console.log("模板编译之前3");
      },
      mounted() {
        /*请求数据,操作dom , 放在这个里面  mounted*/
        console.log("模板编译完成4");
      },
      beforeUpdate() {
        console.log("数据更新之前");
      },
      updated() {
        console.log("数据更新完毕");
      },
      beforeDestroy() {
        /*页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数*/
        console.log("实例销毁之前");
      },
      destroyed() {
        console.log("实例销毁完成");
      }
    };
    </script>

     app代码

    <template>
      <div id="app">
        <v-home v-if="flag"></v-home>
        <button @click="clickBtn">组件挂载/销毁</button>
      </div>
    </template>
    
    <script>
    import Home from './components/Home';
    export default {
      name: "app",
      data() {
        return {
          flag:true
        };
      },
      components: {
        'v-home':Home
      },
      methods:{
        clickBtn() {
          this.flag = this.flag?false:true;
        }
      }
    };
    </script>
    
    <style>
    
    </style>  

     效果:

    总结:比较常用的

    mounted:用于请求接口渲染数据时候
    beforeDestroy:用于页面销毁时,保存页面里的某些数据时候
  • 相关阅读:
    工作流flowable官方文档阅读笔记2
    bladex代码生成表单字典(非普通字典)改造
    bladex代码生成改造字典(表管理字段带入)
    bladex前端页面设置
    重链剖分
    CodeForces 311B
    洛谷 P6302
    AtCoder abc164_f
    ISIJ2020 不知道算不算游记
    AtCoder abc165
  • 原文地址:https://www.cnblogs.com/v616/p/11262774.html
Copyright © 2020-2023  润新知