3 - Vue 面试题

1 React和vue之间联系和区别

1 相似点: 
------------------------------------------------------------------------------------------
1 都是基于 MVVM 的快速构建项目的框架
2 都用到了虚拟DOM来实现
3 都有状态管理, 路由, 组件, 等等
------------------------------------------------------------------------------------------

2 不同点: 
------------------------------------------------------------------------------------------
1 Vue 中是使用模板定义HTML结构的, React 中是使用 JSX 来定义的
2 Vue 中实现了数据相信爱那个绑定, React 中是单项数据流
3 应用场景: 
  1 Vue: 可快速开发小的项目, 简单, 便于和很多后端交流
  2 React: 使用灵活, 性能更好, 适合开发大一些的项目
------------------------------------------------------------------------------------------

2 说说你对前端路由的理解

1 为什么会出现前端路由: 为了解决单页面网站的
  
2 前端路由解决了什么问题: 通过切换浏览器地址路径, 来匹配相对应的页面组件
  
3 前端路由实现的原理是什么
  1 就是路由会根据不同的 url 去映射不同的组件页面

3 说说 Vue 中的组件通信

1 父子组件
  1 我们在调用子组件标签的时候, 加自定义属性(传值)
  2 然后在子组件的配置项中通过 props 接收数据 (多接收方式: 数组或对象)

2 子父组件: 
  1 在父组件调用子组件标签的时候, 加自定义事件 (接收数据) 
    // 事件方法会默认接收一个子组件发送的实参数据 (记得写形参接收)
  2 子组件内部调用: this.$emit( "ck1", data)  --> 发射数据    // ck1 == 上面的自定义事件名 
    //子组件发射数据后, 会去自动执行父组件自定义的事件函数接收数据

3 Vuex: 
  1 它是一个全局状态管理, 所有的组件都可以访问到, 该内存对象中的方法

4 事件总线: 常用于解决, 兄弟之间的数据交互, 是一种发布订阅模式  (设置如下)
  1 首先需要实例一个事件总线的对象: var bus = new Vue()
  2 兄弟 A 组件发数据: bus.$emit("a1", data)    // 发送 data数据到 a1这个频道
  3 兄弟 B 组件收数据: bus.$on("a1", (msg) => {})   // 监听 a1频道, 随时接收该频道发射出来的数据

4 说说你对 Vuex 的理解

1 简单描述 Vuex: 它是专为 Vue程序开发, 而设计的状态管理模式  (全局数据管理)

2 理解: 说白了就是, 创建了一个, 所有项目组件都可以访问, 的存放数据的全局对象, 以及相关操作模块

3 特点: 
  1 遵循单向流数据规范, 只在组件中读取数据, 不在组件中修改数据
  2 只要 state中的数据发生改变, 所有用到该数据的组件都会动态同步
  
4 作用: 达到所有项目组件共享数据的效果

5 Vuex 和 localStorage 的区别: 
  1 vuex
    1 数据存储在内存中  //全局对象中, 效率高, 速度快
    2 刷新页面时数据将会丢失
    3 用于组件之间共享数据
  2 localStorage
    1 数据存储在本地
    2 刷新页面时数据不会丢失
    3 用于多页面之间共享数据

5 说说你对 MVVM 框架的理解

1 简单介绍: 
--------------------------------------------------------------------------------------------
1 MVVM (Model-View-ViewModel): 也可以说是 MVC (Model-View-Controller) 的改进版 (MVC: 模型--视图--控制器)

2 MVVM 存在的价值: 
  1 极大了提高了开发效率
  2 提高了项目的, 可维护性和扩展性

3 MVVM 框架的详细解读: 
  1 Vue 是一个 MVVM 框架
  2 MVVM 框架的核心是 == 模型, 视图, 视图模型  (他们的核心原理就是) == 数据双向绑定 (也就是响应式原理)
  3 响应式原理 == defineProperty() 方法的劫持 + 观察者模式 (也就是发布订阅模式)
  4 Vue -> MVVM (数据双向绑定) -> 响应式原理 -> defineProperty() + 观察者模式
