面试官: 来, 手写一个promise

·  阅读 3137
面试官: 来, 手写一个promise

前言

又是论文, 又是毕设..害我断更了这么久难顶...收拾收拾心情, 重新出发! :D

在can i use中我们可以看到Promise函数兼容性其实并不是特别好, 但是我们自己实现的Promise最少也能兼容到IE9+哦, 文中的代码被我分开, 是着重分区块讲解的,如果您需要源码与压缩版本, 目前已经上传到了我的GitHub[Utils.js]欢迎star✨

image.png

在手写我们喜闻乐见的promise之前, 我们先来系统的梳理一下异步编程的概念, 异步编程是JavaScript中一个极为重要的概念, 但是JavaScript的异步编程,也比较特殊, 我们们一般称之为"单线程异步编程"

JS单线程异步编程

JS是单线程的

  • 也就是说, JavaScript同时只能处理一件事情,"上面的代码未执行完, 则无法执行下面的代码"

    • JavaScript中也有部分操作是异步编程

  • 但是JavaScript绝非我们传统的编程中的多线程开发, 可以同时做多件事情, 因为是单线程处理, 所以实际上, 如果JavaScript引擎正在处理任务, 那其他事情他还是处理不了的.

  • 浏览器基于EventQueue事件队列, EventLoop事件循环 两大机制, 构建出了"异步编程的效果"

「异步宏任务」

  • 定时器
  • DOM事件
  • HTTP请求（ajax、fetch、jsonp...）
  • ...

「异步微任务」

  • promise「resolve/reject/then...」
  • async await
  • requestAnimationFrame
  • ...

进入异步队列(EventQueue)的查找顺序:

  1. 首先去异步微任务队列查找:
  • 找到, 到了可执行条件的异步微任务, 则把其挪至ESStack中, 交给主线程执行(主线程忙碌)
  • 主线程再次空闲, 则按照上述方式查找
  • 如果一次发现多个任务可执行, 则最先达到可执行阶段, 就谁先执行
  • 如果没有可执行的异步微任务(不代表没有异步微任务), 则去阶段2继续查找
  1. 再去异步宏任务队列中查找:
  • 和阶段1的查找方式类似
  1. 事件循环机制(EventLoop):
  • 同步任务执行完毕 ⇒ 查找异步队列可执行任务, 放置主线程执行 ⇒ 执行完毕 ⇒ 查找异步队列任务,执行

promise执行过程

一般情况下, 我们都是用promise(res,rej)来管理异步编程

成功:

let p1 = new Promise( (resolve, reject) => {
	resolve('ok') 
        [[PrimiseState]]: 'fulfuilled' 
        [[promiseResult]]: 'ok'
  
})
复制代码

失败: 对于报错的处理机制, 类似于try..catch

let p1 = new Promise( (resolve, reject) => {

    resject('no') 
    // 如果遇到报错
    [[PromiseState]]: 'rejected'
    [[PromiseResult]]: '报错原因'
})
复制代码

实例状态的改变，可以控制，执行then方法时，存放的两个方法中的某一个方法执行

  • p.then(onfulfilledCallback,onrejectedCallback)

  • 状态成功执行的是：onfulfilledCallback

  • 状态失败执行的是：onrejectedCallback

  • 并且把[[PromiseResult]]的值传递给方法

p1.then(result => {
    console.log('成功-->', result);
}, reason => {
    console.log('失败-->', reason);
});
复制代码

  1. 首先把传递进来的onfulfilledCallback和onrejectedCallback存储起来存储在一个容器中：因为可以基于then给其存放好多个回调函数

  2. 其次再去验证当前实例的状态

    • 如果实例状态是pending，则不做任何的处理
    • 如果已经变为fulfilled/rejected，则会通知对应的回调函数执行「但不是立即执行，而是把其放置在EventQueue中的微任务队列中」

“promise本身不是异步的，是用来管理异步的，但是then方法是异步的「微任务」”

then链

执行then方法会返回一个全新的promise实例

