VUE面试题

置顶

程序员烧烤店

已于 2024-12-09 15:25:21 修改

阅读量771

点赞数

分类专栏：面试题文章标签： vue.js javascript 前端

于 2022-03-01 20:41:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36967515/article/details/122838902

版权

说一下双向数据绑定的原理？

双向数据绑定原理就是采用数据劫持和发布订阅者模式实现的，通过object.defineProterty去劫持每个属性的getter和setter属性，去做相应的更新回调

1、要实现一个observer，去遍历数据，给每个属性都加上setter和getter属性，这样数据更新的话，就能监听到数据的变化。

2、实现一个模板解析器compile，它负责把模板的变化装换成数据，同时监听更新数据的订阅者，收到通知，更新视图。

3、实现一个订阅者watcher，就是observer和compile的桥梁，它主要做的就是，

在自身实例化的时候往属性订阅器dep中添加自己

observer监听到数据变化时，会通过属性订阅器dep告知订阅者watcher,就是dep.notify()

watcher收到通知后，会执行自身的update方法，触发compile。

这样就实现了双向绑定。

Vue是如何监听数组变化的？

Vue正常是监听不到对象类型的数据变化的，Vue通过重写Array的常用方法，通过包装之后的数组方法就能够去在调用的时候被监听到。通过原型链去拦截对数组的操作，从而实现对操作数组这个行为的监听。

Proxy所带来的，是对底层操作的拦截。前面我们在实现对对象监听时使用了Object.defineProperty，这个其实是 JS 提供给我们的高级操作，也就是通过底层封装之后暴露出来的方法。Proxy的强大之处在于，我们可以直接拦截对代理对象的底层操作。这样我们相当于从一个对象的底层操作开始实现对它的监听。

基础类型，我们还是通过Object.defineProperty来实现响应式的属性，因为这里并不存在痛点，但是在实现对Object类型的属性进行监听的时候，我采用的是创建代理，因为我们之前的痛点在于无法去有效监听数组的变化。

为何Vue采用异步渲染？

因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。

vue是组件级更新，当前组件里的数据变了，它就会去更新这个组件。当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick）

$next的实现原理？

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，如果同一个 watcher 被多次触发，只会被推入到队列中一次。去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

总的来说就是一个回调，在使用的时候，及时将异步任务队列的回调吐出来，即可执行

1、nextTick是对setTimeout进行了多种兼容性的处理，nextTick优先放入微任务执行，而setTimeout是宏任务，因此nextTick一般情况下总是先于setTimeout执行。