--------------------------------------------------------------------------------------------

2 MVVM 所指代的内容是: 模型--视图--视图模型 🔶
--------------------------------------------------------------------------------------------
  1 模型 Model: 指的是后端传递的数据
  2 视图 View: 指的是所看到的页面
  3 视图模型 ViewModel: MVVM 模式的核心  //是连接view和model的桥梁
--------------------------------------------------------------------------------------------

3 相关解释: 🔶
--------------------------------------------------------------------------------------------
  1 视图模型的作用: //同时实现下面俩个作用的情况, 我们就称之为, 数据双向绑定
    1 将--模型--转化成--视图  //就是将后端传递的数据转化成所看到的页面, 实现方式是 -> 数据绑定
    2 将--视图--转化成--模型  //就是将所看到的页面转化成后端的数据, 实现方式是 -> DOM 事件监听
    
  2 视图模型作用的具体实现: 
    1 它可以在, 取出 Model 数据的同时, 帮忙处理 View中, 的展示内容, 所涉及到的业务逻辑
--------------------------------------------------------------------------------------------

4 深入理解: 🔶
  1 在 MVVM的框架下, 视图--模型, 是通过 ViewModel来通信的
  2 ViewModel 通常要实现一个 observer观察者  //也就是它把, 视图和模型联系起来的, 它和俩者都有联系
  3 当数据发生变化, ViewModel 能够监听到数据的这种变化, 然后通知到对应的视图做自动更新
  4 当用户操作视图, ViewModel 也能够监听到视图数据的变化, 然后通知数据做改动
    //用户把 View 数据改变的时候, Model 中的数据也同步更新了
    //Model 中的数据发生改变时, View 展示的数据也会同步更新
  5 如此便实现了数据的双向绑定
-------------------------------------------------------------------------------------------

6 说说数据双向绑定的理解和基本原理

1 响应式的原理是什么: 数据和更新视图, 之间存在影响关系 💦

2 响应式的发生过程: 在Data中, 触发Watcher事件, 组件生成虚拟DOM树 🔶
-----------------------------------------------------------------------------------
1 俩种触发情况: 
  1 Data 中的数据, 发生改变的时, Data内部隐式的 set, 就会去触发 Watcher事件  //修改数据
  2 Data 中得到新数据时, Data内部隐式的 get, 就会去触发 Watcher 事件  //初始化页面

2 Watcher 事件的作用: 更新组件视图

3 整个详细过程:  //可不看, 就是用于解释的
  1 数据  //新数据
  2 Data  //获取新数据 get - 修改就数据 set
  3 Watcher  //更新视图
  4 组件  //视图更新, 组件会生成虚拟DOM树
-----------------------------------------------------------------------------------

3 响应式业务逻辑: 🔶
-----------------------------------------------------------------------------------
1 把一个 JS对象, 作为 data选项

2 遍历该对象所有属性, 且用 defineProperty()方法, 劫持所有属性, 放在当前的 Vue组件实例上

3 相关解释: 
  1 defineProperty()  [读音: 低饭破若破题]
    1 用于定义对象的
    2 它定义的对象里面, 就有 get/set 这俩个回调函数  //通过观察者模式, 监听数据
    3 属性被修改的时候, 就会触发 set   //某个属性的属性值, 改变的时候, 就会触发set
    4 当属性值被访问的时候, 就会触发 get  //HTML结构, 或方法中, 会用到, 就会发生访问

  3 业务逻辑: 
    1 遍历 Data对象, 用取到得属性和属性值, 通过 defineProperty()方法, 定义新得对象
    2 而这个新的对象, 由于 defineProperty()方法的特点, 新对象有了改变数据, 就去触发 Watcher 的能力

7 Vue 项目中遇到的问题, 原因以及解决办法

