vue原理相关一些 题目整理

Vue用的哪种设计模式

属于发布订阅模式,在vue中使用 observer 和 definereactive 两个方法的结合对数据进行递归劫持，然后通过 watch 这个类来对属性进行订阅，Dep 类用于解耦合，当数据变更的时候先触发数据的set方法，然后调用 Dep.notiify 通知视图更新

vue是依靠数据驱动视图更新的，该更新的过程是异步的。即：当侦听到你的数据发生变化时， Vue将开启一个队列（该队列被Vue官方称为异步更新队列）。视图需要等队列中所有数据变化完成之后，再统一进行更新。

Vue实现响应式并不是数据发生变化之后DOM立即变化，而是异步执行DOM更新的。

异步执行的运行机制是什么样的？

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

主线程不断执行任务、获取任务、执行任务的过程叫做事件循环。

说说vue操作真实dom性能瓶颈 

vue性能瓶颈的几种情况

1. 一次渲染大量的数据

存在大量数据并且都是复杂类型的时候，会导致vue对数据的劫持时间和渲染时间变长， js 连续执行时间过长，会导致页面长时间无法交互，而且渲染时间太慢，用户一次交互反馈的时间过长。

优化方案：可以使用 requestAnimation 这个方法，将数据进行分割，分批次渲染，减少了 js 的连续运行时间，并且加快了渲染时间，利用加长总运行时间换取了渲染时间，用户既能快速得到反馈，而且不会因为过长时间的 js 运行而无法与页面交互。

2. 当页面中存在大量数据，只是修改了一小部分导致页面也会导致页面卡顿

因为vue的更新以组件为粒度进行更新的，只要修改了当前组件中所使用的数据，组件就会整个去进行更新,造成大量的时间浪费。

优化方案1：将不同的模块划分成不同的组件,这样有效降低虚拟dom的diff运算时间过长的问题,

比如将大量数据的模块单独放一个组件,其它放一个组件,由于vue是以组件为粒度更新，修改其它组件的情况下不会导致数据量太大，重新diff，提升页面响应速度高达几百倍。

优化方案2：动态插槽作用域或者静态插槽的更新

使用插槽作用域来替换这两种操作方式，一样能提升性能，因为使用 插槽作用域 之后，插槽内容会被封装到一个函数中，被子组件渲染，而不是在父组件。

Vue中如何获取dom、操作dom、更新dom 

如何获取dom？在Vue中提供了一种特别的方式来获取dom，即给dom加上个ref属性，那么就可以通过 this.$refs.名字来获取到该dom元素。

如何操作dom、更新dom？通过refs.名字就可以拿到对应的真实dom，然后就可以用原生JS进行操作和更新。当然vue框架本身就是不需要dom操作的，通过修改相应的数据并再配合指令、模板语法就可以轻松的操作和更新dom。