正文

前端芝士树vue.js面试题整理/知识点梳理(代码片段)

datiangou  datiangou  2023-02-05  348

关键词：

【前端芝士树】 Vue.js 面试题整理

MVVM是什么？

MVVM 是 Model-View-ViewModel 的缩写。

Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

技术分享图片

注意， MVVM模型中， Model和View是不会直接连接的，而ViewModel则会以双向连接的形式连接Model和View。

0. Vue的特性（优缺点）以及和其他框架的对比

Vue的优点

轻量级的框架
双向数据绑定
指令
插件化

与React的对比

节选自Vue的官方文档，笔者我进行了一些梳理，想了解得具体些的话还是猛戳链接吧。

两者具有许多的相似之处
- 使用 Virtual DOM
- 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
- 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
Vue与React的不同之处
- 组件的重渲染 React中组件的重渲染需要通过shouldComponentUpdate来避免不必要的子组件的重渲染，而Vue中组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。
- JSX vs Template 在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。Vue默认推荐使用Vue模板（更适用于表现类），但Vue也支持JSX。

组件作用域的CSS 在React中，CSS 作用域是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)，而Vue则有更好的解决方案，如下：
``` <style scoped> @media (min-width: 250px) .list-container:hover background: orange; </style> ```
这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover，这样就可以控制CSS只在这个组件内生效。
- 更多的对比请移步Vue的官方文档吧，太多也不好记的

1. Vue的生命周期

具体可以参照官网的这张图，左侧以红色框表示的都是阶段

beforeCreate
created
beforeMount
mounted
beforeUpdated
updated
beforeDestroy
destroyed

大致过程就是

数据初始化（1~2）
完成数据观测、属性和方法的运算加载，event/wather时间回调。
dom挂载阶段（3~4）
el被新创建的vm.$el替换并挂载到实例上去，之后调用钩子函数。
数据更新阶段（5~6）
数据更新，虚拟dom重渲染
组件卸载阶段（7~8）
销毁实例及子实例

2. Vue实现数据双向绑定的原理

vue实现数据双向绑定主要是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令，最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

3. Vue的路由实现

路由的实现有两种：hash和history interface来实现前端路由，
hash在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特点：

（1）hash虽然在URL中，但不被包括在HTTP请求中

（2）用来指导浏览器动作，对服务端安全无用，hash不会重加载页面

history采用h5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更，不过history有个问题是：如果用户直接在地址栏中输入并回车，浏览器重启或重新加载时，history模式会将url修改的和正常请求后端一样，此情况下，重新向后端发送请求，后端如果没有配置对应路由处理，则返回404，解决方法是后端配置一下。

4. Vue的路由传参


&lt;router-link :to="path:'/index',params：id:num"&gt;
&lt;router-link :to=" path:'/index' , query:id:num"&gt;

然后通过$route.params来读取数据，但路由传递参数值是对象的话就不行了会报错，传递前用base64转译一下就可以了。

5. Vue组件间的参数传递

父组件与子组件传值

父组件通过标签上面定义传值


&lt;parent&gt;
&lt;child :child-msg="msg"&gt;&lt;/child&gt;  //这里必须要用 - 代替驼峰
&lt;/parent&gt;

data()
   return 
       msg: [1,2,3]
   ;

子组件通过props方法接受数据


子组件通过props来接收数据: 
方式1：
props: ['childMsg']

方式2 :
props: 
    childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告


方式3：
props: 
    childMsg: 
        type: Array,    //传入的类型
        default: [0,0,0] //这样可以指定默认的值

子组件向父组件传递数据

子组件通过$emit方法传递参数


&lt;template&gt;
    &lt;div @click="testClick"&gt;&lt;/div&gt;
&lt;/template&gt;

methods: 
    testClick() 
        this.$emit('test','123'); 
        //$emit（even,value）even 是一个函数，value 是传给父组件的值 ， 触发名为test方法， '123'为向父组件传递的数据

父组件通过v-on(简写为@)来监听DOM事件，并在触发时接收数据运行js函数。


&lt;div&gt;
    &lt;child @test="change" :msg="msg"&gt;&lt;/child&gt;  //监听子组件触发的test事件,然后调用change方法
&lt;/div&gt;
methods: 
    change(val) 
        this.msg = val;  // val: 123

非父子组件间的数据传递

如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信.
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.


let Hub = new Vue(); //创建事件中心

组件1触发：


&lt;div @click="eve"&gt;&lt;/div&gt;
methods: 
    eve() 
        Hub.$emit('change','hehe'); //Hub触发事件

组件2接收:


&lt;div&gt;&lt;/div&gt;
created() 
    Hub.$on('change', () =&gt;  //Hub接收事件
        this.msg = 'hehe';
    );

6. Vue响应数据变化的几种做法

methods: 每次获取都会重新计算求值
computed（计算属性，有缓存）: 基于数据依赖进行缓存，只有当数据变化时，才会重新求值。（计算属性只有 getter，可以在需要的时候自己设定 setter）。computed 擅长处理的情景：一个数据受多个数据影响。
watch: 当需要在数据变化时执行异步操作或者消耗较大的操作时，比较有效。watch 擅长处理的情景：一个数据影响多个数据。
v-model: 基于数据双向绑定（对于 v-for 循环列表中的项，需要使用键值）

7. Vue的条件渲染

Vue的条件渲染涉及到两个不同的关键字 v-if 和 v-show

`v-if`

v-if 是真正的条件渲染，它会适当地销毁和重建DOM达到让元素显示和隐藏的效果。
（Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，可以看一下第二段程序）
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。


&lt;div v-if="type === 'A'"&gt;
  A
&lt;/div&gt;
&lt;div v-else-if="type === 'B'"&gt;
  B
&lt;/div&gt;
&lt;div v-else-if="type === 'C'"&gt;
  C
&lt;/div&gt;
&lt;div v-else&gt;
  Not A/B/C
&lt;/div&gt;

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。
只需添加一个具有唯一值的 key 属性即可，没有 key 说明的话就会被复用：


&lt;template v-if="loginType === 'username'"&gt;
  &lt;label&gt;Username&lt;/label&gt;
  &lt;input placeholder="Enter your username" key="username-input"&gt;
&lt;/template&gt;
&lt;template v-else&gt;
  &lt;label&gt;Email&lt;/label&gt;
  &lt;input placeholder="Enter your email address" key="email-input"&gt;
&lt;/template&gt;

注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

`v-show`

通过修改元素的display的CSS属性让其显示或者隐藏，元素始终会被渲染并保留在DOM中。


&lt;h1 v-show="ok"&gt;Hello!&lt;/h1&gt;
//ok 在data里进行赋值为true或者false

`v-if` vs `v-show`

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

欢迎诸位同道们留言补充ヾ(?°?°?)??

参考链接
Vue官方教程
 MVVM - 廖雪峰的官方网站
 MVC，MVP 和 MVVM 的图示 - 阮一峰的网络日志
 vue.js学习笔记(一)：什么是mvvm框架，vue.js的核心思想 - _林冲 - 博客园
 vue父子组件通信 - Hi-Sen - 博客园
 Vue 成长之路（一） - 媛媛码农成长记 - SegmentFault 思否

来源：https://segmentfault.com/a/1190000016268245

vue.js面试题整理(代码片段)

Vue.js面试题整理一、什么是MVVM？MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步V... 查看详情

js万字整理javascript相关基础技术面试题总结-前端面试必备-基础知识总结-秋招冲鸭(代码片段)

文章目录1.变量声明与类型1.1varletconst区别1.2数据类型1.3值类型与引用类型的区别1.4typeof能判断哪些类型1.5判断数据类型的方式1.6`===`与`==`1.7truly变量与falsely变量1.8强制类型转换和隐式类型转换1.9语句... 查看详情

前端面试题梳理(代码片段)

加了删除线的优先级较低，不常问，但也有的问。HTML相关面试题1.HTML5有哪些新特性？canvas，语义话标签（header，footer等），媒体播放（audio，video），增强表单控件form（calend 查看详情

面向校招mysql知识点整理(代码片段)

目录基础数据库三范式InnoDB与MyISAMMySQL执行查询过程索引索引模型哈希模型有序数组模型搜索树模型BST和AVL等二叉树模型B树模型B+树主键索引和非主键索引回表索引维护(页分裂与页合并)覆盖索引最左前缀原则前缀索引索引下... 查看详情

面向校招mysql知识点整理(代码片段)

前端技能树，面试复习——风中劲草：知识要点精讲精炼手册(代码片段)

...么《风中劲草：知识要点精讲精炼手册》就是对前面章节知识点的浓缩版本，便于大家背诵。这也是本专栏的一大特色，方便一些急需参加面试、在短时间内无法充分准备的同学。同时，在精讲精炼手册中，我还结合真实面试题... 查看详情

帮你梳理清楚，另附有前端面试551道题(代码片段)

前言之前小编写了一篇前端面试套餐：Vue面试题总结+JavaScript前端经典面试题+100道CSS面试题文章，有讲到打算后面单独写一篇详讲前端基础学什么，拖了这么久终于出来了哈哈哈哈。至于前端怎么学，小伙... 查看详情