1 拿到数据, 不能同步渲染到页面上的情况: 
  1 原因: 我们渲染页面是同步的 (先执行) -- 数据请求是异步的 (后执行)
          同步代码执行完成了 -- 然后再拿到数据更新 -- 出现数据变了 -- 视图不变的问题
          (为什么出现这个问题呢)  可能是执行栈正在处理异步任务, 被占用了, 所以没有触发响应式

  2 解决方案: nextTick可以让我们在下次 DOM 更新循环结束之后延迟执行回调, 用于获得更新后的 DOM

2 就是有时候, 会有一些 bug 什么的, 

3 关于组件的一些坑, 有时候没有实时更新的问题, 学习 Vue 3.x 的时候, Vant 那个引入方式啥的, 无效等等

4 cnpm 会丢包的现象, 不稳定, 后来使用的 npm 配置了国内镜像

8 说说你对路由导航守卫的理解

1 简单描述: 
  1 导航: 路由正在发生改变, 从一个组件要去到另一个组件页面
  2 守卫: 路由发生改变的时候 (判断权限), 决定是否允许跳转  //不允许的情况, 是取消还是跳转到其他页面

2 导航守卫的分类: 
  1 全局守卫: 
  2 路由独享守卫: 
  3 组件内的守卫: 

3 导航守卫的实现: 
  1 通常使用的, 全局前置守卫: router.beforeEach()
  2 业务逻辑: 
    1 路由切换过程: url改变 -> 判定匹配规则 -> 展示找到的组件  //第二步的过程会触发导航守卫的回调
    2 然后在全局前置守卫中, 来做一个权限的判断, 

9 说说 history 和 hash 模式的区别

1 hash 模式: 
  1 我们的路径前面会拼接一个 #/
  2 打包上线的时候, 没有任何问题
  
2 histroy 模式: 
  1 显示正常路径 (简洁)
  2 打包上线的时候, 刷新页面会出现404, 需要后端的一个部署(应该路径重定向)  //404 == 服务器找不到请求的网页

10 单向数据流和双向数据流的优缺点

1 单向数据流: 
  1 数据的流向很清晰, 便于维护和管理 (就是 Vuex 的实现原理)
  2 View -> Actions -> State -> View
  
2 双向数据流: 
  1 会导致数据问题的源头难以被跟踪到
  2 但是操作起来很方便

11 说说你对 webpack 的理解

1 描述: 它是一个用于 JavaScript 的静态模块打包工具

2 webpack 构建流程: 
  通过入口文件解析, 项目内容结合 webpack.config.js 配置参数, 通过出口< 生产最后的结果

3 常用的关键字: 
	1 loader: 用于编译, 浏览器识别不了的文件  (文件转换器)  //例 -> scss转换为css 就有对应的 loader
	2 plugin: 用于扩展 webpack的功能
	3 entry: 入口起点  (了解就这么多了, 关于webpack 具体配置之前是项目老大去配置的)

12 说说 Vue 中的常用指令以及功能

v-if -- 创建或删除 HTML 元素
v-show -- 显示或隐藏 HTML 元素
v-html -- 插值操作
v-bind -- 绑定属性
v-on -- 绑定事件
v-for -- 循环遍历
v-model -- 表单双向绑定  (input 事件 + Value)

13 Vue 的生命周期

1 说明: 事物从诞生到消亡的整个过程
	1 创建阶段: beforeCreate -- 创建虚拟dom -- created
    2 挂载阶段: beforeMount -- 将虚拟dom渲染成真实dom -- mounted
    3 更新阶段: beforeUpdate -- 更新数据 -- updated
    4 销毁阶段: beforeDestroy -- 销毁真实dom -- destroyed

