一、什么是MVVM？

MVVM是 Model-View-ViewModel的缩写，

Model代表数据模型，定义数据操作的业务逻辑。

View代表视图层，负责将数据模型渲染到页面上。

ViewModel控制，通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。

二、Vue的双向数据绑定原理是什么？或者说 Vue 的响应式原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调。

三、Vue3.0的新特性

1、增加了composition api

2、虚拟DOM重写

3、优化slots的生成

4、基于Proxy的响应式系统

5、TypeScript + 模块化

四、Vue.js 3.0 放弃defineProperty, 使用Proxy的原因

1、监控到数组下标的变化时，开销很大。所以Vue.js放弃了下标变化的检测；

2、Object.defineProperty只能劫持对象的属性，而Proxy是直接代理对象。

3、Object.defineProperty需要遍历对象的每个属性，如果属性值也是对象，则需要深度遍历。而 Proxy 直接代理对象，不需要遍历操作。

4、Object.defineProperty对新增属性需要手动进行Observe。vue2时需要使用 vm.$set 才能保证新增的属性也是响应式

5、Proxy支持13种拦截操作，这是defineProperty所不具有的

6、Proxy 作为新标准，长远来看，JS引擎会继续优化 Proxy，但 getter 和 setter 基本不会再有针对性优化

五、生命周期是什么

Vue实例从创建到销毁的过程，就是生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom -> 渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期。

六、vue生命周期总共有几个阶段？

总共可以分8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后

生命周期的钩子函数：有8个常规钩子和2个额外的钩子 = 10个

第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发beforeCreate、created、beforeMount、mounted这几个钩子

七，简述每个周期具体适合哪些场景？

1、beforeCreate：创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。

data，computed，watch，methods 上的方法和数据均不能访问。

读法（D-Fo-kri?e?t?d）

2、created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。一般初始化事件和异步请求放在这里调用

3、beforeMount：挂载前，虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。

beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4、mounted：挂载完成创建vue实例，和双向绑定，挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。

5、beforeUpdate：数据更新前，数据驱动DOM。在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。

可在更新前访问现有的DOM，如手动移出添加的事件监听器。

6、updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。组件DOM已完成更新，可执行依赖的DOM操作。

注意：不要在此函数中操作数据（修改属性），会陷入死循环。

7、beforeDestroy：销毁前，可做一些删除提示，如：您确定删除xx吗？

8、destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。这时组件已经没有了，无法操作里面的任何东西了。

9、额外的钩子：activated：在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了。

如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

10、额外的钩子：deactivated：组件被移除时使用。

八、父子组件的生命周期

1、执行顺序：

1）父组件开始执行到beforeMount 然后开始子组件执行，最后是父组件mounted。

2）如果有兄弟组件，父组件开始执行到beforeMount，然后兄弟组件依次执行到beforeMount，然后按照顺序执行mounted，最后执行父组件的mounted。

2、完成流程顺序

1）加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2）子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated

3）父组件更新过程：父beforeUpdate->父updated

4）销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

3、概念：

1）当子组件挂载完成后，父组件才会挂载。

2）当子组件完成挂在后，父组件会主动执行一次beforeUpdated/updated钩子函数（仅首次）

3）父子组件在data变化中是分别监控的，但是更新props中的数据是关联的。

4）销毁父组件时，先将子组件销毁后才会销毁父组件。

5）兄弟组件的初始化（mounted之前）是分开进行，挂载是从上到下依次进行

6）当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

九。Vue2.0 和 Vue3.0 生命周期发生了什么变化

1、最大的改变就是setUp，setUp这个生命周期发生在beforeCreate和created之前。 两种形式的生命周期函数是可以共存，它们都会被执行。

2、其他都是大同小异，只不过换了写法前面加上了on 都写在setUp里面，在使用时需要按需引入函数

十、你怎么理解vue中的diff算法？

diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比，将变化的地方更新在真实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为0(N).

比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试；

如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；

借助key通常可以非常准确的找到相同节点，因此整个patch过程非常高效。

十一、什么是vdom

vdom是一种使用js对象来描述真实DOM的技术，通过这种技术,们能精确知道哪些真实DOM改变了，从而尽量减少DOM操作的性能开销。

十二、Vue中 Computed 和Watch、Method的区别

computed:计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。

一个数据受多个数据影响

1、支持缓存，只有依赖数据发生改变，才会重新进行计算