let p1 = new Promise((resolve, reject) => {
    resolve('OK');
    // reject('NO');
});
let p2 = p1.then(result => {
    console.log('P1成功-->', result);
    return Promise.reject(10);
}, reason => {
    console.log('P1失败-->', reason);
});
复制代码

执行then方法会返回一些全新的promise实例p2

let p1 = new Promise((resolve, reject) => {
    resolve('OK');
    // reject('NO');
});
let p2 = p1.then(result => {
    console.log('P1成功-->', result);
    return Promise.reject(10);
}, reason => {
    console.log('P1失败-->', reason);
});
复制代码

  • p2的状态和值是咋改变的？

  • 不论执行的是基于p1.then存放的 onfulfilledCallback / onrejectedCallback 两个方法中的哪一个

  1. 只要方法执行不报错:
    1. 如果方法中返回一个全新的Promise实例，则“全新的Promise实例”的成功和失败决定p2的成功和失败
    2. 如果不是返回promise呢？则 [[PromiseState]]:fulfiled [[PromiseResult]]:返回值
  2. 如果方法执行报错：
    1. p2的 [[PromiseState]]: rejected [[PromiseResult]]: 报错原因

如果onfulfilledCallback/onrejectedCallback不传递，则状态和结果都会“顺延/穿透”到下一个同等状态应该执行的回调函数上「内部其实是自己补充了一些实现效果的默认函数」

Promise.all

Promise.all([promise数组:{要求数组中的每一项尽可能都是promise实例}])：

Promise.all也会创建一个新promise实例(AA), 要求数组内所有的promise实例都成功, 此时AA才成功

Promise.race

最先知道状态的promise实例，是成功还是失败，决定了AA是成功还是失败

熟悉了Promise整个的执行过程, 我们就能剖析出它基本的结构了

Promise的基本结构

Promise骨架

基于上述, 我们可以看出来一个Promise构造最重要的四个组成部分是

  1. PromiseResult 存放实参函数的执行结果
  2. PromiseState 存放当前当前用于影响then函数执行结果的状态
  3. onFulfilledCallbacks/onRejectedCallbacks 成功状态与失败状态的待执行方法的事件池
  4. 在实参函数内部对状态, 结果进行更改的change函数

我们现在先来看promise构造函数, 不考虑then的执行, 当然如果您对构造函数,面向对象不是特别熟悉, 建议您先看一下原型与原型链: 如何自己实现 call, bind, new? 中关于new执行的过程

stateDiagram-v2
new&nbspPromise(executor) --> executor(resolve,reject)
executor(resolve,reject) --> resolve(change)
executor(resolve,reject) --> reject(change)
resolve(change) --> change('fulfilled',&nbspresult)
reject(change) --> change('rejected',&nbspreason)


// 一个基本的Promise应该长这样

function Promise (executor) {

    // 当前实例
    var self = this,
    // 改变状态与结果的函数
        change

    // 只允许基于new去构造promise实例
    if (!(self instanceof Promise)) throw new TypeError('undefined is not a promise!')
    // 要求传进来的executor必须是一个函数
    if (typeof executor !== 'function') throw new TypeError('Promise resolver ' + executor + ' is not a function!')

    // 存放状态与结果
    self.PromiseResult = undefined
    self.PromiseState = 'pending'
    // 成功与失败 事件池
    self.onFulfilledCallbacks = []
    self.onRejectedCallbacks = []
    
    change = function change (state, result) {
        // 如果状态已经发生改变了, 则不做任何处理
        if (state !== 'pending') return 
        
        self.PromiseState = state
        self.PromiseResult = result
        
        // 根据当前的状态拿到对应状态的事件池
        let callbacks = self.PromiseState === 'fulfilled' ? self.onFulfilledCallbacks : self.onRejectedCallbacks
        
        var len = callback.length,
            i = 0
        if ( len > 0 ) {
            // 这里我没办法创建微任务, 所以用一个宏任务做了包裹, 
            // 类似于Promise的异步执行, 但是then方法内的函数执行时一个异步微任务, 
            // 这是自实现没法做到的, 一定要注意这里!!
            setTimeout(function(){
                for (i; i < len; i++) {
                   let callback = callbacks[i]
                   // 执行该事件池中的函数, 并把结果传出
                   if(typeof callback === 'function') callback(self.PromiseResult)
                }
            }, 0)
        }
    }
    // 传入Promise内的实参函数是同步执行的, 
    // 但是他的执行成败会影响状态与结果, 所以用try..catch做一下包裹
    try {
        executor(
            function resolve (result) {
                change('fulfilled', result)
            },
            function reject (reason) {
                change('rejected', reason)
            }
        )
    } catch (err) {
        // 函数执行如果报错, 直接捕获错误状态与结果
        change('rejected', err) 
    }
    
}
复制代码

