2020Web前端面试题:Vue面试题如何做到深入浅出
sinye56 2024-10-26 14:44 5 浏览 0 评论
关于Vue框架部分会涉及一些高频面试题，大多数看似非常初级，在官方文档就能查看的纯记忆性质的面试题，比如:
- vue组件之间如何通信?
- vue生命周期有哪些？
这类面试题在文档中就能找到答案，网络上面找到的答案也是千篇一律。大家只要使用过vue并且稍加记忆即可流畅作答，但如果你也这样回答，就算自己真的比其他竞争者更有实力，也很难脱颖而出，更别提获得高薪offer了。
事实真是这样吗？
答案当然是否定的。以下这篇文章提炼于开课吧全栈课程的训练营，我们的问题并不多，但是旨在将回答问题的方式、思路和层次提升一个层级。如果你真的学会了这些方法，在绝大多数情况下都会有举一反三的效果，可以说拿下offer如探囊取物一般简单！
v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？
源码中找答案compiler/codegen/index.js
```
<p v-for="item in items" v-if="condition">
```
做个测试如下
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue事件处理</title>
</head>
<body>
<div id="demo">
<h1>v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？</h1>
<!-- <p v-for="child in children" v-if="isFolder">{{child.title}}</p> -->
<template v-if="isFolder">
<p v-for="child in children">{{child.title}}</p>
</template>
</div>
<script src="../../dist/vue.js"></script>
<script>
// 创建实例
const app = new Vue({
el: '#demo',
data() {
return {
children: [
{title:'foo'},
{title:'bar'},
]
}
},
computed: {
isFolder() {
return this.children && this.children.length > 0
}
},
});
console.log(app.$options.render);
</script>
</body>
</html>
```
两者同级时，渲染函数如下：
```
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？")]),_v(" "),
_l((children),function(child){return (isFolder)?_c('p',[_v(_s(child.title))]):_e()})],2)}
})
```
> _l包含了isFolder的条件判断
两者不同级时，渲染函数如下
```
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？")]),_v(" "),
(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e()],2)}
})
```
> 先判断了条件再看是否执行_l
**结论：**
1. 显然v-for优先于v-if被解析（把你是怎么知道的告诉面试官）
2. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
3. 要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
4. 如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项
Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？
源码中找答案：src\core\instance\state.js - initData()
> 函数每次执行都会返回全新data对象实例
测试代码如下
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue事件处理</title>
</head>
<body>
<div id="demo">
<h1>vue组件data为什么必须是个函数? </h1>
<comp></comp>
<comp></comp>
</div>
<script src="../../dist/vue.js"></script>
<script>
Vue.component('comp', {
template:'<div @click="counter++">{{counter}}</div>',
data: {counter: 0}
})
// 创建实例
const app = new Vue({
el: '#demo',
});
</script>
</body>
</html>
```
<img src="assets/image-20200119155426142.png" alt="image-20200119155426142" style="zoom:67%;" />
> 程序甚至无法通过vue检测
**结论**
Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。
以上就是酷仔今日整理的“Web前端教程：Vue面试题如何做到深入浅出”一文，不知道大家有没有一些收获，希望为准备面试Web前端的同学提供参考。本文整理了两道Vue面试题，酷仔会持续更新剩余的部分。
相关推荐
- Linux两种光驱自动挂载的方法
-
环境：CentOS6.4西昆云服务器方式一修改fstab文件/etc/fstab是系统保存文件系统信息?静态文件，每一行描述一个文件系统；系统每次启动会读取此文件信息以确定需要挂载哪些文件系统。参...
- linux系统运维，挂载和分区概念太难?在虚机下操作一次全掌握
-
虚拟机的好处就是可以模拟和学习生产环境的一切操作，假如我们还不熟悉磁盘操作，那先在虚机环境下多操作几次。这次来练习下硬盘扩容操作。虚拟机环境：centos8vm11linux设备命名规则在linux中...
- Linux 挂载 NFS 外部存储 (mount 和 /etc/fstab)
-
mount:手工挂载，下次重启需再重新挂载，操作命令：mount-tnfs-ooptionsserver:/remote/export/local/directory上面命令中，本地目录...
- 在Linux中如何设置自动挂载特定文件系统(示例)
-
Linux...
- Linux环境中的绑定挂载(bind mount)
-
简介：Linux中的mount命令是一个特殊的指令，主要用于挂载文件目录。而绑定挂载（bindmount）命令更为特别。mount的bind选项将第一个目录克隆到第二个。一个目录中的改变将会在...
- Linux挂载CIFS共享 临时挂载 1. 首先
-
如何解决服务器存储空间不足的问题？大家好，欢迎回来。在上一期视频中，我为大家介绍了如何利用Linux挂载来扩容服务器存储空间。这一期视频，我将以Linux为例，教大家如何进行扩容。群辉使用的是Linu...
- Linux 硬盘挂载(服务器重启自动挂载)
-
1、先查看目前机器上有几块硬盘，及已挂载磁盘：fdisk-l能够查看到当前主机上已连接上的磁盘，以及已经分割的磁盘分区。（下面以/dev/vdb磁盘进行分区、挂载为例，挂载点设置为/data）df...
- linux 挂载磁盘
-
在Linux中挂载硬盘的步骤如下：...
- 笨小猪教您Linux磁盘挂载
-
本教程针对Linux系统比较熟悉或者想学习Linux基础的用户朋友，本教程操作起来比较傻瓜式，跟着步骤就会操作，本文使用的工具是XShell同时多多注意空格（文中会有提示）。【问答】什么是磁盘挂载？答...
- Linux 磁盘挂载和docker安装命令
-
本篇给大家介绍Linux磁盘挂载和docker安装的相关内容，Linux服务器的操作是一个手熟的过程，一些不常用的命令隔断时间就忘记了，熟话说好记性不如烂笔头，还需在平时的工作中多练习记录。...
- Linux设置开机自动挂载分区
-
有时候，我们在安装完Linux系统之后，可能在使用过程中添加硬盘或者分区进行使用，这时候就需要手动把磁盘分区挂载到某个路径，但是开机之后就会消失，需要重新挂载，非常麻烦，那么我们应该如何设置开机自动挂...
- 在linux挂载一个新硬盘的完整步骤
-
以下是在Linux中挂载新原始磁盘的完整步骤，包括分区、创建文件系统以及使用UUID在/etc/fstab中启动时挂载磁盘：将新的原始磁盘连接到Linux系统并打开电源。运行以下命令，...
- Linux系统如何挂载exFAT分区
-
简介：Linux系统中不能像Windows系统那样自动识别加载新设备，需要手动识别，手动加载。Linux中一切皆文件。文件通过一个很大的文件树来组织，文件树的根目录是：/，从根目开始录逐级展开。这些文...
- Linux系统挂载硬盘
-
fdisk-l查看可挂载的磁盘都有哪些df-h查看已经挂载的磁盘...
- WSL2发布，如何在Win10中挂载Linux文件系统
-
WSL2是最新版本的架构，它为Windows子系统提供支持，使其能够在Windows上运行ELF64Linux二进制文件。通过最近的更新，它允许使用Linux文件系统访问存储在硬盘中的文件。如果你...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- oracle忘记用户名密码 (59)
- oracle11gr2安装教程 (55)
- mybatis调用oracle存储过程 (67)
- oracle spool的用法 (57)
- oracle asm 磁盘管理 (67)
- 前端 设计模式 (64)
- 前端面试vue (56)
- linux格式化 (55)
- linux图形界面 (62)
- linux文件压缩 (75)
- Linux设置权限 (53)
- linux服务器配置 (62)
- mysql安装linux (71)
- linux启动命令 (59)
- 查看linux磁盘 (72)
- linux用户组 (74)
- linux多线程 (70)
- linux设备驱动 (53)
- linux自启动 (59)
- linux网络命令 (55)
- linux传文件 (60)
- linux打包文件 (58)
- linux查看数据库 (61)
- linux获取ip (64)
- 关闭防火墙linux (53)