1.mvvm简述

modal数据层，view视图层，viewmodal链接视图与数据层的桥梁，modal变化通过viewmodal更新view，操作view数据通过viewmodal更新modal

2.简述vue2.x与vue3响应式数据原理

1)proxy只会代理对象的第一层，vue3如何处理的？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测

2)监听数组的时候可能多次触发set/get，如何防止？

1、判断key是否为当前被代理对象target自身属性
2、判断旧值与新值是否相等

3）proxy与object.defineProperty比较

1.defineProperty监听数组成本高
2.defineProper只能劫持对象属性，而Proxy是做对象的代理
3.proxy拦截操作比较多

3.vue2.x如何监听数组变化的

1.先获取原生 Array 的原型方法后续调用做实际处理
2.构造新的原型对象并赋与Array有的方法的名字如push，对构造的原型对象方法做拦截操作，通过call用实际的array方法操作
3.改变被拦截的 Array 类型的数据原型指向构造的原型对象

4.说下nextTick以及他的原理

Vue 在更新 DOM 时是异步执行的,只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更,如果同一个 watcher 被多次触发，会进行去重操作，只会被推入到队列中一次，避免不必要的计算和 DOM 操作，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作，nextTick就是调用下一次的事件循环tick.
这样，为了在数据变化之后获取到DOM，可以在数据变化之后立即执行nextTick，在回调里面获取DOM就能获取到

5.vue生命周期

vue2.x --- vue3
beforeCreate --- setup
created --- setup
beforeMount --- onBeforeMount
mounted --- onMounted
beforeUpdate --- onBefore
updated --- onUpdated
beforeDestory --- onBeforeUnmount
destoryed --- onUnmounted

都做了什么
beforeCreate:创建实例之前执行
created:data,methods初始化完成，vue开始编译模板，内存中保存最终字符串，然后把模板字符串渲染为内存中的dom
beforeMount:模板在内存中已经编译好了，没有渲染到页面中。
mounted:内存中的模板已经真实的挂载到了页面中
beforeUpdate:data更新，但是还未同步到view中
updated:data更新已经同步到页面中

6.接口请求一般放在哪个生命周期中，需要注意什么

一般放在mounted中，可以操作DOM，注意服务器渲染的话需要放在created中因为只支持beforeCreate和created

7.Computed和watch

methods: 每次页面数据(无论是否methods里面数据有关系)变化重新渲染，都会重新执行，性能消耗大，除非不希望有缓存的时候使用methods
computed：计算属性，依赖其他属性计算值，并且有缓存，只有依赖值变化时才会重新计算值并返回内容，不变的时候立即返回之前缓存的值不会再次执行函数。适合处理一个数据受多个数据影响
watch: 监听到值的变化时就会执行回调，回调中可以处理一些逻辑或者异步操作。适合处理一个数据影响多个数据,$watch可以设定deep深层监听，immediate立即执行

8.v-if 与v-show

9.data为什么是一个函数

组件复用的时候防止互相影响，而是用函数每次会开辟一个单独的空间

10.说下v-model原理

本身是个语法糖，组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 'input' 值作为给组件绑定事件时的事件名

11.vue事件绑定原理

原生dom事件的绑定使用的是addEventListener
组件事件的绑定使用的是vue自定的$on方法
注：$on也是采用了经典的发布订阅者设计模式，首先定义一个事件中心，通过$on订阅事件，将事件存储在事件中心里面，然后通过$emit触发事件中心里面存储的订阅事件。

12.vue模板编译原理，简单说下

1.第一步将模版字符串转换成element ASTs(解析器)
2.第二步是对AST进行静态节点标记，主要用来做虚拟DOM的渲染优化(优化器)
优化器
优化器的目的就是找出那些静态节点并打上标记，而静态节点指的是DOM不需要发生变化的节点，也就是里面面都是静态标签和静态文本。
标记静态节点有两个好处：
一、每次重新渲染的时候不需要为静态节点创建新节点，也就是静态节点的解析器不需要重新创建
二、在Virtual DOM中patching的过程可以被跳过
优化器的实现原理主要分两步：
一、用递归的方式将静态节点添加static属性，用来标识是不是静态节点
二、标记所有静态根节点(子节点全是静态节点就是静态根节点)
3.第三步是使用element ASTs生成render函数代码字符串(代码生成器)
代码生成器的作用是使用element ASTs生成render函数代码字符串。

13.React、vue2.x与vue3渲染器的diff算法

1.diff算法：
diff算法是虚拟DOM技术的必然产物，它会对新旧虚拟DOM作对比（即diff），然后将变化的地方更新在真实DOM上
2.比较

