你应该提前知道的

各类名词解释

预计阅读时间2 分钟 361 views

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的学习之旅吧。