大家好，我是讯享网，很高兴认识大家。



Vue中的key到底有什么用？

是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速

diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的与旧节点进行比对,然后超出差异.

diff程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾.

vue-cli 工程常用的 npm 命令有哪些

在浏览器上自动弹出一个 展示 工程打包后 、、 文件里面所包含代码的页面。可以具此优化 生产环境部署的静态资源，提升 页面 的加载速度

Redux 和 Vuex 有什么区别，它们的共同思想

（1）Redux 和 Vuex区别

通俗点理解就是，vuex 弱化 dispatch，通过commit进行 store状态的一次更变;取消了action概念，不必传入特定的 action形式进行指定变更;弱化reducer，基于commit参数直接对数据进行转变，使得框架更加简易;

（2）共同思想

本质上：redux与vuex都是对mvvm思想的服务，将数据从视图中抽离的一种方案;

形式上：vuex借鉴了redux，将store作为全局的数据中心，进行mode管理;

vue 中使用了哪些设计模式

能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？

（1）hash 模式的实现原理

早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 ‘#search’：

hash 路由模式的实现主要是基于下面几个特性：

hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；

（2）history 模式的实现原理

HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：

history 路由模式的实现主要基于存在下面几个特性：

Vue3.0有什么更新

（1）监测机制的改变

（2）只能监测属性，不能监测对象

（3）模板

（4）对象式的组件声明方式

（5）其它方面的更改

如何监听 pushState 和 replaceState 的变化呢？

利用自定义事件创建这两个事件，并全局监听：

Vue的性能优化有哪些

（1）编码阶段

（2）SEO优化

（3）打包优化

（4）用户体验

ref和reactive异同

这是数据响应式中非常重要的两个概念，跟我们写代码关系也很大

vue是如何实现响应式数据的呢？（响应式数据原理）

Vue2： 重新定义 中所有的属性， 可以使数据的获取与设置增加一个拦截的功能，拦截属性的获取，进行依赖收集。拦截属性的更新操作，进行通知。

具体的过程：首先Vue使用 初始化用户传入的参数，然后使用 对数据进行观测，如果数据是一个对象类型就会调用 对对象进行处理，内部使用 循环对象属性定义响应式变化，核心就是使用 重新定义数据。

vue-router 路由钩子函数是什么 执行顺序是什么

路由钩子的执行流程, 钩子函数种类有:、、

MVVM的优缺点?

优点:

缺点:

Vue中常见性能优化

编码优化 ：

按条件跳过更新时使用：下面这个列表只会更新选中状态变化项

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载

像这样的第三方组件库可以按需引入避免体积太大

如果应用有首屏渲染慢的问题，可以考虑

以及下面的其他方法

用户体验

SEO优化

打包优化

讯享网

基础的 Web 技术的优化

Composition API 与 Options API 有什么不同

分析

最重要更新之一就是，它具有一些列优点，其中不少是针对暴露的一些问题量身打造。是推荐的写法，因此掌握好应用对掌握好至关重要

体验

能更好的组织代码，下面用可以提取为，用于组合、复用

compositon api提供了以下几个函数：

回答范例

可能的追问

可以在同一个组件中使用两个标签，一个使用vue3，一个使用vue2写法，一起使用没有问题

如果让你从零开始写一个vuex，说说你的思路

思路分析

这个题目很有难度，首先思考解决的问题：存储用户全局状态并提供管理状态API。

回答范例

实践

的实现：

vuex简易版

验证方式

Vue中封装的数组方法有哪些，其如何实现页面更新

在Vue中，对响应式处理利用的是Object.defineProperty对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组的截取变化等，所以需要对这些操作进行hack，让Vue能监听到其中的变化。 那Vue是如何实现让这些数组方法实现元素的实时更新的呢，下面是Vue中对这些方法的封装：

简单来说就是，重写了数组中的那些原生方法，首先获取到这个数组的ob，也就是它的Observer对象，如果有新的值，就调用observeArray继续对新的值观察变化（也就是通过来改变了数组实例的型），然后手动调用notify，通知渲染watcher，执行update。

过滤器的作用，如何实现一个过滤器

根据过滤器的名称，过滤器是用来过滤数据的，在Vue中使用来过滤数据，不会修改数据，而是过滤数据，改变用户看到的输出（计算属性 ，方法 都是通过修改数据来处理数据格式的输出显示）。

使用场景：

过滤器是一个函数，它会把表达式中的值始终当作函数的第一个参数。过滤器用在插值表达式 和 表达式 中，然后放在操作符“ ”后面进行指示。

例如，在显示金额，给商品价格添加单位：

computed 的实现原理

computed 本质是一个惰性求值的观察者。

computed 内部实现了一个惰性的 watcher,也就是 computed watcher,computed watcher 不会立刻求值,同时持有一个 dep 实例。

其内部通过 this.dirty 属性标记计算属性是否需要重新求值。

当 computed 的依赖状态发生改变时,就会通知这个惰性的 watcher,

computed watcher 通过 this.dep.subs.length 判断有没有订阅者,

有的话,会重新计算,然后对比新旧值,如果变化了,会重新渲染。 (Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)

没有的话,仅仅把 this.dirty = true。 (当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后其他地方需要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）特性。)

Vue路由hash模式和history模式

1. 模式

早期的前端路由的实现就是基于 来实现的。其实现原理很简单， 的值就是 中 后面的内容。比如下面这个网站，它的 的值为

hash 路由模式的实现主要是基于下面几个特性

每一次改变 （），都会在浏览器的访问历史中增加一个记录利用 的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了

特点 ：兼容性好但是不美观

2. 模式

采用的新特性；且提供了两个新方法： ， 可以对浏览器历史记录栈进行修改，以及事件的监听到状态变更

这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前 改变了，但浏览器不会刷新页面，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。

history 路由模式的实现主要基于存在下面几个特性：

特点 ：虽然美观，但是刷新会出现 需要后端进行配置

Vue与Angular以及React的区别？

Vue与AngularJS的区别

Vue与React的区别

相同点：

不同点