实际开发中Vue最常用的生命周期函数

zhuanbike 2022-1-27 853

生命周期函数比较难理解,但是也是必备的基础,在实际开发当中,我们最常用的生命周期函数是哪个呢——个人认为是使用axios请求数据的时候, created()来调用axios请求,也可与在组件beforeupdate之前先把数据请求过来待用。

axios请求例子:

<template>
  <div class="home">
  </div>
</template>
<script>
//引入axios
import axios from 'axios';
//补充知识点:vue的生命周期
//vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染》更新》渲染、卸载等一系列过程,我们称这是vue的生命周期。
//通俗说就是vue实例从创建到销毁的过程,就是生命周期
//注意:事件响应方法中的this直接指向的是vue的实例
export default {
  name: 'Home',
  created(){
  //生命周期钩子函数
  //一般可以在created函数中调用ajax获取页面初始化所需的数据
  //这里的接口用在public文件夹创建的data.josn代替
  //接口路径:在项目启动的时候,是以public文件夹为根节点,例如:编译成功后 http://localhost:8080/就是访问public文件夹里的index.html
  
  //.then((res)=>{})里的res是指请求接口后成功返回的响应数据,包含请求头、请求体、等信息
  axios.get('/data.json').then((res)=>{
    console.log(res)
  })
  }
}
</script>


生命周期常用代码:

<template>
  <div class="first-app">
  {{msg}}
  <br/>
  {{msg1}}
  <Confin text='注册' @message="getMeaasge"></Confin>
  </div>
</template>
<script>
import Confin from '@/components/sub/Confin';
export default {
  name: 'Fist',
  components: {Confin}, //注册组件,比如要插入另外一个写好的VUE文件买这个时候就需要添加
  props:[], //接受父亲的参数
  data () { 
    return {
      msg: 'Welcome to Your FistApp ddddd'
    }
  },
  mounted(){ //dom挂在完成 相当于onload,方法的调用
    //this.getMeaasge();
  },
  computed:{ //计算属性
    msg1(){
      return this.msg+'1';
    }
  },
  methods:{ //这里面添加所有的方法
    getMeaasge(val){
      alert(val)
    }
  }
}
</script>
<style>
.first-app{
  color:#f00;
  font-size:40px;
}
</style>


最新回复 (0)
发新帖