2 各个阶段的状态
	beforeCreate() {}  //有实例对象, 没有数据, 没有真实的dom
    created() { 可以调接口了..}  // 有实例对象, 有数据, 没有真实的dom
    
    beforeMount() {}  //有实例对象, 有数据, 没有真实的dom
    mounted() {调接口, 开定时器, 创建长连接, 操作dom..}   //有实例对象, 有数据, 有真实的dom

    -------- 以上四个钩子函数, 一个组件只执行一次 -----------

	// 更新数据才会执行的一组钩子 -- created 阶段修改数据不会触发这个钩子
    beforeUpdate() {}  //数据是更新之后的值, dom当中的数据是更新之前的
    updated() {}  //数据是更新之后的值, dom当中的数据是更新之后的
    
    beforeDestroy() {清除定时器, 长链接等}  //有实例对象 -- 有数据 -- 有真实的dom
    destroyed() {用来擦屁股的}  //有实例对象 -- 有数据 -- 没有真实的dom

14 说说你对计算属性的理解, 计算属性和监听器的区别

1 对计算属性的理解: 
  1 存在价值: 我们有时候需要去展示数据计算之后的一个结果 //在页面不适合做一写复杂的计算
  2 代码整洁, 便于阅读
  
2 计算属性和监听器的区别: 
  1 作用不同: 计算属性是用于计算数据需求结果的, 监听器是用于监听数据变化的, 发生变化的时候可以干一些事
  2 方便我们实现一些业务逻辑

15 一些其他小的问题

1 MVVM 和 MVC 的区别: 
---------------------------------------------------------------------------------------
1 MVVM 也可以说是 MVC 的改进版
2 所以在没有没有特定需求的情况下, 使用 MVVM 就对了
---------------------------------------------------------------------------------------

2 Vue 中的 diff 运算: //也就是当数据发生变化时, vue是怎么更新节点的?
---------------------------------------------------------------------------------------
8 diff 运算是什么东西
1 简单描述一个问题: 这个有点像 虚拟 DOM要解决的问题
  1 要知道渲染真实DOM的开销是很大的, 比如我们修改了某个数据, 如果直接渲染到真实dom上会引起整个dom树的重绘和重排
  2 我们只需要更新我们修改的那一小块dom而不要更新整个dom, 怎么办呢 --> diff 运算

2 对于 diff 算法的描述: 是一种算法优化
  1 是一种同层节点进行比较的高效算法, 避免了对结构树进行逐层搜索遍历
  2 diff算法的在很多场景下都有应用, 例如 新旧 虚拟 DOM节点, 比较更新时, 就用到了该算法

3 注意事项: 
  1 比较只会在同层级进行, 不会跨层级比较
  2 

 4 diff 运算干什么的
    1 计算出 DOM中真正变化的部分, 只针对该部分做原生 DOM操作, 而非重新渲染整个页面
    2 脏节点: 就是 DOM中发生变化的那个节点
    3 所以也可以说, diff 运算只会对脏节点进行操作, 而不会影响其他节点
---------------------------------------------------------------------------------------


3 keep-alive 的作用: 主要用于保存组件的状态(数据)和避免重复渲染组件 
---------------------------------------------------------------------------------------
1 被 <keep-alive> 标签包裹的组件, 在将要正常销毁时 -- 不进行销毁, 进行缓存
2 当路由切换到被缓存的组件时, 不会重新创建, 而是从缓存取出展示
---------------------------------------------------------------------------------------


4 虚拟 DOM 是个什么东西
---------------------------------------------------------------------------------------
1 简单描述: 
  1 可以看做是 JS 模拟了 真实DOM结构的, 树形结构
  2 说白了就是, 用JS对象模拟 真实DOM节点, 数据更新先操作 虚拟DOM, 然后根据虚拟 DOM去, 更新真实 DOM, 渲染页面

2 存在的价值: 可以解决的问题
  1 虚拟DOM, 可以很好的解决浏览器的性能问题
  2 用JS对象模拟, 真实的DOM节点, 好处是页面的更新可以先全部反映在JS对象(虚拟DOM)上
  3 等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制

3 了解: 
  1 之前使用原生js写页面的时候, 会发现操作DOM是一件非常麻烦的一件事情
  2 在浏览器里一遍又一遍的渲染 DOM是非常非常消耗性能的，常常会出现页面卡死的情况

