vue中的data,computed,methods,created,mounted用法及說明

更新時(shí)間：2023年07月04日 08:51:23 作者：不染126

這篇文章主要介紹了vue中的data,computed,methods,created,mounted用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue中的data,computed,methods,created,mounted

介紹一下vue的基本結(jié)構(gòu)中各分類的含義以及他們的執(zhí)行順序

含義及執(zhí)行順序

1.首先created是最先執(zhí)行的，它是一個(gè)生命周期，也叫鉤子函數(shù)，用于頁面還沒加載完畢時(shí)發(fā)送請(qǐng)求，初始化data里的值。

2.data一般用來存放vue中的變量，通過return將數(shù)據(jù)返回到created中

3.methods用來寫相關(guān)模塊的函數(shù)以及功能的實(shí)現(xiàn)，格式為async+方法名，通常通過發(fā)送請(qǐng)求請(qǐng)求到后臺(tái)數(shù)據(jù)

4.computed是界于created和mounted之間發(fā)生的，此時(shí)正是頁面進(jìn)行渲染的時(shí)候

5.mounted是加載完dom操作后才會(huì)觸發(fā)，它和created一樣只會(huì)執(zhí)行一次，此時(shí)頁面已經(jīng)渲染完成，通常用于存放需要渲染的內(nèi)容

下面通過代碼段來簡單描述

export default{
? ? data(){
? ? ? datas:[],
//這里的data是一個(gè)空數(shù)組用來存放從后端獲取到的數(shù)據(jù)
}
? ? methods:{
? ? ? ?async getDatas(){
? ? ? ? let res = await get("/index/carousel/findAll");//發(fā)送請(qǐng)求
? ? ? ? this.datas = res.data;//將請(qǐng)求到的數(shù)據(jù)返回到空數(shù)組里
}
}
? ? created(){
? ? ?this.getDatas()//生命周期 還沒加載時(shí)發(fā)送請(qǐng)求
}
}

不一定要每個(gè)都用到，根據(jù)自身需求而應(yīng)用

vue2頁面和mixins中相同的data created mounted computed watch methods優(yōu)先級(jí)

data

頁面中定義的 data 會(huì)覆蓋 mixins 中同名的 data

在這里插入圖片描述

created、mounted

先執(zhí)行 mixins 中生命周期函數(shù)，再執(zhí)行頁面中的生命周期函數(shù)。

在這里插入圖片描述

watch

先執(zhí)行 mixins 中的 watch 監(jiān)聽，再執(zhí)行頁面中同名的 watch 監(jiān)聽。

在這里插入圖片描述

computed

頁面中定義的 computed 屬性會(huì)覆蓋 mixins 中同名的 computed 屬性。

在這里插入圖片描述

methods

頁面中定義的 methods 覆蓋mixins中同名的 methods 。

在這里插入圖片描述

演示代碼如下

頁面 html 代碼

<template>
  <div>
    <el-input v-model="value"></el-input>
    <el-button type="primary" @click="onSubmit">submit</el-button>
    <div>{{ text }}</div>
  </div>
</template>

頁面 js 代碼

export default {
  components: {
    DetailsTab,
    DataTab,
  },
  mixins: [testMixin],
  data() {
    return {
      pageData: 'this is page data',
      commonData: 'this is common data in page',
      value: '',
    }
  },
  watch:{
    value() {
      console.log('page watch value');
    },
  },
  computed: {
    text() {
      const text = `The input value is ${this.value}, this text is from page computed`;
      console.log(text);
      return text;
    },
  },
  created() {
    console.log('page created');
  },
  mounted() {
    console.log('page mounted');
    console.log(this.pageData);
    console.log(this.commonData);
    console.log(this.mixinsData);
  },
  methods: {
    onSubmit() {
      console.log('page methods');
    },
  },
}

mixins 代碼

export default {
  data() {
    return {
      mixinsData: 'this is mixins data',
      commonData: 'this is common data in mixins',
    }
  },
  watch:{
    value() {
      console.log('mixins watch value');
    },
  },
  computed: {
    text() {
      const text = `The input value is ${this.value}, this text is from mixins computed`;
      console.log(text);
      return text;
    },
  },
  created() {
    console.log('mixins created');
  },
  mounted() {
    console.log('mixins mounted');
  },
  methods: {
    onSubmit() {
      console.log('mixins methods');
    },
  },
}

在這里插入圖片描述