vue3入门知识（一）

vue3简介

性能的提升

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

源码的升级

使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking

新的特性

1. Composition API（组合API）

setup
ref与reactive
computed与watch

2. 新的内置组件

Fragment
Teleport
Suspense

3. 其他改变

新的生命周期钩子
data选项应始终被声明为一个函数
移除keyCode支持作为v-on的修饰符

创建vue3项目

基于vue-cli创建（基于webpack）

// 安装或升级@vue.cli
npm install -g @vue/cli

// 执行创建命令
vue create project_name

基于vite创建

vite是新一代前端构建工具，官网地址：Vite中文网

vite的优势：

轻量快速的热重载（HMR），能实现极速的服务启动
对TypeScript、JSX、CSS等支持开箱即用
真正的按需编译，不再等待整个应用编译完成
webpack构建与vite构建对比图如下：

webpack构建：

vite构建：

创建项目的命令

npm create vue@latest

Tips：

确保 Node.js 版本支持 Vue 3：推荐使用 Node.js 14 及以上版本

尝试使用node版本 14.21.3，创建项目时有报错，升级node版本为 16.20.2 之后就可以了

创建项目时的一些配置项设置，仅供参考

安装好的项目文件目录：

这个文件里面有报错，执行一下 npm install 就好了

并且这个文件里面的内容不能删除，他的作用是告诉 TypeScript 引入 Vite 的类型定义

可能还会有上图中这样的报错提示，在确保已经执行npm install之后，重新打开编辑器，报错提示就会消失了

选项式API的弊端

vue2（选项式API）数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改data、methods、computed，不便于维护和复用

组合式API的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码有序的组织在一起

setup

setup中的this是undefined，vue3中已经弱化this了

setup的执行顺序在beforeCreate之前

setup的返回值可以是一个渲染函数，返回内容直接渲染在页面上

return () => '直接在页面上展示的内容'

<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 {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Person',
    setup() {
        // 这样写的name age tel不是响应式的 vue2中是写在data中的
        let name = '张三';
        let age = 18;
        const tel = '13800138000';

        function changeName() {
            name = '李四'; // 这样修改之后页面不会更新 值确实改了但不是响应式的 因此页面未更新
        };

        function changeAge() {
            age += 1;
        };

        function showTel() {
            alert(tel);
        };

        // 将数据、方法交出去，模板中才可以使用
        return {
            name,
            age,
            tel,
            changeName,
            changeAge,
            showTel,
        };
    },
};
</script>

<style scoped>
.person {
    button {
        display: block;
        margin: 10px 0;
    }
}
</style>

data、methods可以和setup同时存在

data中可以读取setup中的数据，通过this.xxx来获取，但是setup中是无法读取data中的数据的，因为setup是在data之前执行的

setup语法糖

<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 {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Person',
};
</script>

<script setup lang="ts">
// 这样写的name age tel不是响应式的 vue2中是写在data中的
let name = '张三';
let age = 18;
const tel = '13800138000';

function changeName() {
    name = '李四'; // 这样修改之后页面不会更新 值确实改了但不是响应式的 因此页面未更新
};
function changeAge() {
    age += 1;
};
function showTel() {
    alert(tel);
};
</script>

<style scoped>
.person {
    button {
        display: block;
        margin: 10px 0;
    }
}
</style>

由于这样需要写两块script标签，第一块的主要作用是自定义组件名称，可以借助插件，省略第一块script标签

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

安装之后在 vite.config.ts 中进行引入配置

<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 setup lang="ts" name="Person"> 
// 这样写的name age tel不是响应式的 vue2中是写在data中的
let name = '张三';
let age = 18;
const tel = '13800138000';

function changeName() {
    name = '李四'; // 这样修改之后页面不会更新 值确实改了但不是响应式的 因此页面未更新
};
function changeAge() {
    age += 1;
};
function showTel() {
    alert(tel);
};
</script>

<style scoped>
.person {
    button {
        display: block;
        margin: 10px 0;
    }
}
</style>

ref

用于（可以）定义基本类型的响应式数据，也可以定义对象类型的响应式数据，想让哪个数据是响应式的就用ref包一下，在js代码中使用响应式数据需要用 .value 在模板中不需要

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

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

let name = ref('张三');
let age = ref(18);
const tel = '13800138000';
const address = '北京';

