Vue实例的生命周期及钩子函数

文章目录

      • 一、什么是Vue的生命周期和钩子函数
      • 二、生命周期钩子函数的简单使用


更多关于Vue.js的系列文章请点击:Vue.js开发实践(0)-目录页


一、什么是Vue的生命周期和钩子函数

每一个Vue实例被创建出来、属性和选项渲染、el实例挂载再到其销毁过程被称为一个Vue实例的生命周期,在这一系列过程中,我们可以使用Vue的生命周期钩子函数在特定的时间对Vue实例进行一系列的操作。

以下是一个关于Vue实例生命周期的详解图:

Vue实例的生命周期及钩子函数_第1张图片

二、生命周期钩子函数的简单使用

关于各生命周期钩子函数的作用时刻:
Vue实例的生命周期及钩子函数_第2张图片使用的形式如下:

new Vue({
  el: '#home',
  mounted:function(){
	//...
  }
 })

或者

  mounted(){
  	//...
  }

需要注意的是,mounted 钩子函数不会承诺所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:

new Vue({
  el: '#home',
  mounted:function(){
	this.$nextTick(function(){
	//...
})
  }
 })

以下是一个简单的使用例子:

  • HelloWorld.vue
<template>
   <div id="hello">
     <h1>{{message}}h1>
   div>
template>

<script>
export default {
  data () {
    return {
      message: 'Welcome to Your Vue.js App'
    }
  },
   mounted(){
    //挂载实例完成后
    console.log("实例挂载完成钩子");
  },
  created(){
    console.log("实例创建完成钩子");
    this.showMessage();
  },
  methods: {
    showMessage(){
      console.log("实例创建完成之后才调用的方法");
    }
  }   
}
script>
  • index.html
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hellovuetitle>
  head>
  <body>
    <div id="home">
      <hello-world>hello-world>
    div>
  body>
html>
  • main,js
import HelloWorld from '@/components/HelloWorld.vue'
Vue.config.productionTip = false

 new Vue({
  el: '#home',
  components: {
  	HelloWorld
  }
 })

Vue实例的生命周期及钩子函数_第3张图片

你可能感兴趣的:(#,-----,【Vue.js入门】)