vue3的基本使用（1）

Vue3的基本使用（1）

初识vue3
- 1. vue3简介
- 2. 性能提升
- 3. 源码升级
Vue3的创建
- 1. vue-cli创建
- 2. vite创建
Composition API的区别（组合式）
setup函数
响应式数据
- 1. ref响应式
- 2. reactive响应式
toRefs与toRef简单介绍

初识vue3

1. vue3简介

vue是一款用于构建用户界面的 JavaScript框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
早在2020年9月18日，vue3发布3.0版本。代号one Piece。官方发布地址，vue2在2023年年底已经停止维护~
无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

2. 性能提升

打包体积减少41%
初次渲染快55%，更新渲染快133%
内存减少54%

3. 源码升级

使用Proxy代替defineProperty来实现响应式
重写虚拟DOM以及Tree-Shaking
最开心的是再也不用使用根标签了
可以更好支持TypeScript

Vue3的创建

项目工程可以分两种方式进行创建，一种是原始的使用vue-cli开发，另一种是官方推荐的基于vite创建项目。

1. vue-cli创建

首先先检查自己@vue/cli的版本，确保在4.5.0以上。没有的话请进行安装或升级~

vue --version # 版本检查

npm i -g @vue/cli # 安装升级

vue create [Your Project Name] # 创建项目

创建时需要选择vue版本，随后cd到相关目录下，执行npm run dev即可运行。

在这里插入图片描述

2. vite创建

相关介绍和创建请移步 👉 另一篇博客

Composition API的区别（组合式）

vue2的API设计是Options风格配置的；
vue3的API设计是Composition风格配置的；

Options API的弊端

它的属性、方法、数据是分散在data methods computed中的，若想要增加或者修改一个新功能，需要分别修改这些，维护和复用非常的麻烦。

setup函数

setup函数vue3的一个新配置项，值为一个函数，组件中的所有配置都在这个函数里边。

特点：

函数返回的对象中的内容可以直接在模板中使用。
在函数里边访问this是undefined。
会在创造之前调用，领先所有钩子函数。

<template>
    <div class="person">
        <h2>姓名: {{ name }}</h2>
        <h2>年龄: {{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>    
    </div>
</template>

<script lang="ts">
export default {
    setup() {
        let name = 'Samabc'
        let age = 19
        let tel = '18888885466'
        function changeName() {name = 'Samlyx'}
        function changeAge() {age = 20}
        function showTel() {alert(tel)}
        return { name, age, changeAge, changeName, showTel}
    }
}
</script>

此时的变量还不是响应式处理，点击按钮，页面并没有被响应式修改~

语法糖

每个 *.vue 文件最多可以包含一个 <script setup>

<script lang='ts'>
export default{name='person123'}
</script>
<script lang="ts" setup>
let name = 'Samabc'
let age = 19
let tel = '156168878676'
function changeName() {name = 'Samlyx'}
function changeAge() {age = 20}
function showTel() {alert(tel)}
</script>

你会发现为什么会有两个script标签，显得很繁琐，那么有没有解决办法呢？

当然！可以借助一个插件简化该操作。首先执行下面操作进行插件安装~

npm i vite-plugin-vue-setup-extend -D

其次在vite.config.ts文件里进行引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetup from 'vite-plugin-vue-setup-extend'

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

随后我们就可以将script标签修改简化啦~

<script lang="ts" setup name="person123">
let name = 'Samabc'
let age = 19
let tel = '18888844561'
function changeName() {name = 'Samlyx'}
function changeAge() {age = 20}
function showTel() {alert(tel)}
</script>

这样就将两个script整合到一起了~

响应式数据

有两种方式可以定义响应式

ref响应
reactive响应

1. ref响应式

主要涉及的是基本数据类型，同时也可以定义对象型数据。

使用时需要先引入ref组件，随后将需要响应式处理的数据用ref包裹。

<script lang="ts" setup name="person">
import { ref } from 'vue';

let name = ref('Samabc')
let age = ref(19)
console.log(name)
console.log(age)

function changeName() {
    name.value = 'Samlyx'
}
function changeAge() {
    age.value = 20
}
</script>

控制台打印结果如下，这时候我们打印我们的数据，会发现被ref包裹的数据将会变成一个RefImpl对象。而里边的value就是我们所展示的数据，所有我们如果需要修改这个数据，则需要通过调用变量的value属性进行修改才可以。

在这里插入图片描述

2. reactive响应式

与ref类似，只不过它只能针对对象类型。如果你需要重新分配一个对象，则会失去响应式，可以使用object.assign进行整体替换。

<script lang="ts" setup name="car">
import {reactive} from 'vue'

let car = reactive({brand:'奔驰',price:100})

function changePrice() {
    car.price += 10
}
</script>