2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化

watch:当需要在数据变化时执行异步或开销较大的操作时，一个数据影响多个数据

1、 不支持缓存，数据变直接会触发相应的操作；

2、watch支持异步；

methods:调用总会执行该函数，每次都会重新计算

十三、请你说说nextTick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新

十四、的作用是什么?

答：keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 比如说把某一个列表滑动到第100条位置，切换到一个组件后这次切换回该组件还会保持在100条的位置。

十五、vue-loader是什么？使用它的用途有哪些？

答：vue文件的一个加载器，将template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

十六、for循环为什么使用key? 不写会怎么样

答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟DOM。 不写key 会导致所有列表DOM重新渲染，大大降低性能，同时编辑器也会报错。

十七、watch怎么深度监听对象变化？

答：当设置deep：true时，就可以深度监听到对象到内部值的变化。

十八、请你说一下v-modal

答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。

十九、delete和Vue.delete删除数组的区别

答：delete只是被删除的元素成了空项，其他的元素键值还是不变。 Vue.delete 直接删除了数组，改变了数组的键值。

二十、组件传值方式有哪些

1、父传子：子组件通过props['xx'] 来接收父组件传递的属性 xx 的值 写法 ：key="数据"

2、子传父：子组件通过 this.$emit('fn',value) 来传递,父组件通过接收 fn 事件方法来接收回调 写法 ：@ 提交的事件 = 接收的函数

3、Vuex

二十一、vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

场景：多个组件共享数据或者是跨组件传递数据时

vuex的流程：页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值

二十二、vuex有哪几种属性

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

1、state：vuex的基本数据，用来存储变量

2、geeter：从基本数据(state)派生的数据，相当于state的计算属性

3、mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4、action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

二十三、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

1、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

2、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便

二十四、vue-router相关题目

1、vue-router 是什么?它有哪些组件？

答：vue用来写路由一个插件。有router-link、router-view， 重定向：redirect

2、vue-router 怎么定义动态路由? 怎么获取传过来的值？怎么获取当前的路由信息？

答：1）定义动态路由：在router目录下的index.js文件中，对path属性加上/:id。

2）获取传过来的值：使用router对象的params.id。

3）获取当前路由信息：使用this.$router获取当前的路由信息。 Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，ctx.$router 是 Vue Router 实例，currentRoute 可以获取到当前的路由信息

3、vue-router钩子函数有哪些？都有哪些参数？有哪些作用？

答：1）全局前置守卫：beforeEach((to, from, next)=>{})， 它接收3个参数，分别是 to：即将进入的路由对象。form：当前导航正要离开的路由。next()：进行管道中的下一个钩子

2）全局后置钩子：afterEach((to,form)=>{})

3）全局解析守卫：beforeResolve((to, from, next)=>{})

4）组件内导航钩子：beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不能获取组件实例 this// 因为当守卫执行前，组件实例还没被创建},

5）组件内导航钩子：beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用。// 可以访问组件实例 this},

6）组件内导航钩子：beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用 //可以访问组件实例 this}。

作用：vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。

4、vue中router与route区别

router：对象是全局路由的实例，是router构造方法的实例。比如 this.$router.push。 英标：[?ru?t?r , ?ra?t?r] 低音

route：对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 英标：[ru?t] 重音

5、vue-router的两种模式的区别

答：1）hash模式：地址栏后面带有#号，当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作，做到单页面无刷新

2）history模式：主要使用HTML5的pushState()和replaceState()这两个api来实现的，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改

他们最大的区别：

hash模式的hashchange，只能改变#后面的url片段。

history模式则会将URL修改的就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

6、vue-router实现路由懒加载（ 动态加载路由 ）的方式有哪些?

1、vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。

2、路由懒加载(使用import)。

3、webpack提供的require.ensure()

7、vue-router 传参

Params：只能使用name，不能使用path，参数不会显示在路径上，浏览器强制刷新参数会被清空。

// 传递参数 this.$router.push({ name: Home， params: { number: 1 , code: '999' } }) // 接收参数 const p = this.$route.params

Query：参数会显示在路径上，刷新不会被清空name 可以使用path路径

// 传递参数 this.$router.push({ name: Home， query: { number: 1 , code: '999' } }) // 接收参数 const q = this.$route.query

Vue.js 是什么

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手，还便于与第三方库或有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动