computed和watch的区别

说说你对keep-alive的理解是什么？

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

双向绑定原理

vue 的双向数据绑定主要是通过使用数据劫持和发布订阅者模式来实现的。

首先我们通过 Object.defineProperty() 方法来对 Model 数据各个属性添加访问器属性，以此来实现数据的劫持，因此当 Model 中的数据发生变化的时候，我们可以通过配置的 setter 和 getter 方法来实现对 View 层数据更新的通知。

数据在 html 模板中一共有两种绑定情况，一种是使用 v-model 来对 value 值进行绑定，一种是作为文本绑定，在对模板引擎进行解析的过程中。

如果遇到元素节点，并且属性值包含 v-model 的话，我们就从 Model 中去获取 v-model 所对应的属性的值，并赋值给元素的 value 值。然后给这个元素设置一个监听事件，当 View 中元素的数据发生变化的时候触发该事件，通知 Model 中的对应的属性的值进行更新。

如果遇到了绑定的文本节点，我们使用 Model 中对应的属性的值来替换这个文本。对于文本节点的更新，我们使用了发布订阅者模式，属性作为一个主题，我们为这个节点设置一个订阅者对象，将这个订阅者对象加入这个属性主题的订阅者列表中。当 Model 层数据发生改变的时候，Model 作为发布者向主题发出通知，主题收到通知再向它的所有订阅者推送，订阅者收到通知后更改自己的数据。

手撕简单源码

vue3新特性，proxy和defineProperty的区别

MVVM和MVC的区别:

- MVC中Controller演变成MVVM中的ViewModel

- MVVM通过数据来显示视图层而不是节点操作

- MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验

父子通信

非父子通信

生命周期

key的作用

v-if和

vue-router原理，路由如何跳转

vuex数据流向，mutation和action

vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架.

核心特性：

1.数据驱动：MVVM

2.组件化:把图形、非图形的各种逻辑均抽象为一个统一的组件来实现开发的模式。

优势：

降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现

调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单

提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

3.指令系统

解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

常用的指令

条件渲染指令 v-if

列表渲染指令v-for

属性绑定指令v-bind

事件绑定指令v-on

双向数据绑定指令v-model

Vue和React对比

#相同点

都有组件化思想

都支持服务器端渲染

都有Virtual DOM（虚拟dom）

数据驱动视图

都有支持native的方案：Vue的weex、React的React native

都有自己的构建工具：Vue的vue-cli、React的Create React App

#区别

数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流

数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据

组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数

diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM

什么是SPA（单页面应用）

是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验。在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。

单页应用与多页应用的区别

单页应用优缺点

优点：

具有桌面应用的即时性、网站的可移植性和可访问性

用户体验好、快，内容的改变不需要重新加载整个页面

良好的前后端分离，分工更明确

缺点：

不利于搜索引擎的抓取

首次渲染速度相对较慢

v-if与v-show的区别：

作用：控制元素在页面是否显示，v-if开销更大

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期

v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

vue实例挂载的过程中发生了什么？

1.new Vue的时候调用会调用_init方法

定义 $set、$get 、$delete、$watch 等方法

定义 $on、$off、$emit、$off等事件

定义 _update、$forceUpdate、$destroy生命周期

2.调用$mount进行页面的挂载

3.挂载的时候主要是通过mountComponent方法

4.定义updateComponent更新函数

5.执行render生成虚拟DOM

6._update将虚拟DOM生成真实DOM结构，并且渲染到页面中

vue生命周期：

activated：keep-alive缓存的组件被激活时

deactivated：keep-alive缓存的组件停用时调用

errorCapture:捕获来自一个子孙组件的错误时调用

①beforeCreate -> created

初始化vue实例，进行数据观测

②created

完成数据观测，属性与方法的运算，watch、event事件回调的配置

可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算

此时vm.$el 并没有被创建

③created -> beforeMount

判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译

优先级：render > template > outerHTML

