vue 为什么created（）初始化会输出五次？？

请贴出完整代码

<el-card class="box-card">

</div>

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">

<el-form-item label="商品相册">

<el-upload

:action="uploadUrl"

list-type="picture-card"

:on-preview="handlePreview"

:on-success="handleSuccess"

:on-remove="handleRemove"

multiple

</el-upload>

<el-checkbox v-model="numberValidateForm.imageUrl[index].main" v-for="(item,index) in numberValidateForm.imageUrl" :key="item.uid" @change="(value)=>{imageMainChange(value, index)}">是否显示为主图</el-checkbox>

<el-dialog :visible.sync="dialogVisible">

</el-dialog>

</el-form-item>

<el-form-item label="商品" prop="age">

<el-autocomplete

class="inline-input"

v-model="state1"

:fetch-suggestions="querySearch"

placeholder="请输入商品"

@select="handleSelect"

></el-autocomplete>

</el-form-item>

<el-form-item label="企业" prop="age">

<el-autocomplete

class="inline-input"

v-model="state1"

:fetch-suggestions="querySearch"

placeholder="请输入企业"

@select="handleSelect"

></el-autocomplete>

</el-form-item>

<el-form-item

label="品名"

prop="age"

:rules="[

{ required: true, message: '品名不能为空'},

{ type: '', message: '品名必须两个字以上'}

<el-input type="age" v-model.number="numberValidateForm.name" autocomplete="off"></el-input>

</el-form-item>

<el-form-item

label="货号"

prop="name"

:rules="[

{ required: true, message: '货号不能为空'}

<el-input type="name" v-model.number="numberValidateForm.sn" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="用料" prop="age">

<el-input type="age" v-model.number="numberValidateForm.yongliao" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="织造工艺" prop="age">

<el-input class="textarea" type="textarea" v-model.number="numberValidateForm.zhizao" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="染整工艺" prop="age">

<el-input class="textarea" type="textarea" v-model.number="numberValidateForm.ranzheng" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="开机数" prop="age">

<el-input type="age" v-model.number="numberValidateForm.kaiji" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="坯布价" prop="age">

<el-input type="age" v-model.number="numberValidateForm.pibu" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="后整价" prop="age">

<el-input type="age" v-model.number="numberValidateForm.houzheng" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="成本价" prop="age">

<el-input type="age" v-model.number="numberValidateForm.chengben" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="零售价" prop="age">

<el-input type="age" v-model.number="numberValidateForm.lingshou" autocomplete="off"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" size="mini" class="btn">保存</el-button>

<el-button plain size="mini" class="return-btn" @click="jump('/competing/list')">返回</el-button>

</div>

</el-form-item>

</el-form>

</div>

</el-card>

</div>

</template>

import axios from 'axios'