function changeName() {
    name.value = '李四';
};
function changeAge() {
    age.value += 1;
};
function showTel() {
    alert(tel);
};
</script>

<style scoped>
.person {
    button {
        display: block;
        margin: 10px 0;
    }
}
</style>

定义对象类型的响应式数据，表面使用的是ref，其实底层用的还是reactive

<template>
    <div class="person">
        <h2>汽车信息: 一辆{{ car.brand }}车，价值{{ car.price }}</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <br>
        <h2>游戏列表: </h2>
        <ul>
            <li v-for="game in games" :key="game.id">
                {{ game.name }}
            </li>
        </ul>
        <button @click="changeFirstGameName">修改第一个游戏的名字</button>
    </div>
</template>

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

let car = ref({
    brand: 'BMW',
    price: 100,
});
let games = ref([
    { name: 'LOL', id: 1 },
    { name: 'CSGO', id: 2 },
    { name: 'DOTA', id: 3 },
]);

function changePrice() {
    car.value.price += 10;
};
function changeFirstGameName() {
    games.value[0].name = '王者荣耀';
};
</script>

reactive

用于（只能）定义对象类型的响应式数据

<template>
    <div class="person">
        <h2>汽车信息: 一辆{{ car.brand }}车，价值{{ car.price }}</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <br>
        <h2>游戏列表: </h2>
        <ul>
            <li v-for="game in games" :key="game.id">
                {{ game.name }}
            </li>
        </ul>
        <button @click="changeFirstGameName">修改第一个游戏的名字</button>
        <br>
        <h2>{{ obj.a.b.c }}</h2>
        <button @click="changeObj">修改obj</button>
    </div>
</template>

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

let car = reactive({
    brand: 'BMW',
    price: 100,
});
let games = reactive([
    { name: 'LOL', id: 1 },
    { name: 'CSGO', id: 2 },
    { name: 'DOTA', id: 3 },
]);
let obj = reactive({
    a: {
        b: {
            c: 666,
        }
    }
})

function changePrice() {
    car.price += 10;
};
function changeFirstGameName() {
    games[0].name = '王者荣耀';
};
function changeObj() {
    // reactive的响应式是深层次的
    obj.a.b.c = 1000;
};
</script>

ref与reactive

1. ref用来定义：基本类型数据、对象类型数据

2. reactive用来定义：对象类型数据

区别：

1. ref创建的变量必须使用 .value （可以使用volar插件自动添加 .value）

2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）

<template>
    <div class="person">
        <h2>汽车信息: 一辆{{ car.brand }}车，价值{{ car.price }}</h2>
        <button @click="changeCar">修改汽车</button>
    </div>
</template>

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

let car = reactive({
    brand: 'BMW',
    price: 100,
});

function changeCar() {
    // 这样会失去响应式
    // car = {
    //     brand: '奔驰',
    //     price: 200,
    // };
    
    // 这样不会失去响应式
    Object.assign(car, {
        brand: '奔驰',
        price: 200,
    });
};
</script>

使用原则：

1. 若需要一个基本类型的响应式数据，必须使用ref

2. 若需要一个响应式对象，层级不深，ref、reactive都可以

3. 若需要一个响应式对象，且层级较深，推荐使用reactive

toRefs

把一个响应式对象中的内容拿出来，依然具备响应式的能力

<template>
    <div class="person">
        <h2>{{ person.name }}</h2>
        <h2>{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script setup lang="ts" name="Person"> 
import { reactive, toRefs } from 'vue';

const person = reactive({
    name: '张三',
    age: 18,
});

// 直接从响应式对象中解构出来的变量都不是响应式的 需要toRefs包裹才会变成响应式的
let { name, age } = toRefs(person);

function changeName() {
    // 这里修改之后 name、person.name 都会改变
    name.value += '~';
};
function changeAge() {
    age.value += 1;
};
</script>

<style scoped>
.person {
    button {
        margin: 10px;
    }
}
</style>

toRef

作用和toRefs一样，但每次只能取一个

<template>
    <div class="person">
        <h2>{{ person.name }}</h2>
        <h2>{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
    </div>
</template>

<script setup lang="ts" name="Person"> 
import { reactive, toRef } from 'vue';

const person = reactive({
    name: '张三',
    age: 18,
});

let name = toRef(person, 'name');

function changeName() {
    // 这里修改之后 name、person.name 都会改变
    name.value += '~';
};
</script>