vue:异步async and await and generator与promise与this.nextTick()的使用

Vue.js与异步编程详解

最新推荐文章于 2023-07-21 16:35:16 发布

原创最新推荐文章于 2023-07-21 16:35:16 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文深入探讨了Vue.js中的this.$nextTick()方法，解释了如何在DOM更新后执行回调，确保UI与数据同步。同时，文章通过具体示例讲解了ES6的generator、async/await以及Promise的使用技巧，帮助读者理解现代JavaScript异步编程的核心概念。

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