首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue中data,computed,methods,created,mounted

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

2023-07-04 08:51:24 作者：不染126

这篇文章主要介绍了vue中的data,computed,methods,created,mounted用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

介绍一下vue的基本结构中各分类的含义以及他们的执行顺序

含义及执行顺序

1.首先created是最先执行的，它是一个生命周期，也叫钩子函数，用于页面还没加载完毕时发送请求，初始化data里的值。

2.data一般用来存放vue中的变量，通过return将数据返回到created中

3.methods用来写相关模块的函数以及功能的实现，格式为async+方法名，通常通过发送请求请求到后台数据

4.computed是界于created和mounted之间发生的，此时正是页面进行渲染的时候

5.mounted是加载完dom操作后才会触发，它和created一样只会执行一次，此时页面已经渲染完成，通常用于存放需要渲染的内容

下面通过代码段来简单描述

export default{
    data(){
      datas:[],
//这里的data是一个空数组用来存放从后端获取到的数据
}
    methods:{
       async getDatas(){
        let res = await get("/index/carousel/findAll");//发送请求
        this.datas = res.data;//将请求到的数据返回到空数组里
}
}
    created(){
     this.getDatas()//生命周期 还没加载时发送请求
}
}

不一定要每个都用到，根据自身需求而应用

vue2页面和mixins中相同的data created mounted computed watch methods优先级

data

页面中定义的 data 会覆盖 mixins 中同名的 data

在这里插入图片描述

created、mounted

先执行 mixins 中生命周期函数，再执行页面中的生命周期函数。

在这里插入图片描述

watch

先执行 mixins 中的 watch 监听，再执行页面中同名的 watch 监听。

在这里插入图片描述

computed

页面中定义的 computed 属性会覆盖 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');
    },
  },
}

在这里插入图片描述

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

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