各类名词解释
0 前言
为了让各位小伙伴不迷糊,我们首先会简单讲解一些关键名词。
不用了解这里的所有名词,只是简单给各位小伙伴解惑,后续想要了解,可以再回来看。
1 javascript
javascript得知道吧,咱们平常上网看到的网页,就是要靠它进行开发。
2 vue.js
vue.js是新一代的前端框架。
那vue.js跟javascript是什么关系?
vue.js是由javascript制作出来,
其实可简单理解为积木和成品的关系。
javascript是积木,提供了各种各样的积木,我们可以用这个积木搭建出扳手,搭建出房子,
而vue.js就是由javascript搭建出来的成品,可以让我们更快速的使用一些属性。
举个例,比如现在我们要建房子,是不是要砖块,那javascript就是砖块,通过javascript可以慢慢一步步搭建房子,
但是vue.js就是由javascript组件的房间,那我们直接用房间组合起来成房子是不是很快,比从一个个砖块搭建房子更快吧。
3 node.js
node.js是vue项目的服务器,
vue项目是要在服务器里面运行的,
而node.js提供了vue项目的运行环境,
这就是为什么要安装node.js的原因。
4 npm
vue开发过程中,要用到npm。
那npm是什么?
npm是用来管理javascript包的工具,
那javascript包是什么?
其实javascript包就是我们把一些javascript代码打包起来,形成一个包,可以方便以后调用。
而npm就是用来方便我们管理这些包的工具,协助我们管理、安装和卸载这些包。
提高我们的开发速度。
5 vue cli (vue脚手架)
vue脚手架是用来快速搭建vue项目的工具。
就想我们前面说的vuejs是毛坯房,而vue脚手架就是可以利用vue快速生成一整套vue项目的生产线。
这样我们就不用一个个给vuejs安装对应的javascript包去辛苦搭建了。
直接用vue脚手架就可以生成了。
5 虚拟DOM
Vue 3 中的虚拟 DOM是 Vue.js 中的一个重要概念,它是在实际 DOM之上的一个抽象层。虚拟 DOM 是对实际 DOM 的一种轻量级的 JavaScript 对象表示。
虚拟 DOM 的存在使得 Vue 在更新页面时可以更高效地进行比较和更新,减少了直接操作实际 DOM 的次数。Vue 3 中采用了更高效的 Diff 算法,与实际 DOM 比较前后的变化,最终只对发生变化的部分进行更新,从而提高了性能。
我们举个例子说明一下。
假设我们有一个列表,每点击一次按钮就往列表末尾添加一个新项。
原生JS怎么实现?示例如下,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Without Virtual DOM</title>
</head>
<body>
<ul id="app"></ul>
<button onclick="addItem()">Add Item</button>
<script>
let items = [];
function addItem() {
const list = document.getElementById('app');
const newItem = document.createElement('li');
newItem.textContent = 'Item ' + items.length;
list.appendChild(newItem);
items.push('Item ' + items.length);
}
</script>
</body>
</html>
而通过vue操作dom的方式,我们可以如下操作,
<template>
<div id="app">
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
<button @click="addItem">Add Item</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([]);
function addItem() {
items.value.push('Item ' + items.value.length);
}
</script>
在第一个示例中,我们使用原生 JavaScript 操作 DOM,在每次添加新项时,直接创建并追加了新的 DOM 元素到列表中。这种方式下,每次操作都会直接影响到实际的 DOM 结构,可能会触发重排和重绘,导致性能损耗较大,特别是当列表项较多时。
而在第二个示例中,使用了 Vue.js,它利用了虚拟 DOM。当数据发生变化时,Vue 内部会计算出新的虚拟 DOM 树,并与旧的虚拟 DOM 树进行比较,最终只对发生变化的部分进行更新。Vue 会在内部优化这些更新操作,最终只更新实际改变的部分,而不会直接操作整个 DOM 结构,从而提高了性能。
总的来说,使用虚拟 DOM 的方式能够更高效地进行页面更新,减少了不必要的 DOM 操作,提升了性能。同时,我们也能够更专注于业务逻辑的编写,而不需要手动管理复杂的 DOM 更新。
6 结语
好了,了解了这些基本概念,我们继续开始我们vue的学习之旅吧。