Vue3 初级教程：了解 Vue 的基本概念

前言

本系列教程写给从事前端开发刚刚入门的小伙伴，以及即将从事前端开发的朋友们，不会涉及很深的技术原理，以“会使用”为目的。

初次写作，文章可能让您不满意，请见谅。

如果出现有关技术知识方面的错误，希望您可以指出，让我与您共同进步！

我真诚的希望我的文章能够帮到您。

Vue3 快速入门系列教程

正文

Vue 是一款用于构建用户界面的 JavaScript 框架。它是渐进式框架，基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

以上定义有3个地方需要留意：

渐进式框架：是指 Vue 具有很好的包容性，当你正在开发一个项目时，并非只能使用 Vue 这一项技术，你可以将你熟悉的技术集成到项目中。

声明式：就像我们在 HTML 中用 button 声明一个按钮一样，Vue 同样提供了一套类似 HTML 模板语法，它拓展了标准的 HTML 模板声明方式，使得我们可以使用“声明式”地方式描述最终输出的 HTML 和 JavaScript 状态之间的关系。这是 Vue 的一个核心功能。例如以下代码，很好的描述了该按钮“自增”意图的 JS 逻辑以及触发方式：

<button @click="count++">  {{ count }}</button>

组件化编程模型：Vue 将一个功能或页面的 HTML、CSS 和 JavaScript 代码合并到一起，这被成为组件，可以被其他组件或页面引入而重复利用。通常每个“.vue”文件作为一个组件，组件可以简单到由一个按钮组成，也可以复杂到由一组功能或页面组成。

我们工作中都是以“单文件组件”形式进行编码，本系列教程的代码示例也是采用这种方式。例如一个简单的“点赞组件”结构：

<template><div class="good"><!-- 模板中的响应式变量不需要 .value --><span class="nums">获赞：{{goodNums}}</span><span>获赞 - 非响应式：{{testNums}}</span><span>    <button @click="goodNumsAdd">点赞</button>    <button @click="goodNums++">点赞的另一种触发方式</button>    <button @click="testNumsAdd">点赞 - 非响应式</button></span></div></template><script setup>import { ref } from 'vue'const goodNums = ref(0)const goodNumsAdd = () => {    // 注意响应式变量在 JS 中要用 .value     goodNums.value++}let testNums = 0;const testNumsAdd = () => {    testNums++    console.log('我触发了，值：' + testNums)}</script><style scoped>.nums {    color: red;}</style>

运行结果

以上代码是 Vue 的一种书写方式，也是推荐的一种方式，有几点需要留意：

组件：一个组件由 template、script、style 标签组成。

<template>模板（视图）</template><script setup>  // setup 属性开启组合式 API</script><style scoped>  /* scoped 属性指的是样式为该组件独享 */</style>

组合式 API：<script setup> 是组合式 API 的使用方式，在开发中主要使用这种方式，本系列教程的代码示例也将采用这种方式。

<script setup>  // setup 属性开启组合式 API</script>

所谓组合式 API，可以简单理解成“把要实现的一个功能中用到的变量和函数放在一起”，这样的设计优势主要体现在代码的逻辑清晰、利于集中管理，例如下面代码中的“goodNums”和“testNums”。

<script setup>import { ref } from 'vue'// goodNums 响应式变量和处理方法放到一起const goodNums = ref(0)const goodNumsAdd = () => {    // JS 中的响应式变量需要 .value    goodNums.value++}// testNums 变量和处理方法放在一起let testNums = 0; // 我也可以在模板中直接使用const testNumsAdd = () => {    testNums++    console.log('我触发了，值：' + testNums)}// more...// 如果有很多的功能，组合式 API 对代码的集中管理是很有优势的</script>

组合式 API 还有一个特点：模板中可以直接使用 <script> 标签中声明的顶级变量和函数（指的是非函数中定义的变量和函数）。

JS 代码中使用响应式变量要用 .value，模板中不需要加 .value。

<template>  <!-- 模板中直接使用响应式变量，但不需要 .value -->  {{ goodNums }}  <!-- 模板中直接使用非响应式变量 -->  {{testNums}}  <!-- 模板中直接使用 goodNumsAdd 方法 -->  <button @click="goodNumsAdd">点赞</button></template>

如需“声明式”API 风格，请参阅 Vue 官方文档。

样式：<style scoped> 中的 scoped 代表 style 中的样式只针对该组件有效，这就意味着上面代码中的 class .nums 在别的组件中也被定义了，则它们的样式也不会互相干扰；

注意观察上面代码中的前两个按钮和第三个按钮的区别，前两个按钮点击后，模板中的“获赞”数字会出现变化，而且还是自增显示，这就是 Vue 的另一个核心功能“响应式”，Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM，也可以简单的理解成：“数据发生了变化，页面就也跟着发生了变化，而无需手动刷新页面”。

const goodNums = ref(0) // 响应式，我变了，页面包含我的地方就会变了let testNums = 0 // 不是响应式的，我变了，页面也不会改变

相反，第三个按钮点击后，即使是变量值发生变化，模板也不会更新，所以看不到“即时”的显示效果，因为它不是响应式的变量。

随后再点击前两个按钮中的任意一个，由于触发了视图更新，所以“获赞-非响应式”的值从最初的值立刻更新成最新值，且无自增显示效果，之前点击了几次“第三”个按钮，值就是几（多点击几次按钮观察结果）。

把一个变量变成响应式的，暂时记住“把它的初始值放到 ref() 函数的参数中”即可。