当做学习笔记小本本的,大部分不是原创,只是记录,会在最后贴参考文章和作者
1....通配符
引用
props:{
...FormItem.props, //获取FormItem组件内props内的所有值
action: {
type: String,
default: '/puzzle/image/upload'
},
}
4.3 Use array spreads ... to copy arrays.
使用扩展符来复制数组
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i += 1) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
同object.assign方法
//object.assign方法 第一个参数:默认的赋值对象 参数2:如果有个性化定制,就赋值这个覆盖参数1
const finalConfig=Object.assign(basicConfig,config)
//es6写法
const finalConfig={...basicConfig,...config}
2.props中可传值的类型为多选,写为数组形式
* 指定上传图片宽度
* 如果入参为Number, 则图片宽度必须等于width
* 如果入参为数组, [min, max], 则图片 min <= width <= max
* 否则上传失败并提示
*/
disabled: {
type: Boolean,
},
width: [Number, Array],
// 指定上传图片高度
height: [Number, Array],
maxSize: Number,
3.父子组件通讯的方式(除去事件)
v-model
v-model 是vue的语法糖，完全写法是触发input事件，通过value属性实现父子传值，子级设置props中接收value,就可以使用
//父级
<child v-model="something"></child>
<child
v-bind:value="something"
v-on:input="something = $event.target.value">
</child>
//子级
props:{
value:{
type: String
}
}
//传值时直接触发input方法
this.$emit('input', url);
.sync
在父级引用的子级中注册属性名加.sync，父级得到的valueChild就是从子级传过来的值。
<child :show.sync='valueChild'></child>
在子级中触发update事件来传值，写法 update:设置的属性名
this.$emit('update:show', false); //触发 input 事件，并传入新值
可用场景
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
4.可替代过滤器写法
使用computed过滤计算数据，返回模板字符串。
maxSize accept 都是从组件的props里获取到的，是从外层传入的数据。
computed: {
fileName() {
return this.value && this.value.split('/').pop();
},
sizeLimitDesc() {
if (!this.maxSize) {
return '大小: 无限制';
}
return `大小: ${this.maxSize}KB以内`;
},
typeLimitDesc() {
if (!this.accept) {
return '格式: 无限制';
}
if (this.accept === 'image/*') {
return '格式: 支持图片类型, 包括jpg, png, gif, svg等';
}
return `格式: 支持${this.accept.replace(/image\//g, '')}`;
}
}
5.关于Promise
Promise对象有三种状态：pending(进行中)、resoleved(fulfilled,已完成)、rejected(已失败)，根据异步操作的结果决定处于何种状态。一旦状态改变就不可再变，状态改变仅有两种pending=>rejected、pending=>resolved。
Promise实例
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value);
}); //done
一般Promise中用于进行异步操作，网络请求、图片加载的onload方法等等。
在实际写项目中，我是因为在Promise中做了异步操作，这些异步操作在得到数据后才会执行then()方法，比较方便。
Promise 接受两个参数：resolve和reject。这是两个由JavaScript引擎自动提供的函数，不用自己部署。
resolve();
resolve函数在异步操作成功时调用，作用是将Promise对象的状态由pending变为resolved，并将异步操作的结果传递出去。
reject();
reject函数在异步操作失败时调用，作用是将Promise对象的状态由pending变为reject，将异步操作报错传递出去。
then();
Promise对象可以调用的一个回调函数，会返回一个Promise对象。前一个then方法的返回值作为后一个then方法的参数：
let func = function() {
return new Promise((resolve, reject) => {
resolve('返回值');
});
};
let cb = function() {
return '新的值';
}
//第一个then return出“新的值”作为下一个then方法传入的参数
func().then(function () {
return cb();
}).then(resp => {
console.warn(resp);
console.warn('1 =========<');
});
//打印结果
//新的值
//1 ==========<
//第一个then方法只是调用cb()方法，没有return值给下一个then，所以是undefined
func().then(function () {
cb();
}).then(resp => {
console.warn(resp);
console.warn('2 =========<');
});
//打印结果
//undefined
//2 ===========<
then方法也接收两个参数，成功或失败时调用的方法，一般只写一个成功时调用的方法，因为不成功可以直接调用Promise对象的.catch方法
catch();
//以下两种方法不等价
somePromise().then(function(){
return someOtherPromise();
}).catch(function(err){
//error
});
///////////////////////////////
somePromise().then(function(){
return someOtherPromise();
},function(err){
//error
});
6.async await
因为用到了Promise，百度说用async函数和Promise一起食用更佳。
async就是异步的意思，所以是来处理异步操作的，我组里的大佬都是用这个写函数前面来做网络请求的。
大概长这样：
//这是个上传图片做网络请求的函数
async handleUpload(options) {
const fd = new FormData();
fd.append('file', options.file);
const config = {
headers:{ 'Content-Type':'multipart/form-data' }
};
const url = await this.$request.post('/puzzle/image/upload', fd, config);
//v-model给父级传数据 触发input方法 相当于修改了props中的数据
this.$emit('input', url);
},
async怎么用捏：
它作为一个关键字放到函数前面，用于表示函数是一个异步函数，也就意味着该函数的执行不会阻塞后面代码的执行。
写一个async函数：
async function timeout() {
return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');
console.log(timeout())
打印结果：
打印timeout(); 发现async函数返回的是一个promise对象，只要是Promise对象就可以使用then catch方法，嘿嘿又get到了一个东东。
await怎么用捏：
// 只能在async函数内部使用
let value = await promise
关键词await可以让JavaScript进行等待，直到一个promise执行并返回它的结果，JavaScript才会继续往下执行。
7.try/catch/finally
try语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
finally 语句在 try 和 catch 之后无论有无异常都会执行。
注意： catch 和 finally 语句都是可选的，但你在使用 try 语句时必须至少使用一个。
提示： 当错误发生时， JavaScript 会停止执行，并生成一个错误信息。使用 throw 语句 来创建自定义消息(抛出异常)。如果你将 throw 和 try 、 catch一起使用，就可以控制程序输出的错误信息。
一个try和catch一起写：
try {
//这里getImageWidthHeight是一个异步操作。使用了Promise，await等待他返回一个Promise对象后，拥有了then catch等方法
//这里的try 就相当于 this.getImageWidthHeight(file).then(()=>{}) 可以在try中测试，做成功状态操作
const { width, height } = await this.getImageWidthHeight(file);
}
catch (e) {
//catch相当于this.getImageWidthHeight(file).catch(()=>{}) 本来就用于做捕捉错误代码，可以用来写失败状态操作
this.$notify.error('图片宽高获取失败');
return false;
}
抛出错误例子：
async checkImage(file) {
if (...) {
throw new Error();
}
return true;
},
8.Vue.nextTick();
定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
数据更新，DOM渲染后立即执行的函数
使用场景
1.如果是需要在created函数中做的DOM操作，一定要放在nextTick中，因为created时data和methods刚加载完毕，DOM还未渲染。
2.想在数据更新后立即获取到更新的那个DOM节点做DOM操作，就可以使用，因为一般不能立即获取到更新后的DOM。
3.在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件。
9.判断元素是否是数组
1，通过 constructor 判断
function isArray(value) {
return value && typeof value == 'object' && value.constructor === Array
}
2，通过 instanceof 判断判断
function isArray(value) {
return value && typeof value == 'object' && value instanceof Array
}
本周收藏的文章:
一些ES6数组方法的妙用,这里只有一篇redues的,作者写的好详细好棒哦 收藏一下 好像其他文章还有别的方法:
https://www.jianshu.com/p/541b84c9df90
一些高级的遍历数组方法:
https://juejin.im/post/5d48c275f265da03b12032a1
一些好用的封装方法,不用自己百度了嘻嘻,提升开发幸福感的10条JS技巧:
https://juejin.im/post/5d3e96696fb9a07ea420c71c
前端技能树,好强,大部分都不会,争取以后把这些技能点上:
https://juejin.im/post/5cc1da82f265da036023b628#heading-43
Promise初阶高阶,高阶的一些没用到过,还没看完,以上周记里有些是参考这篇:
https://blog.csdn.net/weixin_33811539/article/details/89078776
