vue:异步async and await and generator与promise与this.nextTick()的使用
项目例子:async focusInput (index) {await this.$nextTick(() => {let el = this.$refs[`scopeInput-${index}`].$ellet input = el.querySelector('.el-input__inner')input.focus()})},&l...
·
**this.nextTick()例子:**是在下次 DOM 更新循环结束之后执行延迟回调
<template>
<button ref="tar" type="button" name="button" @click="testClick">{{ content }}</button>
</template>
export default {
data(){
return {
content: '初始值'
}
},
methods: {
testClick(){
this.content = '改变了的值';
// dom元素还未更新
console.log(that.$refs.tar.innerText);//初始值
this.$nextTick(() => {
// dom元素更新后执行
console.log(that.$refs.tar.innerText); //改变后的值
})
}
}
this.$set 当点击后 匹配信息仍为上一个数值 会在事件的下一次空闲时间执行,不知道什么时候执行但是一定会执行
<div class="type-list" v-for="(item,index) in specData">
<div>{{item.name}}</div>
<div>
<span v-for="(item2,index2) in item.list"
@click="checkType(item,[index,index2])"
:class="item2.id === typeInfo[index].typeId?'active': ''">
{{item2.item}}</span>
</div>
</div>
checkType(data,index){
this.$set(this.typeInfo[index[0]], 'name', data.name)
this.$set(this.typeInfo[index[0]], 'id', data.id)
this.$set(this.typeInfo[index[0]], 'typeId', data.list[index[1]].id)
this.$set(this.typeInfo[index[0]], 'typeName', data.list[index[1]].item)
},
async与await与generator 例子:
generator 是es6中新增的语法,和promise一样,都已用来异步编程
function* test() {
let a=1+2;
yield 2;
yield 3;
}
let b = test()
console.log(b.next()); // > { value: 2, done: false }
console.log(b.next()); // > { value: 3, done: false }
console.log(b.next()); // > { value: undefined, done: true }
加上*的函数自行后拥有了next函数,函数执行后返回一个对象。每次调用next函数可以继续执行被暂行的代码。
async 异步,会再最后执行
async function timeout() {
return 'hello world'
}
console.log(timeout());
console.log('先执行');
如果async 函数中有返回一个值 ,当调用该函数时,内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回
async function timeout(flag) {
if (flag) {
return 'hello world'
} else {
throw 'my god, failure'
}
}
console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。
await
async function testResult() {
let first = await doubleAfter2seconds(30);
let second = await doubleAfter2seconds(50);
let third = await doubleAfter2seconds(30);
console.log(first + second + third);
}
6秒后,输出220
必须等完成后才执行下一步
promise
promise初始为pending状态,可以通过函数resolve和reject讲状态转变成resolved或者rejected状态,状一旦改变就不再变化。
then函数会返回一个promise实例,并且该返回值事一个新的实例而不是之前的实例。否则多个then调用就是去了意义
.all执行所有异步,返回给then,以最慢的为标准
.race 一样, 谁快谁先
项目例子:
async focusInput (index) {
await this.$nextTick(() => {
let el = this.$refs[`scopeInput-${index}`].$el
let input = el.querySelector('.el-input__inner')
input.focus()
})
},
<el-input
@blur="blurInput"
@keyup.native="enterInput"
:ref="`scopeInput-${scope.$index}`"
v-model="coursePrice"
size="small">
</el-input>
更多推荐
已为社区贡献4条内容
所有评论(0)