关于Vue框架，你应该注意什么地方？？？

末蓝、 2021-09-08 09:38 276阅读 0赞

**一、Vue.js 是什么？**  
Vue.js（是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用组件化开发以及 Vue 生态系统相关库开发的复杂单页应用。  
Vue.js 的目标是通过尽可能简单的 API 实现响应式的数据绑定的组件开发。  
**二、 Vue 的双向数据绑定原理是什么？**  
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。  
具体步骤：  
第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。  
第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。  
第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是：1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个 update()方法 3、待属性变动 dep.notice()通知时，能调用自身的update()方法，并触发 Compile 中绑定的回调，则功成身退。  
第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。  
**三、详细说下你对 Vue 生命周期的理解？**  
总共分为 8 个阶段:创建前/后，载入前/后，更新前/后，销毁前/后。  
beforeCreate：在实例初始化之后，数据观测(data observer)和event/watcher 事件配置之前被调用。  
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始， e l 属 性 目 前 不 可 见 b e f o r e M o u n t ： 在 挂 载 开 始 之 前 被 调 用 ： 相 关 的 r e n d e r 函 数 首 次 被 调 用 。 m o u n t e d ： e l 被 新 创 建 的 v m . el 属性目前不可见 beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted：el 被新创建的 vm. el属性目前不可见beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。mounted：el被新创建的vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm. e l 也 在 文 档 内 。 b e f o r e U p d a t e ： 数 据 更 新 时 调 用 ， 发 生 在 虚 拟 D O M 重 新 渲 染 和 打 补 丁 之 前 。 u p d a t e d ： 由 于 数 据 更 改 导 致 的 虚 拟 D O M 重 新 渲 染 和 打 补 丁 ， 在 这 之 后 会 调 用 该 钩 子 。 b e f o r e D e s t r o y ： 实 例 销 毁 之 前 调 用 。 在 这 一 步 ， 实 例 仍 然 完 全 可 用 。 d e s t r o y e d ： V u e 实 例 销 毁 后 调 用 。 调 用 后 ， V u e 实 例 指 示 的 所 有 东 西 都 会 解 绑 定 ， 所 有 的 事 件 监 听 器 会 被 移 除 ， 所 有 的 子 实 例 也 会 被 销 毁 。 当 使 用 组 件 的 k e e p − a l i v e 功 能 时 ， 增 加 两 个 周 期 ： a c t i v a t e d ： k e e p − a l i v e 组 件 激 活 时 调 用 。 d e a c t i v a t e d ： k e e p − a l i v e 组 件 停 用 时 调 用 。 V u e 2.5.0 版 本 新 增 一 个 周 期 钩 子 e r r o r C a p t u r e d ： 当 捕 获 一 个 来 自 子 孙 组 件 的 错 误 时 被 调 用 。 ∗ ∗ 四 、 请 说 下 具 体 使 用 v u e 的 理 解 ？ ∗ ∗ 1 、 使 用 v u e 不 必 担 心 布 局 更 改 和 类 名 重 复 导 致 的 j s 重 写 ， 因 为 它 是 靠 数 据 驱 动 双 向 绑 定 ， 底 层 是 通 过 O b j e c t . d e f i n e P r o p e r t y ( ) 定 义 的 数 据 s e t 、 g e t 函 数 原 理 实 现 。 2 、 组 件 化 开 发 ， 让 项 目 的 可 拓 展 性 、 移 植 性 更 好 ， 代 码 重 用 性 更 高 ， 就 好 像 农 民 工 建 房 子 ， 拿 起 自 己 的 工 具 包 就 可 以 开 工 。 项 目 经 理 坐 等 收 楼 就 好 。 3 、 单 页 应 用 的 体 验 零 距 离 接 触 安 卓 原 生 应 用 ， 局 部 组 件 更 新 界 面 ， 让 用 户 体 验 更 快 速 省 时 。 4 、 j s 的 代 码 无 形 的 规 范 ， 团 队 合 作 开 发 代 码 可 阅 读 性 更 高 。 ∗ ∗ 五 、 s c s s 是 什 么 ？ 在 v u e . c l i 中 的 安 装 使 用 步 骤 是 ？ 有 哪 几 大 特 性 ？ ∗ ∗ c s s 的 预 编 译 使 用 步 骤 ： 第 一 步 ： 用 n p m 下 三 个 l o a d e r （ s a s s − l o a d e r 、 c s s − l o a d e r 、 n o d e − s a s s ） 第 二 步 ： 在 b u i l d 目 录 找 到 w e b p a c k . b a s e . c o n f i g . j s ， 在 那 个 e x t e n d s 属 性 中 加 一 个 拓 展 . s c s s 第 三 步 ： 还 是 在 同 一 个 文 件 ， 配 置 一 个 m o d u l e 属 性 第 四 步 ： 然 后 在 组 件 的 s t y l e 标 签 加 上 l a n g 属 性 ， 例 如 ： l a n g = ” s c s s ” 特 性 : 1 、 可 以 用 变 量 ， 例 如 （ el 也在文档内。 beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 当使用组件的 keep-alive 功能时，增加两个周期： activated：keep-alive 组件激活时调用。 deactivated：keep-alive 组件停用时调用。 Vue2.5.0 版本新增一个周期钩子 errorCaptured：当捕获一个来自子孙组件的错误时被调用。 \*\*四、请说下具体使用 vue 的理解？\*\* 1、使用 vue 不必担心布局更改和类名重复导致的 js 重写，因为它是靠数据驱动双向绑定，底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现。 2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。 3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。 4、js 的代码无形的规范，团队合作开发代码可阅读性更高。 \*\*五、scss 是什么？在 vue.cli 中的安装使用步骤是？有哪几大特性？\*\* css 的预编译 使用步骤： 第一步：用 npm 下三个 loader（sass-loader、css-loader、node-sass） 第二步：在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓展.scss 第三步：还是在同一个文件，配置一个 module 属性 第四步：然后在组件的 style 标签加上 lang 属性 ，例如：lang=”scss” 特性:1、可以用变量，例如（ el也在文档内。beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。当使用组件的keep−alive功能时，增加两个周期：activated：keep−alive组件激活时调用。deactivated：keep−alive组件停用时调用。Vue2.5.0版本新增一个周期钩子errorCaptured：当捕获一个来自子孙组件的错误时被调用。∗∗四、请说下具体使用vue的理解？∗∗1、使用vue不必担心布局更改和类名重复导致的js重写，因为它是靠数据驱动双向绑定，底层是通过Object.defineProperty()定义的数据set、get函数原理实现。2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。4、js的代码无形的规范，团队合作开发代码可阅读性更高。∗∗五、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？∗∗css的预编译使用步骤：第一步：用npm下三个loader（sass−loader、css−loader、node−sass）第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss第三步：还是在同一个文件，配置一个module属性第四步：然后在组件的style标签加上lang属性，例如：lang=”scss”特性:1、可以用变量，例如（变量名称=值）；2、可以用混合器；3、可以嵌套  
**六、Vue 中组件直接的通信是如何实现的？**  
组件关系可分为父子组件通信、兄弟组件通信。  
1、父组件向子组件：通过 props 属性来实现  
2、子组件向父组件：子组件用 e m i t ( ) 来 触 发 事 件 ， 父 组 件 用 emit( )来触发事件，父组件用 emit()来触发事件，父组件用on( )来监昕子组件的事件。父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。  
3、兄弟之间的通信：通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus，之后通过分别调用Bus 事件触发和监听来实现组件之间的通信和参数传递。  
**七、Vue 中 ref 的作用是什么？**  
ref 被用来给 DOM 元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的 DOM 元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。  
注意：只要想要在 Vue 中直接操作 DOM 元素，就必须用 ref 属性进行注册  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]今天的前端Vue学习重点分享就到这里了，想学习前端、更多的前端知识，欢迎大家关注、私信我！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/e76566afcfbf453fba795c23fafcbe6b.png