系列文章目录
第二章 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 [email protected]
接着会出现一些配置的提示：
# 输入项目名称
? 请输入项目名称： 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。
标签：Vue,vue,setup,基础,reactive,API,ref From： https://blog.csdn.net/sishihao/article/details/141259360