学习笔记-Vue生命周期钩子| 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第4天

Vue生命周期钩子

页面加载时，主动执行某些程序，比如

之前在写methods时候，一般会在里面指定一些方法，比如getData获取数据

methods:{

    getData(){

        //do ajax

    }

}

当我们打开一个网页的时候，网页直接显示数据而不是打开某个事件之后再显示数据，会在组件加载的时候直接显示列表，所以通过事件触发来调用getData()是无法满足要求的，生命周期钩子就是来解决这个问题。

vue实例

new Vue()创建一个Vue实例，所有的组件其实都是Vue实例

|-App.vue

|  |-HelloWorld.vue

vue实例生命周期钩子

每个Vue实例在被创建（new Vue）都要经过一系列的初始化过程，这个过程会默认调用一些函数，这些函数就是Vue的生命周期钩子，例如：created()(组件初始化完成)和 mounted() 函数(模板已创建)，如果希望异步加载数据的话，就可以把获取数据的方法写在声明周期函数里。 注意：  无论顺序如何写，先执行created然后执行mounted

 图1

通常数据是异步和服务器获取，而不是直接写在data里，真正模拟数据加载写在methods，在页面加载的时候通过ajax获取数据。例如，当组件数据未加载完成时，显示【loading...】，加载完成后显示数据

思路：在标签中绑定v-if条件 loading为true加载"loading...",loading为false加载水果列表，代码如下：  

<template>

  <div id="app">

    <h1>水果列表</h1>

    <p v-if="loading" >loading...</p>

    <ul  v-if="!loading">

      <li v-for="(item,index) of fruitList" :key="index">

        {{item}}

      </li>

    </ul>

  </div>

</template>

<script>

export default {

  data() {

    return {

      fruitList:[],

      loading:true

    }

  },

  created() {

    this.getData();

  },

  methods: {

    getData(){

      setTimeout(()=>{

        this.fruitList = ["香蕉","苹果","鸭梨"];

        this.loading=false;

      },500)

    }

  },

}

</script>

总结

在组件加载的过程中会执行一些函数，这些函数会按照图1执行，如果希望异步加载数据的话，就可以把获取数据的方法写在声明周期函数里。