Vue简答题

1、Vue 3.0 性能提升主要是通过哪几方面体现的？

1.响应式系统升级

• vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，来实现响应式
• vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
• 可以监听动态属性的添加
• 可以监听到数组的索引和数组length属性
• 可以监听删除属性

2.编译优化

• vue2中采用标记静态根节点，优化diff过程，来减少操作dom
• vue3中标记和提升所有静态根节点,diff过程只需要对比动态节点
  • Fragments
  • 静态提升
  • Patch flag
  • 缓存事件处理函数

3.源码体积的优化

• vue3中移出课一些不常用的API,eg:inline-template,filter等
• Tree-sharking(vue3中没有用到的模块不会被打包，但是核心模块会被打包，Keep-Alive,transition等都是按需引入)

二、Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

• Options Api
  • 包含一个描述组件选项（data,methods,props）的对象
  • 开发复杂组件，同一个功能代码被拆分到不同选项中
• Composition Api
  • 一组基于函数的API
  • 可以灵活的组织组件的逻辑
  • 更好的类型推导，容易集合TypeScript

三、Proxy 相对于 Object.defineProperty 有哪些优点？

• vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，来实现响应式
• vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
  • 可以监听动态属性的添加
  • 可以监听到数组的索引和数组length属性
  • 可以监听删除属性
  • 多层属性嵌套，在访问属性过程中处理下一级属性

四、Vue 3.0 在编译方面有哪些优化？

• vue2中采用标记静态根节点，优化diff过程，来减少操作dom
• vue3中标记和提升所有静态根节点,diff过程只需要对比动态节点
  • Fragments
  • 静态提升
  • Patch flag
  • 缓存事件处理函数

五、Vue.js 3.0 响应式系统的实现原理？

• Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的

  1.reactive：

  • 接受一个参数，typeof判断这个参数是否是对象，不是对象直接返回这个参数，不能用reactive做响应式处理
  • 是对象，创建响应拦截器handler,里面实现get/set/deleteProperty
  • get：通过track收集依赖,通过Reflect.get获取当前key的值，注意这里如果key的值是个对象，要为该对象创建响应拦截器递归调用reactive
  • set：先比较新旧value是否相等，相等直接返回,不想等，通过Reflect.set设置新的value,并通过trigger触发更新，最后记得返回boolean值，否则会报warn
  • deleteProperty:当前对象有这个key值，删除这个key，并通过trigger触发更新，最后记得返回boolean值，否则会报warn

  2.reactive：

• 接受一个函数作为参数，记得把函数赋值给全局对象activeEffect，作用是访问响应式对象属性时区收集依赖

  3.track：

  • 接受两个参数target和key
  • 如果没有 activeEffect，则说明没有创建 effect 依赖
  • 如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性，
    • WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map()))
    • WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性
      • depsMap 中没有 key 属性，则 set(key, (dep = new Set()))
      • depsMap 中有 key 属性，则添加这个 activeEffect

  4.trigger：

  • 判断 WeakMap 中是否有 target 属性
    • WeakMap 中没有 target 属性，则没有 target 相应的依赖
    • WeakMap 中有 target 属性，则判断 target 属性的 map 值中是否有 key 属性，有的话循环触发收集的 effect()

六.什么是 mvvm？

• Model层: 对应数据层的域模型（融合了行为和数据的域的对象模型）， 主要做域模型的同步。通过Ajax/fetch等API完成客户端和服务端业务Model的同步。在层间关系里，主要用于抽象出ViewModel中视图的Model。
• View层： 作为视图模板存在，在整个MVVM里，整个View是一个动态模板。除了定义结构、布局外，它展示的是ViewModel层的数据和状态。View层不负责处理状态，View层做的是数据绑定的声明、指令的声明、事件绑定声明。
• ViewModel层： 把View需要的层数据暴露，并对View层的数据绑定声明、指令声明、事件绑定声明负责。也处理View层的具体业务逻辑。ViewModel底层会做好绑定属性的监听。当ViewModel中数据发生变化，View 层会得到更 新；⽽当 View中声明了数据的双向绑定（通常是表单元素），框架也会监听View 层（表单）值的变化。⼀旦值变 化，View层绑定的 ViewModel中的数据也会得到⾃动更新。

注意：Vue并没有完全遵循 MVVM 思想 官网也有说明

为什么官方说Vue 没有完全遵循 MVVM 思想呢？

严格MVVM要求View不能和Model直接通信，而Vue提供$refs 属性，让Model直接操作View，违反规定，所以说Vue没有完全遵循MVVM。

MVVM的优缺点

1 优点
分离视图（View）和模型（Model），降低代码耦合，提高视图或者逻辑的复用性；因为视图可以独立于model的变化和修改。ViewModel可以绑定在不同的view上，所以可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。例如table高度的控制都可以抽取成一段独立的逻辑，然后通过mixin混入的模式，让多个视图复用这段逻辑；
提高可测试性，因为mvvm模式让视图和model层相互独立开来，所以可以让输入和输出在大致的可控范围内。
自动更新dom: 利用双向绑定的原理，可以让数据更新后视图也自动更新，不用再让dom操作和逻辑操作混合在一起，让开发者从繁琐的手动dom中解散。

2 缺点
Bug很难被调试，因为使用了双向绑定的模式，页面出现异常的时候，很难判定到底是view层的问题还是model层的代码。数据绑定使得一个位置的bug被传递到别的位置，很难定位到出问题的原始地方。而且在视图中，大部门都是采用指令式，很难debgger;
长期持久，不释放内容，可能会造成性能开销： 一个大的模块中，model也会很大，虽然保证了数据的一致性，可能不释放内存会造成更多的内存；
对于大型的图形应用程序，状态多，viewModel的构建和维护的成本都会很高。

七. 什么是MVC

MVC全名Model View Controller，模型(model)－视图(view)－控制器(controller)的缩写

• Model（模型）：应用程序中 处理应用程序数据逻辑的部分, 通常模型对象负责在数据库中存取数据
• View（视图）：应用程序中 处理数据显示的部分, 通常视图是依据模型数据创建的
• Controller(控制器): 应用程序中 处理用户交互部分, 负责从视图读取数据，控制用户输入，并向模型发送数据

八. mvvm 和 mvc 区别？

MVVM:实现View和Model自动同步 当Model属性改变时，不用再手动操作Dom元素，改变View显示 而是改变属性后该属性对应View层显示会自动改变（对应Vue数据驱动思想）