export default {

data() {

return {

//上传到后台的Api接口网址

uploadUrl:axios.defaults.baseURL+"rivalGoods/file/upload",

//激活即列出输入建议

restaurants: [],

state1: '',

state2: '',

//上传图片

dialogImageUrl: '',

dialogVisible: false,

//表单数据

numberValidateForm: {

imageUrl:[],

name: '',

sn:'',

yongliao:'',

zhizao:'',

ranzheng:'',

kaiji:'',

pibu:'',

houzheng:'',

chenggben:'',

lingshou:''

};

created(){

console.log('99999')

mounted() {

//激活即列出输入建议(商品)

this.restaurants = this.loadAll();

methods: {

//上传图片

handleRemove(file, fileList) {//移除图片

console.log(file, fileList);

handlePreview(file) {//预览图片

this.dialogImageUrl = file.url;

this.dialogVisible = true;

imageMainChange(value, index){//是否勾选是否显示主图

if(value){

this.numberValidateForm.imageUrl.forEach((item, idx)=>{

if(idx == index){

this.numberValidateForm.imageUrl[idx].main = true

}else{

this.numberValidateForm.imageUrl[idx].main = false

}

})

}

handleSuccess(response, file, fileList){//上传图片成功

//重新封装this.numberValidateForm.imageUrl

this.numberValidateForm.imageUrl.push({

uid: file.uid,

url: file.url,

fileId: response.data.id,

main: false

})

//激活即列出输入建议(商品)

querySearch(queryString, cb) {

var restaurants = this.restaurants;

var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;

// 调用 callback 返回建议列表的数据

cb(results);

createFilter(queryString) {

return (restaurant) => {

return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);

};

loadAll() {

return[

{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },

{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },

{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },

]

handleSelect(item) {

console.log(item);

}

</script>

#sortlist{

width: 100%;

.el-card{

width: 100%;

}

.text {

font-size: 14px;

}

.item {

margin-bottom: 18px;

}

.clearfix:before,

.clearfix:after {

display: table;

content: "";

}

.clearfix:after {

clear: both;

}

.box-card {

width: 480px;

}

::v-deep .ql-container{

height: 600px;

}

//图片上传

.avatar-uploader-icon[data-v-0fb7db25] {

border: 1px dashed #d9d9d9;

}

.avatar-uploader .el-upload {

border: 1px dashed #d9d9d9;

border-radius: 6px;

cursor: pointer;

position: relative;

overflow: hidden;

}

.avatar-uploader .el-upload:hover {

border-color: #409eff;

}

.avatar-uploader-icon {

font-size: 28px;

color: #8c939d;

width: 178px;

height: 178px;

line-height: 178px;

text-align: center;

}

.avatar {

width: 178px;

height: 178px;

display: block;

}

// 底部按钮

.box_btn{

width:100%;

height: 60px;

background: #fff;

position: fixed;

left: 200px;

bottom: 0;

z-index: 10;

}

.btn {

position: fixed;

bottom: 20px;

left: 60%;

}

.return-btn{

position: fixed;

bottom: 20px;

left: 55%;

}

.el-input , .textarea{

width: 40%;

}

</style>

我亲测了一下，你这个页面没问题。是不是你别的地方也引用这个页面了？引用了5次？

<el-tabs type="border-card" @tab-click="show_upsPage">

<el-tab-pane label="商品管理">

<el-menu

default-active="2"

class="el-menu-vertical-demo"

@open="handleOpen"

@close="handleClose"

background-color="#263445"

text-color="#fff"

active-text-color="#ffd04b">

<el-submenu index="1">

</template>

<el-menu-item-group>

<el-menu-item index="1-1" @click="jump('/cates/catelist')"><i class="el-icon-s-tools"></i>商品列表</el-menu-item>

</el-menu-item-group>

</el-submenu>

<el-submenu index="2">

</template>

<el-menu-item-group>

<el-menu-item index="2-1" @click="jump('/cates/sortlist')"><i class="el-icon-s-tools"></i>品种分类</el-menu-item>

</el-menu-item-group>

<el-menu-item-group>

<el-menu-item index="2-2" @click="jump('/cates/markesort')"><i class="el-icon-s-tools"></i>营销分类</el-menu-item>

</el-menu-item-group>

</el-submenu>

</el-menu>

</div>

<router-view></router-view>

</div>

</el-tab-pane>

<el-tab-pane label="营销管理">

<el-menu

default-active="2"

class="el-menu-vertical-demo"

@open="handleOpen"

@close="handleClose"

background-color="#263445"

text-color="#fff"

active-text-color="#ffd04b">

<el-submenu index="1">

</template>

<el-menu-item-group>

<el-menu-item index="1-1" @click="jump('/markes/list')"><i class="el-icon-s-tools"></i>首页管理</el-menu-item>

</el-menu-item-group>

</el-submenu>

</el-menu>

</div>

<router-view></router-view>

</div>

</el-tab-pane>

<el-tab-pane label="企业管理">

<el-menu

default-active="2"

class="el-menu-vertical-demo"

@open="handleOpen"

@close="handleClose"

background-color="#263445"

text-color="#fff"

active-text-color="#ffd04b">

<el-submenu index="1">

</template>

<el-menu-item-group>

<el-menu-item index="1-1" @click="jump('/company/content')"><i class="el-icon-s-tools"></i>企业介绍</el-menu-item>

</el-menu-item-group>

</el-submenu>

</el-menu>

</div>

<router-view></router-view>

</div>

</el-tab-pane>

<el-tab-pane label="系统管理">

<el-menu

default-active="2"

class="el-menu-vertical-demo"

@open="handleOpen"

@close="handleClose"

background-color="#263445"

text-color="#fff"

active-text-color="#ffd04b">

<el-submenu index="1">

</template>

<el-menu-item-group>

<el-menu-item index="1-1" @click="jump('/system/workers')"><i class="el-icon-s-tools"></i>后台管理</el-menu-item>

</el-menu-item-group>

<el-menu-item-group>

<el-menu-item index="1-2" @click="jump('/system/vip')"><i class="el-icon-s-tools"></i>会员管理</el-menu-item>

</el-menu-item-group>

<el-menu-item-group>

<el-menu-item index="1-3" @click="jump('/system/users')"><i class="el-icon-s-tools"></i>用户管理</el-menu-item>

</el-menu-item-group>

</el-submenu>

</el-menu>

</div>

<router-view></router-view>

</div>

</el-tab-pane>

<el-tab-pane label="竞品管理">

<el-menu

default-active="2"

class="el-menu-vertical-demo"

@open="handleOpen"

@close="handleClose"

background-color="#263445"

text-color="#fff"

active-text-color="#ffd04b">

<el-submenu index="1">

</template>

<el-menu-item-group>

<el-menu-item index="1-1" @click="jump('/competing/list')"><i class="el-icon-s-tools"></i>竞品列表</el-menu-item>

</el-menu-item-group>

</el-submenu>

<el-submenu index="2">

</template>

<el-menu-item-group>

<el-menu-item index="1-1" @click="jump('/company/list')"><i class="el-icon-s-tools"></i>企业列表</el-menu-item>

</el-menu-item-group>

</el-submenu>

</el-menu>

</div>

<router-view></router-view>

</div>

</el-tab-pane>

</el-tabs>

</div>

</template>

// import {getMenuListApi} from "@/api"

export default {

data(){

return{

tabsList:[]

}

// created(){

// this.initData();

// },

methods: {

handleOpen(key, keyPath) {

console.log(key, keyPath);

handleClose(key, keyPath) {

console.log(key, keyPath);

//获取菜单栏接口数据

initData () {

getMenuListApi({

appValue:2

})

.then(res => {

console.log(res.data)

this.tabsList=res.data;

})

show_upsPage(e){

console.log('show_upsPage',e)

this.initData(e.$attrs.id);

}

</script>

我猜下,是不是你模块化,比如template五次,就要调用template内的创建方法5次,或者是前面调用template的页面循环执行了5次,比如v-for里面创建了5次.

vue 为什么created（）初始化 会输出五次？？

vue 为什么created（）初始化会输出五次？？