在不考虑then的情况下, 一个完整的promise就算是写好了, 内部对异步也做了管控, 接下来我们来处理then/then链跟catch, 由于catch的情况比较简单, 我们就直接看then链的执行流程就好了

then与then链

stateDiagram-v2
new&nbspPromise(executor) --> executor(resolve,reject): 
executor(resolve,reject) --> resolve(change)
executor(resolve,reject) --> reject(change)
resolve(change) --> change('fulfilled',&nbspresult)
reject(change) --> change('rejected',&nbspreason)
change('fulfilled',&nbspresult) --> then(onFulfilled,&nbsponRejected): 确定状态与结构,执行then
then(onFulfilled,&nbsponRejected) --> new&nbspPromise(executor): then链,让then返回了一个promise实例
 new&nbspPromise(executor) --> PromiseState: 判断状态
PromiseState --> 'fulfilled'
PromiseState --> default
default --> onFulfilledCallbacks :pending状态
default --> onRejectedCallbacks: pending状态
'fulfilled' --> handle(newPromise,&nbspx(成功函数执行结果),&nbspresolve,&nbspreject)
handle(newPromise,&nbspx(成功函数执行结果),&nbspresolve,&nbspreject) --> resolve(x): 普通函数直接执行
handle(newPromise,&nbspx(成功函数执行结果),&nbspresolve,&nbspreject) --> then(onFulfilled,&nbsponRejected): x是一个promise实例

由于这部分比较杂乱, 所以我把所有的代码单独抽离出来, 我们一个一个方法看

// then/catch方法添加到promise的实例上
Promise.prototype = {
    constructor: Promise,
    // 标识符, 表示这个promise为我们自己重构的
    selfWrite: true,
    then: function then (onFulfilled, onRejected) {
        // 实现then链的本质就是返回一个promise实例, 在新的promise内部对传进来的方法做处理
        newPromise = function newPromise(){}
        return newPormise
    },
    catch: function catch (onRejected){}
}
复制代码

then

then方法为了实现then链机制, 我们返回一个新的Promise实例

then: function then (onFulfilled, onRejected) {

  var self = this,
    // then参数函数的结果
    x,
    newPromise
  // 判断then传入的是否为一个函数
  if (typeof onFulfilled !== 'function') {
    onFulfilled = function onFulfilled(result) {
      return result
    }
  }
  if (typeof onRejected !== 'function') {
    onRejected = function onFulfilled(reason) {
      throw reason
    }
  }
  newPromise = new Promise(function (resolve, reject) {
      // 1. 已知当前promise实例的状态
      // 2. 未知状态即pending, 则把then事件添加到事件池内
      switch(self.PromiseState){
          case 'fulfilled':
              // 包装成一个异步函数
              setTimeout(function(){
                  try{
                      // 把上一个promise实例的结果传入
                      x = onFulfilled(self.PromiseResult)
                      // 对x处理, 如传入的x是一个promise实例
                      hanlde(newPromise, x, resolve, reject)
                  } catch(err) {
                      reject(err)
                  }
              }, 0)
              break;
          case 'rejected':
             setTimeout(function () {
                  try {
                    x = onRejected(self.PromiseResult)
                    handle(newPromise, x, resolve, reject)
                  } catch (err) {
                    reject(err)
                  }
              }, 0)
              break;
           default: 
           // 未知状态, 则直接添加到事件池待执行
           self.onFulfilledCallbacks.push(function (result) {
               try {
                    x = onFulfilled(result)
                    handle(newPromise, x, resolve, reject)
               } catch (err) {
                   reject(err)
               }
           })
           self.onRejectedCallbacks.push(function (reason) {
              try {
                x = onRejected(reason)
                handle(newPromise, x, resolve, reject)
              } catch (err) {
                reject(err)
              }
            })
      }
      // 返回promise 后续then执行
     return newPromise
  })
}
复制代码