• 传统diff算法比较虚拟DOM：全量比较，每个节点分别与第二个树的每个节点比较算法时间复杂度o(n^2) ，如果没找到则删除或者新增节点时间复杂度为o(n),整个diff算法时间复杂度o(n^3)
• react与vue2.x 优化的diff算法依据：
  ①：由于节点跨层级移动操作比较少
  ②：假设 相同的组件DOM结构类似，同层级子节点可以通过唯一ID区分
  1）react进行了三种算法优化：
  ①：treeDiff:同层级比较，如果节点不存在，则删除该节点与其子节点，如果多了一个节点，则会生成一个节点包含其子节点
  ②：componentDiff:
  -同类型组件，则直接对比virtualDomTree
  -类型不同组件，直接替换
  -类型相同，但可能virtual DOM 没有变化，使用shouldComponentUpdate() 来判断是否diff
  ③：elementDiff：
  -没有唯一key：集合中节点依次比较，不同的话就删除原来的，生成新的，如果只是顺序改变了也会每次删除旧的生成新的
  -有唯一key：遍历结合中的节点，如果能找到相同key的节点，这只需要移动，没有的话再进行删除和生成
  2）vue2.x与react相同 不同的是diff的过程就是调用patch函数，增加了双端比较
  3）Vue3也是双端比较生成虚拟DOM的时候根据是否发生了变化添加一个静态标记，对比的时候只对有标记的节点进行进行比较

14.虚拟DOM以及key属性作用

虚拟DOM本质就是描述真实DOM的一个对象
key属性作用：尽可能的复用DOM元素，如果只是顺序变化，只需要移动DOM就可以了，通过key找到可复用的DOM，不需要重新生成，提高性能

15.keep-alive简单说下

在组件切换过程中将状态保留在内存中，防止重复渲染DOM。会缓存不活动的组件实例，而不是销毁它们。
在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。
生命周期钩子函数，activated在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。，deactivated在组件被停用时调用

16.vue组件生命周期调用顺序

17.SSR

服务器渲染：简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，渲染时请求页面，返回的body里已经存在服务器生成的html结构，之后只需要结合css显示出来。这就节省了访问时间和优化了资源的请求

18.vue性能优化

1.路由懒加载
2.webpack配置图片压缩
3.webpack配置打包多个js文件，公共模块与第三方库单独打包，按需加载
4.webpack配置压缩资源文件
5.去掉不需要的插件
6.类似与elementUI库改成按需加载组件
7.开启gzip压缩
8.合理使用服务器缓存

19.hash和history实现原理

hash:hash值变化浏览器不会重新发起请求，但是会触发window.hashChange事件，假如我们在hashChange事件中获取当前的hash值，并根据hash值来修改页面内容
history:HTML5中新增的history.pushState（）和history.replaceState（）方法改变状态

20.tempalte与render方法区别

1.template是html方式渲染，render是js方法渲染
2.render性能比template要好，优先级比template高，template最终还是调用render方法
3.render灵活

21：vue子组件为什么不能修改props的值

单向数据流的限制，如果能修改的话，某个值在一个父组件多个子组件中使用，如果某个子组件修改了这个值的话，其他子组件会被修改，造成数据混乱

22.vue自定义指令

bind：第一次绑定到元素时执行，只执行一次)
inserted：被绑定元素插入到DOM中时执行
update：组件更新时调用

22.父子组件中生命周期

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程：父beforeUpdate->父updated
销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

23.手写on

class EventBus {
  private eventPond: {
    [key: string]:{
      fn:(arg?:any) => void
    }[]
  };
  constructor() {
    this.eventPond = {}
  }
  on(type: string, fn:() => void) {
    const eventPond = this.eventPond
    if(!eventPond[type]) {
      eventPond[type] = []
    }
    eventPond[type].push({fn})
  }
  emit(type:string,...args:any) {
    const eventPond = this.eventPond
    if(!eventPond[type] || eventPond[type].length===0) return
    eventPond[type].map(item => {
      item.fn(args)
    })
  }
  off(type:string | string[]) {
    const eventPond = this.eventPond
    if(typeof type==='string') {
      if(!eventPond[type] || eventPond[type].length===0) return
      delete eventPond[type]
    } else {
      type.forEach(typeItem => {
        eventPond[typeItem] && delete eventPond[typeItem]
      })
    }
  }
}

-----------------------------vue-router----------------------------

1.模式

1.hash：利用hash值作为路由
2.history：依赖HTML5 History api和服务器配置
3.abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端

2.路由跳转方式

1.标签跳转v-link或者router-link
2.js：this.$router.push/replace/go

3.路由传参

1.query：跳转配置query，刷新不会丢失
2.params：跳转配置params，刷新会丢失
3.动态路由：url配置/:name，目标页面使用this.$route.params.name获取，刷新不会丢失

4：$route与$router区别

$router是vueRouter对象的实例
$route是当前页面的路由对象

5:导航钩子

1.全局：beforeEach，afterEach
2.组件内部：beforeRouteEnter, beforeRouteUpdate,beforeRouteLeave
3.路由独享组件：beforeEnter

-----------------------------vuex----------------------------

1.vuex是什么

1.vuejs开发的状态管理工具
2.多个组件公用数据或者跨组件传值是使用
3.vuex流程：组件中mapAction异步提交事件到action，action通过commit同步提交参数到mutation，mutation修改响应的state，getter返回对应值，组件通过mapGetter获取对应值

2.有哪些属性

1.state：存储数据
2.getter:从state映射数据，相当于state的计算属性
3.mutation：修改state值的唯一方式，通过type和一个回调函数(第一个参数为state，第二个参数为载荷)同步修改state的值，如果有异步处理放到action中
4.action：提交mutation修改state的值，可处理异步逻辑
5.module：模块化vuex，每个模块有自己对应的state等属性，方便管理