vue项目问题记录
1.table数据，点击修改，修改弹窗里面的数据，table数据一起被更改
解决方案：用Object.assign({}, row),拷贝一份,这是首层拷贝，不是最佳方案，用深拷贝比较好
2.导出数据，活动太多，input搜索框活动编号必填，作校验判断
解决方案：对比搜索<活动编号>和table里面的<活动编号>，用findIndex
const searchResult = this.tableArry.findIndex((item) => {
return item.eventNo === eventNo
})
if(searchResult === -1){
this.$message.error('无此编号，请重新查询')
return false
}
3.阻止显示生产模式的消息
Vue.config.productionTip = false
如果没有这行代码，或者设置为true，控制台就会多出这么一段代码。
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at vuejs.org/guide/deplo…
意思是：您正在开发模式下运行Vue。
在部署以进行生产时，请确保启用生产模式。
4.Object.create()
Object.create() 方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
5.reduce用法
arr.reduce((pre,cur,index,arr) => { },init)
var arr = [1,2,3]
var sum = arr.reduce((pre,cur)=>{ return pre+cur },0)
console.log(sum) // 6
6.节流和防抖
- 节流：在一定时间内，只发第一次，指定时间内不允许触发
- 防抖：在一定时间内，发了多次，只选最后一次
7.箭头函数和普通函数
let c = 4
const addX = x => n => n + x
const addThree = addX(3)
let d = addThree(c)
console.log('example partial application', d) // 7
let c = 4
function addX(x) {
return function(n) {
return n + x
}
}
const addThree = addX(3)
let d = addThree(c)
console.log('example partial application', d) //7
8.input组件封装无法实时更新问题
<!-- 发送短信验证码 公用组件 -->
<template>
<div>
<el-col :span="16">
<el-input placeholder="短信验证码" v-model.trim="newSmsCode" autocomplete="off"></el-input>
</el-col>
<el-col :span="8" class="t-r">
<el-button type="primary" class="ml20 wd85" plain @click.native="sendSmsCode">{{ smsBtnTxt }}</el-button>
</el-col>
</div>
</template>
<script>
export default {
props: {
smsCode: {
type: String,
default: ''
},
phoneNo: {
type: String,
default: ''
}
},
data () {
return {
canSend: true,
smsBtnTxt: '发送验证码'
}
},
components: {},
created () {
},
computed: {
newSmsCode: { //用computed计算属性
get() {
return this.smsCode
},
set(val) {
this.$emit('updated', val)
}
}
}
}
父组件
<sendSmsCode :phoneNo="formData.phoneNo" :smsCode="formData.smsCode" @updated="item=>formData.smsCode=item" @getSmsId="getSmsId"></sendSmsCode>
9.上传图片
问题：图片上传，红色提示还在 解决方案：用 记录图片地址，图片地址更新，红色消失
<template>
<div>
<!-- 图片上传 s-->
<el-checkbox-group v-model="imgUrl" v-show="false"></el-checkbox-group>
<el-upload
drag
class="upload-common"
ref="upload"
action=""
:limit="1"
:before-upload="limtUpload"
:http-request="getFile"
:on-remove="handleRemove"
:show-file-list="false"
:on-change="changeFile"
:file-list="curList"
accept="image/jpg,image/jpeg,image/png,image/JPG,image/JPEG,image/PNG"
list-type="picture">
<div v-if="btnLoading">
<span class="el-icon-loading"></span>
</div>
<div v-else>
<img v-if="imgUrl" :src="imgUrlPre + imgUrl" alt="">
<span v-else class="upload-icon"></span>
</div>
</el-upload>
</div>
</template>
<script>
export default {
props: {
imgUrl: String
}
}
10.图片后台配置，前段动态获得图片地址
解决方案：
11.做一个动态按钮，切换内网环境和外网环境
12.vue的data设置对象objJson，点击按钮页面数据没有更新
<template>
<div class="hello">
<h1 @click="clickObj">测试{{ objJson.a }}</h1>
<h1 @click="clickObj2">测试{{ objJson.b }}</h1>
</div>
</template>
<script>
import Vue from 'vue'
export default {
components: {
},
name: 'HelloWorld',
data () {
return {
objJson: {
}
}
},
created () {
},
methods: {
clickObj () {
this.objJson.a = 1
}，
clickObj2 () {
this.$set(this.objJson, 'b', 1)
}
}
}
</script>
<style scoped>
</style>
解决方法：调用this.$set方法，或者在data，赋默认值
13.vue-cli版本
vue-cli2.x创建的项目有build文件夹，包含webpack.base.conf.js，webpack.dev.conf.js，webpack.pro.conf.js多个配置文件。 vue-cli3.x以上，只有vue.config.js一个配置文件
14.super 关键字的作用
super 这个关键字，既可以当做函数使用，也可以当做对象使用。
这两种情况下，它的用法完全不用。
（1） 当做函数使用
`class A {}
class B extends A { constructor() {
super(); // ES6 要求，子类的构造函数必须执行一次 super 函数，否则会报错。
} }`
注：在 constructor 中必须调用 super 方法，因为子类没有自己的 this 对象，而是继承父类的 this 对象，然后对其进行加工,而 super 就代表了父类的构造函数。super 虽然代表了父类 A 的构造函数，但是返回的是子类 B 的实例，即 super 内部的 this 指的是 B，因此 super() 在这里相当于 ```A.prototype.constructor.call(this, props)``。
（2） 当做对象使用
`class A { c() { return 2; } }
class B extends A { constructor() { super(); console.log(super.c()); // 2 } }`
let b = new B(); 上面代码中，子类 B 当中的 super.c()，就是将 super 当作一个对象使用。这时，super 在普通方法之中，指向 A.prototype，所以 super.c() 就相当于 A.prototype.c()`。