web前端面试题整理(代码片段)

---恢复内容开始---1.浏览器的内核分别是什么?　　IE:trident内核　　Firefox：gecko内核　　Safari：webkit内核　　Opera：以前是presto内核，Opera现已改用GoogleChrome的Blink内核　　Chrome：Blink(基于webkit，Google与OperaSoftware共同开发)2.一次完... 查看详情

15个方面解析面试官问的那些前端面试题，好家伙整理完有立刻想找大厂对线的冲动

...、IOS/Andriod浏览器适配问题整理、Pc端兼容性问题、其他知识点面试题、项目类问题、笔试编程题15个方面来讲前端面试题，题目答案文档里有，篇幅原因就只列举了部分题目，完整版的可以点击这看看噢。前端掌握的... 查看详情

2w字！梳理50道经典计算机网络面试题（收藏版）(代码片段)

...面试题主要考察候选人，是否掌握HTTP状态码这个基础知识点。不管是不是面试需要，我们都要知道，日常开发中的这几个状态码的含义哈：2.HTTP常用的请求方式，区别和用途？思路:这道题主要考察候选人&... 查看详情

前端面试知识点梳理之五——javascript面向对象

一、相关问题　　1.创建对象有几种方法　　2.原型，构造函数，实例，原型链　　3.instanceof的原理　　4.new运算符二、问题解答1.创建对象有几种方法查看详情

前端技能树，面试复习第54天——手写代码：情景题

⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、区块链、Web3、答疑解惑、面试辅导以及职业发展。查看详情

2w字！梳理50道经典计算机网络面试题（收藏版）(代码片段)

...面试题主要考察候选人，是否掌握HTTP状态码这个基础知识点。不管是不是面试需要，我们都要知道& 查看详情

vue经典面试题总结——目录(代码片段)

Vue核心知识点1、对于Vue是一套渐进式框架的理解2、vue.js的两个核心是什么？3、请问 v-if 和 v-show 有什么区别4、vue常用的修饰符5、v-on可以监听多个方法吗？6、vue中 key 值的作用7、vue-cli工程升级vue版本8、v... 查看详情

前端面试题总结二(js原型继承)

今天这篇文章整理了JS原型和继承的一些知识点，面试的时候基！本！都！会！问！还不快认真阅读下文，看看你还有哪些知识点需要掌握吧~ 1.原型链基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和... 查看详情

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

系列文章目录一名深漂程序员：我所整理和收集的前端面试题（一）一名深漂程序员：我所整理和收集的前端面试题（二）一、如何做性能优化1.webpack工程环境层面的优化1.新的工具，更好的代码压缩... 查看详情

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

2021年，vue3.0面试题分析（干货满满，内容详尽）

...xff08;相信近期去面试的小伙伴或多或少都会被问到Vue3.0的知识点）。那么接下来分析一波（本文讲的非常详细&# 查看详情

正文

前端芝士树vue.js面试题整理/知识点梳理(代码片段)

【前端芝士树】 Vue.js 面试题整理

MVVM是什么？

0. Vue的特性（优缺点）以及和其他框架的对比

Vue的优点

与React的对比

1. Vue的生命周期

2. Vue实现数据双向绑定的原理

3. Vue的路由实现

4. Vue的路由传参

5. Vue组件间的参数传递

父组件与子组件传值

子组件向父组件传递数据

非父子组件间的数据传递

6. Vue响应数据变化的几种做法

7. Vue的条件渲染

v-if

v-show

v-if vs v-show

vue.js面试题整理(代码片段)

js万字整理javascript相关基础技术面试题总结-前端面试必备-基础知识总结-秋招冲鸭(代码片段)

前端面试题梳理(代码片段)

面向校招mysql知识点整理(代码片段)

面向校招mysql知识点整理(代码片段)

前端技能树，面试复习——风中劲草：知识要点精讲精炼手册(代码片段)

帮你梳理清楚，另附有前端面试551道题(代码片段)

web前端面试题整理(代码片段)

15个方面解析面试官问的那些前端面试题，好家伙整理完有立刻想找大厂对线的冲动

2w字！梳理50道经典计算机网络面试题（收藏版）(代码片段)

前端面试知识点梳理之五——javascript面向对象

前端技能树，面试复习第54天——手写代码：情景题

2w字！梳理50道经典计算机网络面试题（收藏版）(代码片段)

vue经典面试题总结——目录(代码片段)

前端面试题总结二(js原型继承)

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

2021年，vue3.0面试题分析（干货满满，内容详尽）

`v-if`

`v-show`

`v-if` vs `v-show`