2024年最新Vue基础知识点（一），Web前端高级面试题库

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

}

}

使用变量：

直接使用变量名

4. 组件中定义函数

语法：

export default {

name: ‘App’,

methods:{   //定义方法的位置

fn(){

return 3

}

}

}

文本：Message: {{ msg }}，双花括号中，可以存在语法，单行表达式

表达式：必须有返回值，有结果的才叫表达式

2.2 指令介绍

---

指令

指令：vue中定义好的一些以"v-"开头+具体的名称的属性，这些属性都有特定的功能。

指令用法：

  

 

注意：指令等号后是js执行环境，里面要写js表达式

指令分：自定义指令和内置指令

内置指令不需要引入，直接调用即可，每个内置指令都有自己的固定用法

自定义指令就是用户自己定义的

原始的HTML：

Using ****v-html**** directive:

2**.**3 条件渲染

---

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

语法：v-if/v-else-if/v-else

语法：

   

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。

Title

Paragraph 1

Paragraph 2

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样****：v-show****

Hello!

v-if / v-show********区别：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

2**.**4 列表渲染

---

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引

指令：v-for

语法：

用法1：遍历数组

{{item}}

{{item}}

用法2：遍历对象

[代码演示]

2.4.1 v-for 和v-if集合使用

循环列表   但列表内的数据是有前置条件的

2.4.2 Vue中key属性的作用 （考点）

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值

Vue中key属性的作用

• 在列表渲染时使用key属性

• 使用key属性强制替换元素

官方文档中说：

当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

key的作用主要是为了高效的更新虚拟DOM

原理便是其高效的Diff算法

当页面的数据发生变化时，Diff算法只会比较同一层级的节点

1.如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。

2.如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

【代码演示】

无key数据遍历 执行效果

有key数据遍历 执行效果

2**.**5 事件处理

---

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

2.5.1 定义事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

语法：

函数dosomething定义的位置：

要求定义mothds属

性中

2.5.2 事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

- 鼠标修饰符：

.stop

.prevent

.capture

.self

.once

.passive

- 键盘修饰符：

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

- 系统修饰符：

.ctrl

.alt

.shift

.meta

2.5.3内联处理器中的方法（事件传递参数）:****

传参问题：

1. 事件对象

1. 当定义的事件没有其他参数时，第一个参数默认就是事件对象

demo(e){e就是事件对象}

2. 当定义的事件有其他参数时，事件对象必须手动传入

demo(cs,e){}

2. 普通参数

定义函数时直接在函数上添加参数

- 简写：v-on 简写成 @

- this问题：this指向当前组件

 

methods: {

warn: function (message, event) {

// 现在我们可以访问原生事件对象

if (event) {

event.preventDefault()

}

alert(message)

}

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】