【Vue】Vue基础

系列文章目录

第二章 Vue基础（1）

---

---

第一节：Vue介绍

一、Vue介绍

Vue(读音/vjuː/，类似于view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！Vue目前是3版本了。
Vue官网：https://cn.vuejs.org/
Vue Github：https://github.com/vuejs

二、Vue项目创建

创建Vue项目目前有两种方式，一种是使用VueCli，另一种是使用Vite，其中VueCli已经处于维护模式了，过不了多久便不再支持，因此我们学习Vite的方式创建。
使用Vite 创建项目有以下优点：
采用热重载功能，能快速的启动服务。
对TypeScript、JSX等支持开箱即用。
按需编译，不用等待整个应用编译完成。
使用Vite 创建项目过程如下：

$ npm create vue@latest
或
$ npm create vue@3.10.3

接着会出现一些配置的提示：

# 输入项目名称
? 请输入项目名称： startvue

# 是否添加TypeScript支持
? 是否使用 TypeScript 语法？  否

# 是否添加JSX支持
? 是否启用 JSX 支持？ 否

# 是否添加VueRouter
? 是否引入 Vue Router 进行单页面应用开发？  否

# 是否添加pinia
? 是否引入 Pinia 用于状态管理？  否

# 是否添加单元测试
? 是否引入 Vitest 用于单元测试？  否

# 是否添加端到端测试方案
? 是否要引入一款端到端（End to End）测试工具？  不需要

# 是否添加ESLint语法检查
? 是否引入 ESLint 用于代码质量检测？  是

# 是否添加Prettiert代码格式化
? 是否引入 Prettier 用于代码格式化？ 否

# 是否引入Vue DevTools7调试
? 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) 是

创建完项目后，在项目根路径下输入命令：

$ cd startvue
$ npm install
$ npm run dev

即可启动项目运行。

三、项目结构介绍

node_modules：存放项目依赖的第三方包
public：一些公共的文件
src：项目的源代码，图片资源等
–assets：图片、字体等静态资源
–components：自定义组件
App.vue：项目的主入口vue文件
main.js：项目的主入口ts文件
index.html：项目的html文件
package.json：项目依赖包文件
vite.config.js：vite项目配置文件

---

第二节：组合式API

一、基本介绍

在Vue2中，使用的是Options API （选项式API）。而Vue3中虽然也兼容Options API ，但是更推荐Composition API （组合）。那什么是Options API，什么是Composition API 呢？先来看以下例子：
以上便是Options API ，如果改成Composition API ，那么要借助setup 语法。

二、setup介绍

setup 是Vue3 的配置项，它是一个函数，之前使用Options API 方式定义的数据、方法、计算属性、监听等数据，都是配置在setup 中。以下示例：

<script>
  import { ref, onMounted } from 'vue'

  export default {
    name: 'App',
    setup() {
      // 响应式状态
      // 响应式状态
      const count = ref(0)

      // 用来修改状态、触发更新的函数
      function increment() {
        count.value++
      }

      // 生命周期钩子
      onMounted(() => {
        console.log(`The initial count is ${count.value}.`)
      })

      return {
        count,
        increment
      }
    }
  }
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

在setup 中返回的对象，不管是数据还是方法，都可以直接在模板中使用。而为了实现方便，可以使用setup语法糖，即<script setup>，这样就无须显示写setup 函数，写在script 中的所有数据和方法都可以直接在模板中使用。

<script setup>
  import { ref, onMounted } from 'vue'

  // 响应式状态
  // 响应式状态
  const count = ref(0)

  // 用来修改状态、触发更新的函数
  function increment() {
    count.value++
  }

  // 生命周期钩子
  onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
  })
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

三、setup上指定组件名称

上述代码无法指定组件名称，如果想要指定组件名称，还需要额外添加一个script 标签：

<script>
  export default {
    name: 'App',
  }
</script>

为了解决这个问题，可以使用vite-plugin-vue-setup-extend 插件来简化。步骤如下：
安装：npm install vite-plugin-vue-setup-extend --save-dev
配置：在vite.config.js中配置如下

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ],
})

在script标签上指定name属性：<script setup name="App">
Composition API 中新增了许多新的语法，我们后面再慢慢介绍。
关于Options API 和Composition API 谁更好的问题，这个仁者见仁智者见智，但是有一点需要注意，这个市场（招聘市场和开发市场）都在往Composition API 上转（可见ElementPlus的文档），我们作为开发者，也必须要学会Composition API 的使用。

---

第三节：响应式变量

使用组合式API的方式定义响应式变量，必须通过ref 或reactive 函数来实现。

一、使用ref函数定义响应式变量

语法为：let xxx = ref(初始值) 。使用如下：
使用ref函数定义的响应式变量，有两点需要注意：
在模板中可直接使用变量。
在script标签中，若要操作变量，则需要通过username.value来实现。

二、使用reactive函数定义响应式变量

定义一些复合型响应式变量，则应该使用reactive 函数来实现。基本语法为：let xxx = reactive(源对象) 。使用如下：

<script setup name="App">
  import { reactive } from 'vue'

  let author = reactive({username: "张三", age: 18})

  let books = reactive([
    {name: '水浒传',author: '施耐庵'},
    {name: '三国演义',author: '罗贯中'}
  ])

  const onModifyBookName = () => {
    books[0].name = '红楼梦'
  }

  const onUpdateUsername = () => {
    author.username = "李四"
  }

</script>

<template>
  <h1>用户名为：{{author.username}}</h1>
  <button @click="onUpdateUsername">修改用户名</button>
  <table>
    <thead>
      <tr>
        <th>书名</th>
        <th>作者</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="book in books" :key="book.name">
        <td>{{ book.name }}</td>
        <td>{{ book.author }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="onModifyBookName">修改书名</button>
</template>

reactive 函数适合使用那些深层次的响应式变量。如果需要重新给reactive 函数定义的响应式变量赋值，那么需要通过Object.assign 来实现，否则将会失去响应式的功能：

Object.assign(books, [{name: '红楼梦',author: '曹雪芹'}])

三、ref和reactive对比

如果要定义一个基本数据类型的响应式变量，则必须使用ref。
如果要定义一个层级不深的复合类型的响应式变量，则ref和reactive都可以。
如果要定义一个层级很深的复合类型的响应式变量，则推荐使用reactive。

---