1.20 Vue-router 有哪几种路由守卫?
- 全局守卫：beforeEach
- 后置守卫：afterEach
- 全局解析守卫：beforeResolve
- 路由独享守卫：beforeEnter
1.21 Vue-router 的钩子函数都有哪些?
关于 vue-router 中的钩子函数主要分为 3 类
- 全局钩子函数要beforeEach 函数有三个参数,分别是
- to:router 即将进入的路由对象
- from:当前导航即将离开的路由
- next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为 false,终止导航
单独路由独享组件
beforeEnter-
组件内钩子
- beforeRouterEnter
- beforeRouterUpdate
- beforeRouterLeave
1.22 vue-router 路由模式有几种？
vue-router 有 3 种路由模式：hash、history、abstract
- hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
- history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
- abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.
1.23 说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？
（1）hash 模式的实现原理
- URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
- hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
- 可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
- 我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）
（2）history 模式的实现原理
- pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
- 我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
- history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）
1.24 vuex 包括几个模块
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
- State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
- Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
- Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
- Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
- Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中
1.25 Object.defineProperty 和 Proxy 的区别
Object.defineProperty 和 Proxy 的区别如下:
- Proxy 可以直接监听对象而非属性；
- Proxy 可以直接监听数组的变化；
- Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等 是 Object.defineProperty 不具备的
- Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改
- Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准 的性能红利
- Object.defineProperty 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题, 而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重 写
1.26 MVVM 和 MVC 区别是什么？哪些场景适合？
1、基本定义
MVVM 即 Model-View-ViewModel 的简写，即模型-视图-视图模型，模型（Model） 指的是后端传递的数据，视图(View)指的是所看到的页面，视图模型(ViewModel)是 mvvm 模式 的核心，它是连接 view 和 model 的桥梁。它有两个方向：
- 一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到 的页面，实现的方式是：数据绑定
- 二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。 实现的方式是：DOM 事件监听，这两个方向都实现的，我们称之为数据的双向绑定
- MVC 基本定义 MVC 是 Model-View- Controller 的简写。即模型-视图-控制器。M 和 V 指的意思和 MVVM 中的 M 和 V 意思一样。C 即 Controller 指的是页面业务逻辑，使用 MVC 的目的就是将 M 和 V 的代码分离。MVC 是单向通信。也就是 View 跟 Model，必须通过 Controller 来承上启 下
2、使用场景
主要就是 MVC 中 Controller 演变成 MVVM 中的 viewModel，MVVM 主要解决了 MVC中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验，vue 数据驱动，通 过数据来显示视图层而不是节点操作， 场景：数据操作比较多的场景，需要大量操作 DOM 元 素时，采用 MVVM 的开发方式，会更加便捷，让开发者更多的精力放在数据的变化上，解放繁 琐的操作 DOM 元素
3、两者之间的区别
MVC 和 MVVM 其实区别并不大，都是一种设计思想， MVC 和 MVVM 的区别并不是VM 完全取代了 C，只是在 MVC 的基础上增加了一层 VM，只不过是弱化了 C 的概念， ViewModel 存在目的在于抽离 Controller 中展示的业务逻辑，而不是替代 Controller，其它视图 操作业务等还是应该放在 Controller 中实现，也就是说 MVVM 实现的是业务逻辑组件的重用， 使开发更高效，结构更清晰，增加代码的复用性
1.27 vue 中如何重置 data?
要初始化 data 中的数据，可以使用 Object.assign()方法，实现重置 data 中的数据，以下就是对该方法的详细介绍，以及如何使用该方法，重置 data 中的数据
- Object.assign()方法基本定义
- Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目 标对象。它将返回目标对象。
- 用法： Object.assign(target, …sources)，第一个参数是目标对象，第二个参数 是源对象，就是将源对象属性复制到目标对象，返回目标对象
1.28 vue3 新特性有哪些？
1、性能提升
- 响应式性能提升，由原来的 Object.defineProperty 改为基于ES6的 Proxy ，使其速度更快，消除警告。
- 重写了 Vdom ，突破了 Vdom 的性能瓶颈。
- 进行模板编译优化。
- 更加高效的组件初始化
2、更好的支持 typeScript
- 有更好的类型推断，使得 Vue3 把 typeScript 支持得非常好
3、新增Composition API
- Composition API 是 vue3 新增的功能，比 mixin 更强大。它可以把各个功能模块独立开来，提高代码逻辑的可复用性，同时代码压缩性更强
4、新增组件
- Fragment 不再限制 template 只有一个根几点。
- Teleport 传送门，允许我们将控制的内容传送到任意的 DOM 中。
- Supense 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验。
5、Tree-shaking：支持摇树优化
- 摇树优化后会将不需要的模块修剪掉，真正需要的模块打到包内。优化后的项目体积只有原来的一半，加载速度更快
6、Custom Renderer API： 自定义渲染器
- 实现 DOM 的方式进行 WebGL 编程
1.29 vue3 组合式API生命周期钩子函数有变化吗?
setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显示的定义它们。其他的钩子都可以编写到 setup 内
1.30 watch 和 watchEffect 的区别？
watch 和 watchEffect 都是监听器，watchEffect 是一个副作用函数。它们之间的区别有：
- watch 需要传入监听的数据源，而 watchEffect 可以自动手机数据源作为依赖。
- watch 可以访问倒改变之前和之后的值，watchEffect 只能获取改变后的值。
- watch 运行的时候不会立即执行，值改变后才会执行，而 watchEffect 运行后可立即执行。这一点可以通过 watch 的配置项 immediate 改变。
