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

Question

Answer 1

<template>

    <div id="sortlist">

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

            <div slot="header" class="clearfix">

                <span>新增竞品</span>

            </div>

            <div class="content">

                    <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

                            >

                            <i class="el-icon-plus"></i>

                            </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">

                                 <img width="100%" :src="dialogImageUrl" alt=""> 

                            </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>

                            <div class="box_btn">

                                <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>

 

<script>

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>

 

<style lang="scss" scoped>

    #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>