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) --> 发射数据
3 Vuex:
1 它是一个全局状态管理, 所有的组件都可以访问到, 该内存对象中的方法
4 事件总线: 常用于解决, 兄弟之间的数据交互, 是一种发布订阅模式 (设置如下)
1 首先需要实例一个事件总线的对象: var bus = new Vue()
2 兄弟 A 组件发数据: bus.$emit("a1", data)
3 兄弟 B 组件收数据: bus.$on("a1", (msg) => {})
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 模式的核心
--------------------------------------------------------------------------------------------
3 相关解释: 🔶
--------------------------------------------------------------------------------------------
1 视图模型的作用:
1 将--模型--转化成--视图
2 将--视图--转化成--模型
2 视图模型作用的具体实现:
1 它可以在, 取出 Model 数据的同时, 帮忙处理 View中, 的展示内容, 所涉及到的业务逻辑
--------------------------------------------------------------------------------------------
4 深入理解: 🔶
1 在 MVVM的框架下, 视图--模型, 是通过 ViewModel来通信的
2 ViewModel 通常要实现一个 observer观察者
3 当数据发生变化, ViewModel 能够监听到数据的这种变化, 然后通知到对应的视图做自动更新
4 当用户操作视图, ViewModel 也能够监听到视图数据的变化, 然后通知数据做改动
5 如此便实现了数据的双向绑定
-------------------------------------------------------------------------------------------
6 说说数据双向绑定的理解和基本原理
1 响应式的原理是什么: 数据和更新视图, 之间存在影响关系 💦
2 响应式的发生过程: 在Data中, 触发Watcher事件, 组件生成虚拟DOM树 🔶
-----------------------------------------------------------------------------------
1 俩种触发情况:
1 Data 中的数据, 发生改变的时, Data内部隐式的 set, 就会去触发 Watcher事件
2 Data 中得到新数据时, Data内部隐式的 get, 就会去触发 Watcher 事件
2 Watcher 事件的作用: 更新组件视图
3 整个详细过程:
1 数据
2 Data
3 Watcher
4 组件
-----------------------------------------------------------------------------------
3 响应式业务逻辑: 🔶
-----------------------------------------------------------------------------------
1 把一个 JS对象, 作为 data选项
2 遍历该对象所有属性, 且用 defineProperty()方法, 劫持所有属性, 放在当前的 Vue组件实例上
3 相关解释:
1 defineProperty() [读音: 低饭破若破题]
1 用于定义对象的
2 它定义的对象里面, 就有 get/set 这俩个回调函数
3 属性被修改的时候, 就会触发 set
4 当属性值被访问的时候, 就会触发 get
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, 需要后端的一个部署(应该路径重定向)
10 单向数据流和双向数据流的优缺点
1 单向数据流:
1 数据的流向很清晰, 便于维护和管理 (就是 Vuex 的实现原理)
2 View -> Actions -> State -> View
2 双向数据流:
1 会导致数据问题的源头难以被跟踪到
2 但是操作起来很方便
11 说说你对 webpack 的理解
1 描述: 它是一个用于 JavaScript 的静态模块打包工具
2 webpack 构建流程:
通过入口文件解析, 项目内容结合 webpack.config.js 配置参数, 通过出口< 生产最后的结果
3 常用的关键字:
1 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() {}
created() { 可以调接口了..}
beforeMount() {}
mounted() {调接口, 开定时器, 创建长连接, 操作dom..}
-------- 以上四个钩子函数, 一个组件只执行一次 -----------
beforeUpdate() {}
updated() {}
beforeDestroy() {清除定时器, 长链接等}
destroyed() {用来擦屁股的}
14 说说你对计算属性的理解, 计算属性和监听器的区别
1 对计算属性的理解:
1 存在价值: 我们有时候需要去展示数据计算之后的一个结果
2 代码整洁, 便于阅读
2 计算属性和监听器的区别:
1 作用不同: 计算属性是用于计算数据需求结果的, 监听器是用于监听数据变化的, 发生变化的时候可以干一些事
2 方便我们实现一些业务逻辑
15 一些其他小的问题
1 MVVM 和 MVC 的区别:
---------------------------------------------------------------------------------------
1 MVVM 也可以说是 MVC 的改进版
2 所以在没有没有特定需求的情况下, 使用 MVVM 就对了
---------------------------------------------------------------------------------------
2 Vue 中的 diff 运算:
---------------------------------------------------------------------------------------
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,
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 做了哪些事:
1 计算出 DOM中真正变化的部分, 只针对该部分做原生 DOM操作, 而非重新渲染整个页面
2 diff 运算只会对脏节点进行操作, 而不会影响其他节点
3 脏节点: 就是 DOM中发生变化的那个节点
8 通过Diff算法得到diff算法结果数据表, 原本要操作的DOM在vue这边还是要操作的
9 通过, 文档碎片fragment, 来操作 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"