handle函数

上段代码中的handle函数主要的作用是处理当前实例的状态

// onFulfilled, onRejected方法的执行返回结果处理
function handle(newPromise, x, resolve, reject){
// 新实例与内部函数的执行结果如果是同一个实例, 会变成死循环
    if(newPromise === x ) throw new TypeError('Chaining cycle detected for promise')

    if( isPromise(x) ) {
        // 如果函数的执行结果一个promise实例将当前两个待执行函数传入
        x.then(resolve, reject)
    }
    // 如果x是普通值/函数 则直接将结果传入下一个实例
    resolve(x)
}
复制代码

isPromise函数

判断当前执行结果是不是一个promise实例

function isPromise (x) {
    if( x == null) return false
    if( /^(function|object)$/i.test(typeof x) ) {
        if( typeof x.then === 'function' ) {
            return true
        }
    }
    return false
}
复制代码

catch

catch其实很简单, 就是只给then传入失败的函数

catch: function (onRejected) {
      // 只给then传入失败状态的函数 
      var self = this
      return self.then(null, onRejected)
    }
复制代码

resolve(result) / reject(reason)

Promise实例也可以通过Promise.resovle的方式来执行, 是因为实例上同样具有这样的两个API, 实现也非常简单.

Promise.resolve = function resolve (value){
    // 返回一个新promise实例, 并将状态改成成功
    return new Promise(function (resolve) ) {
        resolve(value)
    }
}
复制代码
Promise.reject = function reject(value) {
    // 返回一个新promise实例, 并将状态改成成功
    return new Promise(function (reject) {
      reject(value)
    })
  }
复制代码

all(promises)

all方法的执行方式, 其实就是传进来的所有promise都为成功状态时, 该promise才为成功状态

