【Vue】学习笔记-Vue生命周期钩子

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执行，如果希望异步加载数据的话，就可以把获取数据的方法写在声明周期函数里。