vue的源码解析(一)

1、util对象是Vue的api,但是不建议用户使用,但是有这个api

 (1)warn

 (2)extends  合并操作,这里是util里面的extend和Vue.extends 不一样。

   

 (3)mergeOptions  合并选项的

 (4)defineReactive  响应式原理

2、面试常用,对象只会拦截已经存在的属性,{a:1,b:2} 不会触发视图的更新

   Vue.set=set     ------> observer/index.js  

   Vue.delete=del   ------>observer/index.js

   Vue.nextTick=nextTick

   数组更改索引也不会发生视图更新

3、defineReactive : 定义响应式

   defineReactive(ob.value,key,value)

  ob.dep.notify(); 如果新增了一个属性,通知视图刷新。 对象的依赖通知,手动通知视图刷新,对象的依赖的notify()。

4、delete  跟set方法是类似的,分别判断了对象【属性】和数组【索引】

    

5、vue 2的源码是用flow写的,vue3改成了ts

6、nextTick

(1)pending 默认是false。

(2)刷新们的对列

(3)循环执行时,如果是promise 就让这个promise成功。

   timerFunc  其实就是一个函数

 

 

 

微任务分为两种:

 一种叫做promise ,一种叫mutationObserver.

 微任务和宏任务。都是异步,微任务的优先级高,对于这几个异步方法来说。

promise.then和定时器放在一起的时候,肯定promise先执行的。

nexTick本身是一个微任务。但是有它不支持,也会变成宏任务。

   默认是微任务,如果不执行,会降级为宏任务。

7、obervable  :变成响应式。

多个组件共享数据,就可以使用这个方法,可以创建出一个共享的数据。小型的vuex,一个全局对象。这种用法很少。

全局组件,全局指令,全局过滤器

就是Vue.options.components/filters/directive

8、Vue的构造函数 Vue.options.base =Vue

 

9、bulitInComponents:融合keep-alive

  

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Vue.js的$nextTick函数是用于在DOM更新之后执行异步操作的方法。该方法的实现使用了微任务队列,即将异步操作推入到微任务队列中,在DOM更新后执行异步操作。$nextTick方法是Vue.js响应式系统的重要部分,它确保了Vue.js组件的异步行为和数据响应式。 具体的实现过程如下: 1. 首先检查是否支持原生的Promise对象,如果支持,则直接返回Promise.resolve()。 2. 如果不支持原生的Promise对象,则创建一个新的Promise对象。 3. 将一个空函数推入微任务队列中。 4. 在新创建的Promise对象的resolve回调中,再次推入一个空函数到微任务队列中。 5. 当浏览器执行到微任务队列中的空函数时,DOM更新已经完成,可以执行异步操作了。 下面是$nextTick方法的源代码: ```javascript Vue.prototype.$nextTick = function(fn: Function) { return nextTick(fn, this) } ``` 其中,nextTick是一个工具函数,它实现了具体的异步操作逻辑: ```javascript export function nextTick (cb?: Function, ctx?: Object) { let _resolve callbacks.push(() => { if (cb) { try { cb.call(ctx) } catch (e) { handleError(e, ctx, 'nextTick') } } else if (_resolve) { _resolve(ctx) } }) if (!pending) { pending = true if (useMacroTask) { macroTimerFunc() } else { microTimerFunc() } } // $flow-disable-line if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { _resolve = resolve }) } } ``` 该函数定义了一个callbacks数组用于存储异步操作,当调用nextTick函数时,将回调函数push进callbacks数组中,然后判断是否有待执行的异步操作,如果没有,则通过macroTimerFunc或microTimerFunc函数执行异步操作。 最后,如果调用$nextTick方法时没有传入回调函数,则会返回一个新的Promise对象,用于异步操作的等待和处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

vues

刚好遇见你

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值