vm.el获取到的是挂载DOM的

④beforeMount

在此阶段可获取到vm.el

此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上

⑤beforeMount -> mounted

此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

⑥mounted

vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM

⑦beforeUpdate

更新的数据必须是被渲染在模板上的（el、template、render之一）

此时view层还未更新

若在beforeUpdate中再次修改数据，不会再次触发更新方法

⑧updated

完成view层的更新

若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）

⑨beforeDestroy

实例被销毁前调用，此时实例属性与方法仍可访问

⑩destroyed

完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器

并不能清除DOM，仅仅销毁实例

题外话：数据请求在created和mouted的区别

created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成。mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的。

两者相同点：都能拿到实例对象的属性和方法。

讨论这个问题本质就是触发的时机，放在mounted请求有可能导致页面闪动（页面dom结构已经生成），但如果在页面加载前完成则不会出现此情况建议：放在create生命周期当中

为什么vue中的v-if和v-for不建议一起用？

v-for优先级比v-if高

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名

在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

1.永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

2.如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

3.如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

SPA首屏加载速度慢怎么解决？

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

首屏加载可以说是用户体验中最重要的环节

加载慢的原因：

网络延时问题

资源文件体积是否过大

资源是否重复发送请求去加载了

加载脚本的时候，渲染内容堵塞了

解决方案：

减小入口文件积

静态资源本地缓存

UI框架按需加载

图片资源的压缩

组件重复打包

开启GZip压缩

使用SSR

为什么data属性是一个函数而不是一个对象？

1.根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况

2.组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

面试官：为什么data属性是一个函数而不是一个对象？ | web前端面试 - 面试官系列 (vue3js.cn)

动态给vue的data添加一个新的属性时会发生什么？怎样解决？

Vue 不允许在已经创建的实例上动态添加新的响应式属性

若想实现数据与视图同步更新，可采取下面三种解决方案：

1.Vue.set()

Vue.set( target,propertyName/index, value )

参数

{Object | Array} target

{string | number}propertyName/index

{any} value

2.Object.assign()

3.$forcecUpdated()

小结

如果为对象添加少量的新属性，可以直接采用Vue.set()

如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象

如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)

PS：vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式

Vue 中 $set() 与 Vue.set() 原理及使用_明天也要努力的技术博客_51CTO博客

Vue2.0 不能监测数组和对象的变化原因以及解决方案_八了个戒的博客-CSDN博客_vue不能检测数组和对象的变化

🔥🔥Vue2.0为什么不能检查数组的变化？又该如何解决？ - 掘金 (juejin.cn)

Object.defineProperty的缺点及vue3为什么用proxy - 掘金 (juejin.cn)

Vue中组件和插件有什么区别？

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1.添加全局方法或者属性。如: vue-custom-element

2.添加全局资源：指令/过滤器/过渡等。如 vue-touch

3.通过全局混入来添加一些组件选项。如vue-router

4.添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

5.一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router

面试官：Vue中组件和插件有什么区别？ | web前端面试 - 面试官系列 (vue3js.cn)

Vue组件之间的通信方式都有哪些？

①props传递数据

适用场景：父组件传递数据给子组件

子组件设置props属性，定义接收父组件传递过来的参数

父组件在使用子组件标签中通过字面量来传递值

- 第一种方式（只接收）：props:['name'] 

- 第二种方式（限制类型）：props:{name:String}

- 第三种方式（限制类型、限制必要性、指定默认值）

②$emit 触发自定义事件

适用场景：子组件传递数据给父组件

子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值

父组件绑定监听器获取到子组件传递过来的参数

Vue中的$nextTick有什么作用？

Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

说说你对vue的mixin的理解，有什么应用场景？

vue-router的两种模式 - 简书 (jianshu.com)

【前端路由】Vue-router 中hash模式和history模式的区别_黑子Kuroko的博客-CSDN博客_路由hash和history的区别