4 虚拟 DOM 是怎么的一个流程: 
  1 若一次操作中有10次更新DOM的动作, 虚拟DOM不会立即操作DOM, 而是将这10次更新的内容存储在本地的一个 JS对象中
  2 最终将这个JS对象一次性挂载到DOM树上, 再进行后续操作, 避免大量无谓的计算量
  3 我们会有俩个虚拟 DOM, // 就是 JS对象 -> new/old 进行比较 diff
  4 我们修改的内容, 是直接去修改 新的虚拟 DOM 的, 
  5 当修改new虚拟DOM, 会把newDOM和oldDOM通过diff算法比较
  6 得出 diff 结果数据, 再把diff结果表通过DOM fragment (文档碎片)更新到浏览器DOM中

5 文档碎片是个啥, 就是原生 JS 中提供的, 用于优化 DOM操作的一种方案

6 虚拟 DOM 存在的真正意义: 
  1 是为了实现跨平台，服务端渲染
  2 以及提供一个性能还算不错 Dom 更新策略
  3 让整个 mvvm 框架灵活了起来

7 diff 算法
    1 概念: 通常用于提高, 新旧虚拟DOM, 比较和替换效率的, 一种算法
    2 做了哪些事: //并不是直接操作 DOM 的, 而是通过 文档碎片操作的
      1 计算出 DOM中真正变化的部分, 只针对该部分做原生 DOM操作, 而非重新渲染整个页面
      2 diff 运算只会对脏节点进行操作, 而不会影响其他节点
      3 脏节点: 就是 DOM中发生变化的那个节点

8 通过Diff算法得到diff算法结果数据表, 原本要操作的DOM在vue这边还是要操作的
9 通过, 文档碎片fragment, 来操作 DOM  //文档碎片的作用: 统一计算出所有变化后统一更新一次DOM
---------------------------------------------------------------------------------------

5 nextTick API 的解决问题
---------------------------------------------------------------------------------------
1 作用: 可以让我们在下次 DOM 更新循环结束之后延迟执行回调，用于获得更新后的 DOM
2 理解: 
  1 我们渲染页面是同步的 (先执行) -- 数据请求是异步的 (后执行)
  2 同步代码执行完成了 -- 然后再拿到数据更新 -- 出现数据变了 -- 视图不变的问题
---------------------------------------------------------------------------------------

6 $router 和 #route 的区别: 
---------------------------------------------------------------------------------------
1 描述: 他俩都是路由中涉及到的俩个对象
2 $router: 路由操作对象  (用于操作路由)  //比如要跳转到某个页面, 实现编程式路由传参
3 $route: 路由信息对象 (用于获取路由信息)  //比如接收路由传递的参数
---------------------------------------------------------------------------------------

16 v-model 的实现原理 (细说)

17 Created()和Mounted()的区别

Created() 的时候只有虚拟 DOM

Mounted() 的时候开始, 就有真实的 DOM了

18 Mixin会吗，说一下（原理是怎么实现的）

1 概念
------------------------------------------------------------------------------------
1 作用: 功能的复用 -- 其实就是对象合并 -- 合并组件的配置对象

2 理解: 把一些功能写在一个对象上, 混入其他实例, 达到功能共享的效果 ()

2 全局混入: 会把混入对象合并到所有 vue实例, 及所有组件都有这个对象的方法了(全局可用)
  main.js -> Vue.mixin({混入对象})  //混入对象的配置可以是组件配置项中的所有内容

3 局部混入: 混入对象的数据会和当前组件的数据合并
  单文件组件配置项: mixins: [obj]
------------------------------------------------------------------------------------

2 注意事项
------------------------------------------------------------------------------------
1 当混入对象和组件配置对象属性冲突时，以组件的数据为主

2 当混入对象和组件配置对象的方法重名时，保留两个方法，先执行混入对象的方法，再执行组件的方法

3 使用方式
  1 src -> mixins -> mixin1.js -> const mx = {} -> export default mx  //定义
  2 import mixin1 from "@/mixins/mixin1.js"  //导入