周记1

作者: 蟹棒同学 | 来源:发表于2019-08-09 15:25 被阅读0次

当做学习笔记小本本的,大部分不是原创,只是记录,会在最后贴参考文章和作者

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

打印结果：

image

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

周记1