Promise.all = function all (promises) {
    let results = [],
        n = 0,
        newPromises
    // 如果参数不是是一个可迭代类型
    if ( Array.isArray(promises) ) throw new TypeError(promises + 'is not iterable')
    // 让数组内部所有的参数都变成一个promise实例
    promises = promises.map( function (promise) {
        if ( !isPromise(promise) ) return new Promise.resolve(promise)
        return promise
    }
    newPromise = new Promise(function (resolve, reject) {
        promises.forEach(function (promise, index) {
            promise.then(function (result) {
                // 要求每一个实例都成功才返回成功状态
                results[index] = result
                // 在每一个promise实例中,执行的函数我们没有办法确定是否是同步函数
                //使用push的话, 可能会导致数组前排的异步函数执行结果与后排的同步函数执行结果位置混乱
                n++
                if(n >= promises.length) {
                    resolve(results)
                }
            }).catch(function (reason) {
                // 只要有一个实例走到了catch直接返回失败
                reject(reason)
            })
        })
    })
    return newPromise
}
复制代码

finally(callback)

finally执行需要返回一个promise实例, 并且无论状态如何finally传进去的函数都必须执行

  Promise._finally = function _finally(callback) {
    let self = this,
        p = new Promise
    return self.then(
      function Fulfill(value) { 
        // 管控callback函数
        p.resolve( callback() ).then( function () { return value } )
       },
      function reject(reason) { 
        p.resolve( callback() ).then( function () { throw reason } )
       }
    )
  }
复制代码

如果您觉得这样分模块的代码十分混乱, 建议您到我的GitHub拉取整体的代码哦

完

感谢😘

如果觉得文章内容对你有帮助:

  • ❤️欢迎关注点赞哦! 我会尽最大努力产出高质量的文章

个人公众号: 前端Link
联系作者: linkcyd 😁
往期:

分类：
前端
标签：
JavaScript
分类：
前端
标签：
JavaScript
相关推荐
  • _清水
    9月前
    面试
    面试官对不起！我终于会了Promise...(一面凉经泪目）
    前言在下前端小白菜也想找到实习来着，于是乎就面了面。先来给所有的问题给大家分享吧。面试题CSS 实现水平垂直居中flex的属性CSS transition的实现效果和有哪些属性CSS 实现沿Y轴旋转3
    • 1.8w
    • 18
  • 前端胖头鱼
    1月前
    前端 JavaScript 面试
    因为实现不了Promise.all，一场面试凉凉了
    Promise.all、new、apply、call、bind这些常见的手写题早已成为面试的宠儿，你如果不会写，可能就被pass了噢，和胖头鱼一起构建这个手写系列，一起努力向前吧！
    • 3.4w
    • 83
    因为实现不了Promise.all，一场面试凉凉了
  • Sunshine_Lin
    5月前
    前端 JavaScript
    看了就会，手写Promise原理，最通俗易懂的版本！！！
    前言 大家好，我是林三心，相信大家在日常开发中都用过Promise，我一直有个梦想，就是以最通俗的话，讲最复杂的知识，所以我把通俗易懂放在了首位，今天就带大家手写实现以下Promise吧，相信大家一看
    • 2.3w
    • 87
    看了就会，手写Promise原理，最通俗易懂的版本！！！
  • 大海我来了
    10月前
    JavaScript
    死磕 36 个 JS 手写题（搞懂后，提升真的大）
    作为一个程序员，代码能力毋庸置疑是非常非常重要的，就像现在为什么大厂面试基本都问什么 API 怎么实现可见其重要性。我想说的是居然手写这么重要，那我们就必须掌握它，所以文章标题用了死磕，一点也不过分，也希望不被认为是标题党。 作为一个普通前端，我是真的写不出 Promise A…
    • 8.2w
    • 160
  • yeyan1996
    2年前
    JavaScript
    字节跳动面试官：请你实现一个大文件上传和断点续传
    这段时间面试官都挺忙的，频频出现在博客文章标题，虽然我不是特别想蹭热度，但是实在想不到好的标题了-。-，蹭蹭就蹭蹭 :)
    • 19.7w
    • 516
  • 浪里行舟
    3年前
    JavaScript 前端
    九种跨域方式实现原理（完整版）
    前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。 本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议大家动手敲敲代码。 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSR…
    • 12.0w
    • 106
  • 希沃ENOW大前端
    9月前
    JavaScript
    当面试官问Promise的时候他想知道什么
    前言 Promise 是一种异步编程的解决方案，可以认为它是一个容器，里面保存着未来发生的事件结果。 它有三种状态：pending（进行中）、fulfilled（已成功）和rejected
    • 1.0w
    • 21
    当面试官问Promise的时候他想知道什么
  • 火狼1
    2年前
    JavaScript 前端
    JS 原生面经从初级到高级【近1.5W字】
    调整文章格式 调整文章格式 调整文章格式 调整文章格式 调整文章格式 调整文章格式 调整文章格式 调整文章格式
    • 12.0w
    • 188
    JS 原生面经从初级到高级【近1.5W字】
  • mysunshine
    5月前
    前端
    【手写promise】终于不用担心我不会手写promise了
    promise的特点，参考阮一峰ES6 Promise是一个构造函数，构造函数接收一个函数类型的参数 promise最后只能有一种状态，并且状态不能改变 promise构造函数的原型链上存在then
    • 1271
    • 6
    【手写promise】终于不用担心我不会手写promise了
  • 大帅老猿
    8月前
    前端 JavaScript
    产品经理：你能不能用div给我画条龙？
    事情是这样的，前天上午产品经理说想要做一个心愿墙，问我能不能行 我心想，这太容易了，但为了多摸一天鱼，我说还是有点挑战的 结果下午，产品经理和设计师就给我发来了设计参考 他们说，心愿墙的设计大致是这样
    • 9.4w
    • 558
  • 老姚
    2年前
    CSS JavaScript
    你未必知道的49个CSS知识点
    本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。 另外这里，老姚谢谢各位一如既往的支…
    • 15.2w
    • 174
  • 愣锤
    3年前
    Vue.js JavaScript 前端
    Vue 项目里戳中你痛点的问题及解决办法（更新）
    最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue项目开发中常见的问题及解决办法。如果你是vue大佬，请忽略小弟的愚见^V^ 列表进入详情页的传参问题。 列表进入详情页的传参问题。 c页面的路径为http://localhost:8080/#…
    • 13.0w
    • 163
    Vue 项目里戳中你痛点的问题及解决办法（更新）
  • 黄小虫
    2年前
    JavaScript
    2020年了,再不会webpack敲得代码就不香了(近万字实战)
    2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…
    • 15.8w
    • 359
    2020年了,再不会webpack敲得代码就不香了(近万字实战)
  • ConardLi
    2年前
    面试 前端
    如何写出一个惊艳面试官的深拷贝?
    最近经常看到很多JavaScript手写代码的文章总结，里面提供了很多JavaScript Api的手写实现。 里面的题目实现大多类似，而且说实话很多代码在我看来是非常简陋的，如果我作为面试官，看到这样的代码，在我心里是不会合格的，本篇文章我拿最简单的深拷贝来讲一讲。 本文由浅…
    • 13.1w
    • 405
  • 白小明
    3年前
    HTML CSS JavaScript
    前端常用插件、工具类库汇总，不要重复造轮子啦！！！
    在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。 下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往…
    • 13.8w
    • 141
    前端常用插件、工具类库汇总，不要重复造轮子啦！！！
  • 前端进击者
    1年前
    Vue.js JavaScript
    实战技巧，Vue原来还可以这样写
    每天上班写着重复的代码，当一个cv仔，忙到八九点，工作效率低，感觉自己没有任何提升。如何能更快的完成手头的工作，提高自己的开发效率，在上一篇《绝对干货~！学会这些Vue小技巧，可以早点下班和女神约会了》，小编整理了一些Vue开发技巧，今天小编又整理了一些新的Vue使用技巧。你们…
    • 10.4w
    • 248
  • yeyan1996
    2年前
    JavaScript 前端
    一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧
    2. 循环实现数组 map 方法 3. 使用 reduce 实现数组 map 方法 4. 循环实现数组 filter 方法 5. 使用 reduce 实现数组 filter 方法 6. 循环实现数组的
    • 22.6w
    • 300
  • 齐小神
    1年前
    Promise
    面试官：“你能手写一个 Promise 吗”
    关于手写 Promise，想必大家都十分熟悉。基本上现在不管是大厂还是小厂，手写 promise 已经成为了面试必考知识点。听说你还不太会？那么走着，带你从零开始解锁 Promise！ 在 Promise 出现以前，在我们处理多个异步请求嵌套时，代码往往是这样的。。。 为了拿到…
    • 2.8w
    • 79
    面试官：“你能手写一个 Promise 吗”
  • 恍然小悟
    3年前
    JavaScript Promise ECMAScript 6
    只会用就out了，手写一个符合规范的Promise
    所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 上面读取了3个文件，它们是层层…
    • 3053
    • 11
    只会用就out了，手写一个符合规范的Promise
  • 杭州程序员张张
    3年前
    Vue.js JavaScript 前端
    Vue.js中 watch 的高级用法
    上面的代码的效果是，当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办…
    • 9.7w
    • 41
    Vue.js中 watch 的高级用法
    • 前端工程师
    获得点赞101
    文章被阅读9,875
    下载稀土掘金APP
    一个帮助开发者成长的社区
    相关文章
    Vue原理: Vue是怎么初始化第一个标签的?
    5点赞
     · 
    0评论
    关于正则表达式, 你要了解的都在这里了
    6点赞
     · 
    3评论
    Vue原理: data属性为什么能直接通过this.访问?
    3点赞
     · 
    0评论
    用大白话来聊聊Vue2响应式的原理
    2点赞
     · 
    2评论
    从一道让我失眠的 Promise 面试题开始，深入分析 Promise 实现细节
    3136点赞
     · 
    281评论