Vue3学习：Vue3基础

1.创建Vue3工程

1.1 基于vue-cli创建

目前已处于维护模式，官网推荐基于Vite创建项目

1.2 基于vite创建

vite是新一代前端构建工具，具有如下特点：

• 1. 热重载
• 2. 对ts、jsx、css的支持
• 3. 按需编译，不需等待整个应用编译完成

具体操作如下：

命令行运行：

npm init vite@latest

然后按照提示操作即可！你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

2. vite-vue-ts项目结构

• .vscode
  • extensions.json：插件扩展提示
• public：脚手架根目录
• src：源文件
  • main.ts：引入css样式，引入根容器并将根组件挂载到根容器
  • App.vue：根组件
  • components：子组件文件夹
    • xx.vue：子组件
  • assets：静态文件
  • vite-env.d.ts：引入ts基础依赖
• .gitignore：git忽略文件
• index.html：入口文件
• package-lock.json：包管理文件
• pakage.json：包管理文件
• README.md：工程介绍文件
• tsconfig.json：ts配置文件
• vite.config.ts：vite工程的配置文件

3. Vue3核心语法：Composition API

Vue2的Options API数据、方法、计算属性分散，若想新增或修改一个需求，需要同时修改data、methods、computed等，不便于维护和复用。Vue3的Composition API可以用函数的方式，让相关功能的代码有序组织在一起。

3.1 setup

setup是Vue3中的新配置项，值是一个函数。setup函数中不可使用this关键字(undefined)。setup生命周期早于Vue2的beforeCreate。

setup基础用法：

<script>
export default{
    name: 'person',
    setup() {
        // ...数据、函数定义
        let name = 'landy'; // 非响应式数据
        let age = 18;

        const chageName = () => {
            name = 'landy2'; // 修改name但修改后无法显示
        }
        const addAge = () => {
            age += 1;
        }
        
        return {
            name,
            age,
            chageName,
            addAge
        }
    }
}
</script>

语法糖：<script setup> 默认返回<script>标签内声明的变量

<script lang="ts" setup>
// ...数据、函数定义
let name = 'landy'; // 非响应式数据
let age = 18;

const chageName = () => {
    name = 'landy2'; // 修改name但修改后无法显示
}
const addAge = () => {
    age += 1;
}
</script>

特殊情况：如何声明与组件文件名不同的导出组件名？

1. 安装插件

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

2. 在配置文件中引入插件

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

export default defineConfig({
  plugins: [VueSetupExtend()],
})

4. 响应式数据

4.1 ref：基本类型响应式数据

作用：定义响应式变量

语法：变量名 = ref(变量值)

返回值：一个RefImpl对象，简称ref对象或ref，ref对象的value值是响应式的

注意：

js中操作数据需要使用xxx.value以访问响应式数据，模板<template>标签中，不需要.value即可访问数据值

需要先引入ref函数：import { ref } from 'vue'

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

    const name = ref('name')
    const age = ref(18)
    const chageName = () => {
        name.value = 'landy2'; // 修改name但修改后无法显示
    }
    const addAge = () => {
        age.value += 1;
    }
</script>

4.2 reactive：对象类型响应式数据

引用类型的变量使用reactive()函数进行包裹，返回的是一个响应式对象，直接使用obj.attr便可访问和修改响应式对象的属性值。

作用：定义一个响应式对象

语法：xxx = reactive({})

返回值：Proxy实例

注意：reactive的响应式数据是深层次的

局限性：重新分配对象（变量引用新的变量或reactive对象）会失去响应式

解决方法：Object.assign(oldReactive, newObj)

const car = reactive({
    brand: 'Aito',
    price: 28.97
})
const addPrice = () => {
    car.price += 1;
}

4.3 ref定义对象类型响应式数据

使用ref包裹引用数据类型数据，返回的仍然是RefImpl实例，故仍需要通过xx.value.attr来访问对象的属性值。使用ref包裹引用数据类型数据，底层会通过reactive包装引用数据类型数据。RefImpl.value == Proxy

4.4 ref与reactive的使用场景

若需要一个基本类型的响应式数据 => ref

若需要一个响应式对象，层级不深 => ref / reactive

若需要一个响应式对象，且层级较深 => reactive

4.5 自动为ref对象值补充.value

打开vscode设置 -> 扩展 -> Vue -> Auto Insert: Dot Value 勾选

4.6 toRefs和toRef

toRefs可以包裹一个响应式对象(reactive)，在解构赋值时，将结构后的变量转化为响应式变量，结构后的响应式变量的值与原响应式对象指向同一引用值。

语法如下：

// 结构赋值
const {name,age,sex,address} = toRefs(person);

4.7 computed计算属性

作用：根据已有数据计算出新数据

与方法的区别：

1. 计算属性是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。

2. 计算属性是响应式的，而方法则不是响应式的，它们只会在被调用时执行。

3. 计算属性通常用于处理复杂的逻辑或操作，并且其结果需要被缓存以提高性能。方法则更常用于执行某些操作，如事件处理函数等，它们的结果通常不需要被缓存。

<template>
    <div class="person">
        <!-- v-bind：单向绑定 v-model：双向绑定 -->
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        全名：<span>{{ fullName }}</span>
        <button @click="setFullName">设置</button>
    </div>
</template>

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

const firstName = ref("");
const lastName = ref("");
// 计算属性：引用的变量发生变化，计算属性也随之变化，该计算属性是只读的
// 计算属性有缓存，方法没缓存
const fullName = computed(() => {
    return firstName.value + lastName.value;
})
// 计算属性——既读取又修改
const fullName2 = computed({
    get(){
        return firstName.value + lastName.value;
    },
    // set方法接收外部修改的值
    set(val:string){
        // 解构赋值，将值拆分为两个字符串
        const [str1,str2] = val.split(" ");
        // 将新值赋给计算属性中的变量，实现修改
        firstName.value = str1;
        lastName.value = str2;
    }
    
})
const setFullName = () => {
    // 调用计算属性中的set方法
    fullName2.value = "zhang san";
    console.log(fullName2.value);
}
</script>