【Vue3】使用vite创建Vue3工程、Vue3基本语法讲解

一、什么是Vite

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

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

 二、搭建第一个vite项目

兼容性注意

        Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

1、项目构建

npm命令：

        npm create vite@latest

yarn命令：

        yarn create vite

2、项目层级展示

说明：

• vite项目中，index.html是项目的入口文件，在最外层目录；
• 加载index.html文件后，vite解析<script type="module" src="/src/main.ts"></script>指向的JavaScript文件；
• Vue3中是通过createApp(App).mount('#app')创建实例的。

3、Vue3代码初体验

        下面是一段最基础的Vue3的代代码片段

<template><div class="person"><!-- 内容可以放在这里 --><div>姓名：{{ name }}</div><div>年龄：{{ age }}</div><div>电话：{{ tel }}</div><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts">
export default {name: 'person',setup() {let name = '张三'let age = '148'let tel = '1522321555'return { name, age, tel }}// data(){//   return{//     name:'张三',//     age:'148',//     tel:'1522321555'//   }// },// methods: {//   showTel() {//     alert(this.tel)//   }// },
}
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;/* 注意是 border-radius 不是 borde-radius */padding: 20px;
}
</style>

        注意：1、在Vue3中是可以直接使用Vue2的语法的，但是不推荐，最好不要在Vue3中写Vue2代码，维护起来很困难。

三、Vue3语法

1、Vue3的setup语法糖

        在基础Vue3语法中，我们可以看到，我们只要定义一个变量，就需要在setup中return出来，这样就很麻烦了，因此，Vue3贴心地为我们提供了一个小插件，叫做“语法糖”，用起来是相当方便的，下面介绍如何在我们的项目中集成Vue3的语法糖插件

        在Vue3中支持<script lang='ts' setup name='test'></script>中name的这种写法需要安装插件：

1. 下载依赖：npm i vite-plugin-vue-setup-extend -D
2. 引入插件：在vite.config.ts文件中引入 import VueSetupExtend from 'vite-plugin-vue-setup-extend'
3. 函数调用：在vite.config.ts文件中的defineConfig函数中调用：VueSetupExtend()

        在引入Vue3的语法糖之后我们就出现了一种新的写法：

<script lang="ts" setup name="test">let name = "张三";let age = 148;let tel = "1522321555";
</script>

2、Vue3使用ref创建基本数据的响应式数据

        写在前面：ref能且只能用来定义基本数据类型

        在Vue3中，如果只按照上面的写法去定义数据，实际上数据只是静态的，那么如果我们想要响应式的数据该怎么办呢？

        在Vue3中，提供了ref函数来支持数据的响应式，如下：

import { ref } from "vue";let name = ref("三");let age = ref(148);console.log('name', name)
</script>

        ref将数据变成响应式之后，你打印出来就会发现，此时我们的数据就被ref包装成了一个RefImpl对象，如下：

        那么，使用ref包装响应式数据之后，我们在使用这个数据的时候就需要使用Object.vaule来拿到这个响应式数据了 ，如果使用的任然式原来的值，数据任然不是响应式的，我们正确地调用响应式数据就变成了这样：

<template><div class="person"><!-- 内容可以放在这里 --><div>姓名：{{ name }}</div><div>年龄：{{ age }}</div><div>电话：{{ tel }}</div><button @click="showTel">查看联系方式</button><button @click="changeNameme">修改名字</button><button @click="changeAge">修改年龄</button></div>
</template><script lang="ts" setup name="test">
import { ref } from "vue";let name = ref("三");let age = ref(148);let tel = "1522321555";console.log('name', name)function changeNameme() {name.value = ('zhang -san')console.log('name', name.value )}function changeAge() {age.value  += 1console.log('age', age.value )}
</script>
<style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;/* 注意是 border-radius 不是 borde-radius */padding: 20px;
}
</style>

3、Vue3使用reactive定义复杂数据类型（对象类型数据）

        写在前面：reactive能且只能用来定义对象数据类型

<template><div class="person"><h2>汽车信息：一辆{{  car.brand}}车，价值{{ car.price }}元</h2><button @click="changePrice">修改汽车价格</button><br><h2>游戏列表</h2><ul ><li v-for="item in games" :key="item.id">{{  item.name}}</li></ul><button @click="changeFirstGame">修改第一个游戏的名字</button></div>
</template><script lang="ts" setup name="test">
// 引入
import { reactive,ref } from "vue";
// 数据// 注意：
// 1、reactive只能定义复杂数据类型的响应式数据
// 2、ref不仅可以定义基本数据类型，也可以定义对象类型的响应式数据
// 3、ref定义的数据需要用.value才能拿到他的数据
// 4、ref为什么可以定义复杂数据类型呢？
//     使用ref包裹的对象类型数据通过obj.value拿到的数据也是一个Proxy对象即：ref(obj).value = reactive(obj)
let car = reactive({ brand: "奔驰", price: 100 })
let games = reactive([{id:'abcde1',name:'原神'},{id:'abcde2',name:'王者荣耀'},{id:'abcde3',name:'逆水寒'}])
console.log('car', car)// 方法
function changePrice() {car.price += 10;
}
function changeFirstGame() {games[0].name='三国志'
}
</script>
<style scoped>
</style>

4、Vue3使用ref和reactive对比

注意：
 1、reactive只能定义复杂数据类型的响应式数据
 2、ref不仅可以定义基本数据类型，也可以定义对象类型的响应式数据
 3、ref定义的数据需要用.value才能拿到他的数据
 4、ref为什么可以定义复杂数据类型呢？
     使用ref包裹的对象类型数据通过obj.value拿到的数据也是一个Proxy对象即ref(obj).value = reactive(obj)

如何使用ref和reactive呢？

【宏观角度】

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

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

• 区别

1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）
   • 配置volar
     • 应用商店下载TypeScript Vue Plugin (Volar) —》“管理”—》“设置”—》“扩展”—》“volar”—》“Auto Insert: Dot Value”勾选

• reactive的局限性

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

let car = reactive({ brand: "奔驰", price: 100 });function changeCar() {
//这样 reactive就会失去响应式car = { brand: "雅迪", price: 10 };
//给reactive重新赋值需要这样写：Object.assign(car,{ brand: "雅迪", price: 10 })
}

使用ref定义对象类型数据则不会出现这种情况

let car = ref({ brand: "奔驰", price: 100 });function changeCar() {car.value = { brand: "雅迪", price: 10 };
}

【使用原则】

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

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

3、若需要一个响应式对象，且层级较深，推荐使用reactive（表单数据）。

5、Vue3使用torefs和toref对比

        相同点：torefs和toref都是将一个响应式对象种的东西解构出来，而同时让解构出来的数据具备响应式的能力。

        不同点：torefs能够结构整个对象torefs(Object)，而toref只能解构一个属性toref(Object,'name')

6、Vue3的计算属性—computed

        （1）只要计算属性所依赖的数据发生了变化，他就会重新计算（计算属性是有缓存的）

        （2）要想改变计算属性的值，需要用get()和set()

<template><div class="person">姓：<input type="text" v-model="firstName"><br>名：<input type="text"  v-model="lastName"><br>全名：<span>{{fullName}}</span><button @click="changeFullName">改变名字</button></div>
</template><script lang="ts" setup name="test">
// 引入
import { ref, computed } from "vue";
let firstName = ref("张");
let lastName = ref("三");
console.log("firstName", firstName.value);// 计算属性：只要计算属性所依赖的数据发生了变化，他就会重新计算（计算属性是有缓存的）
// 注意：这样定义的计算属性，只能读不能改
// let fullName = computed(() => {
//   return (
//     firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value
//   );
// });// 注意：这样定义的计算属性，可读可写
let fullName = computed({get() {return (firstName.value.slice(0, 1).toUpperCase() +firstName.value.slice(1) +lastName.value);},set(val) {const [str1, str2] = val.split("-");firstName.value = str1;lastName.value = str2;console.log("set");console.log("val", val);},
});function changeFullName() {fullName.value = "李-四";
}
</script>
<style scoped>
</style>

7、Vue3的监听属性—watch

• 作用：监视数据的变化（和Vue2中的watch作用一致）
• 特点：Vue3中的watch只能监视一下四种数据：

1、 ref定义的数据

2、reactive定义的数据

3、函数返回一个值（getter函数），通俗来讲就是一个带返回值的函数

4、一个包含上述内容的数组

在Vue3中使用watch的时候，通常会遇到以下几种情况：

情况一：监听ref定义的【基本类型】数据

        监听ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变

① 先引入watch

② 监听【ref】定义的【基本类型】数据

③ 解除监视

注意：监听ref定义的基本类型数据的时候，不需要.value

<template><div><h1>1、监听ref定义的【基本类型】数据</h1><h2>当前求和为：{{ sum }}</h2><button @click="handleClick">点我sum+1</button></div>
</template><script setup lang="ts">
// 1、先引入watch
import { ref,watch } from "vue";
// 定义数据
let sum = ref(0)
// 方法
function handleClick() {sum.value+=1 
}
// 2、监听【ref】定义的【基本类型】数据
// watch('鉴定对象'，监听函数)
const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)if(newValue>10){
//3、停止监听stopWatch()}
})
</script>

情况二：监听ref定义的【对象类型】数据

        监听ref定义的【对象类型】数据：直接写数据名，监听的是对象的【地址值】，若想监听对象内部的数据，要手动开启深度监视

面试题：

1、watch的参数？        

• 第一个参数是【被监视的数据】
• 第二个参数是【监视的回调】
• 第三个参数是【配置对象（deep,immediate....）】

2、watch监听的数据，什么时候newValue和oldValue是一样的？

• 若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为他们是同一个对象；
• 若修改的是整个ref的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。

 情况三：监听reactive定义的【对象类型】数据

        监听【reactive】定义的【对象类型】数据时，watch默认开启深度监听，这种深度监听是无法关闭的（隐式创建深度监听）

<template><div><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="handleName">修改名字</button><button @click="handleAge">修改年龄</button><button @click="changePerson">修改个人</button></div>
</template><script setup lang="ts" name="action3">
import { reactive, watch } from "vue";let person = reactive({name: "张三",age: 20,
});function handleName(params: any) {console.log("params", params);person.name += "~";
}
// 修改年龄
function handleAge(params: any) {console.log("params", params);person.age += 1;
}
// 修改个人
function changePerson(params: any) {console.log("params", params);Object.assign(person, { name: "李四", age: 30 });
}// 监听【reactive】定义的【对象类型】数据
// 1、watch默认开启深度监听，这种深度监听是没法关闭的（隐式创建深度监听）watch(person, (newValue, oldValue) => {console.log("person变化了", newValue, oldValue);
});
</script>

知识点：
   ref定义的对象类型数据修改 =》 person.value = {name:'李四',age:60}
   reactive定义的对象类型数据修改 =》 Object.assign(person,{name:'李四',age:30})

1. 这样修改reactive定义的数据，是没有办法改变他的值的，在Vue3中如果要改变reactive定义的对象类型数据，必须用Object.assign
2. 但是，用ref定义的对象类型数据却可以直接person.value = {name:'李四',age:60} 进行修改

本质上：ref修改数据，是将数据重新赋值；reactive修改数据，是将原数据改变
原因：官方文档指出，reactive定义的对象类型数据不可直接修改

情况四：监听ref或reactive定义的【对象类型】数组中的某个属性

        1、若该属性不是【对象类型】，需要写成函数形式；

        2、若该属性值依然是【对象类型】，可直接编辑，也可以写成函数，不过建议写成函数

        总的来说：监视的要是对象里的属性，那么最好写成一个getter函数式，注意点：若是对象监视的地址值，需要关注对象内部，需要手动开启深度监听 。

<template><div class="person"><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改车</button></div>
</template>
<script setup lang="ts" name="action3">
import { reactive, watch } from "vue";// 数据
let person = reactive({name: '张三',age: 20,car: {c1: '奔驰',c2: '拖拉机'}
})
// 方法
function changeName(params: type) {person.name += '~'
}
function changeAge(params: type) {person.age += 1
}
function changeC1(params: type) {person.car.c1 = '奥迪'
}
function changeC2(params: type) {person.car.c2 = '拖油塔'
}
function changeCar(params: type) {person.car = {c1: '雅迪',c2: '爱玛'}
}// 只监视某个基本类型数据（要将其组装成一个带返回值的函数）
// ★若监听的属性不是【对象类型】，需要写成函数形式；
// 完整写法：
watch(() => { return person.name }, (newValue, oldValue) => {console.log('person.name变化了！', newValue, oldValue)
})
// 简写：
watch(() => person.name, (newValue, oldValue) => {console.log('person.name变化了!', newValue, oldValue)
})
/*******************************************************/
// 只监听某个对象类型数据
// ★若该属性值依然是【对象类型】，可直接编辑，也可以写成函数，不过建议写成函数
//情况一： 只能监听到对象中每一个属性的变化情况，无法监听整个对象的变化情况
watch(person.car,(newValue, oldValue)=>{console.log('person.car变化了!', newValue, oldValue)
})
// 情况二：只能监听整个对象的变化，其中的属性发生变化的时候，无法监听到
watch(()=>person.car,(newValue, oldValue)=>{console.log('person.car变化了!', newValue, oldValue)
})
// 情况三：（完美方案）既能监听每一个属性的变化，也能监听到整个对象的变化
watch(()=>person.car,(newValue, oldValue)=>{console.log('person.car变化了!', newValue, oldValue)
},{deep:true})
</script>

情况五：监听上述的多个数据

1、使用watch监听多个数据

<template><div class="person"><h2>姓名：{{ person.name }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeC1">修改第一台车</button><button @click="changeCar">修改车</button></div>
</template>
<script setup lang="ts" name="action5">
import { reactive, watch } from "vue";// 数据
let person = reactive({name: '张三',age: 20,car: {c1: '奔驰',c2: '拖拉机'}
})
// 方法
function changeName(params: type) {person.name += '~'
}
function changeC1(params: type) {person.car.c1 = '奥迪'
}
function changeCar(params: type) {person.car = {c1: '雅迪',c2: '爱玛'}
}
// 监听上述多个数据的变化
watch([()=>person.name,()=>person.car,],(newValue,oldValue)=>{console.log('多个数据发生变化',newValue,oldValue)
},{deep:true})
</script>

2、使用watchEffect

        官网定义：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

面试题：【watch】和【watchEffect】对比

• 都能监听响应式数据的变化，不同的时监听方式的不同
• watch：要明确指出监听的数据
• watchEffect：不用明确指出监听的数据（函数中用到哪些属性，就自动监听哪些属性）

        如何使用watchEffect？

<template><div><div>需求：当水温达到60度，或水位达到80cm时，给服务器发请求</div><h2>当前水温：{{ temp }}℃</h2><h2>当前水温：{{ height }}cm</h2><button @click="changeTemp">水温+10</button><button @click="changeHeight">水位+1</button></div>
</template>
<script lang="ts" setup>
import { ref, watch, watchEffect } from "vue";
// 数据
let temp = ref(10);
let height = ref(0);
// 方法
function changeTemp(params: type) {temp.value += 10;
}
function changeHeight(params: type) {height.value += 10;
}
// 使用watchEffect监听
watchEffect(()=>{if (temp.value>=60 || height.value) {console.log('向服务器发送请求')}
})
</script>

8、标签的ref属性

作用：用于注册模板引用

• 用在不同DOM标签上，获取的时DOM节点
• 用在组件标签上，获取的组件实例

用法：

1. 父组件中，将ref属性绑定到子组件上，并且需要定义绑定的ref属性
2. 子组件中，通过defineExpose方法，将子组件中的参数/方法暴露给父组件使用 

代码示例：

父组件

<template><div><h1>中国</h1><h2 id="address">西安</h2><h3 ref="title1">小张快跑。</h3><button @click="showLog">点我打印元素</button><son ref="sonRef"/><button @click="showSonLog">点我获取子组件的属性</button></div>
</template>
<script lang="ts" setup>
import son from "./son.vue";
import { ref } from "vue";// 创建一个title1参数, 用于存储ref标记的内容
let title1 = ref<HTMLElement | null>(null);
let sonRef = ref<HTMLElement | null>(null);
const showLog = () => {// 使用原生方法,弊端: 如果全局中出现同名ID, 这样获取的值时混乱的console.log('地址:', document.querySelector("#address")?.innerHTML);// 使用ref方法, 特点: 如果全局中出现同名ID, 全局不受影响console.log('名字', title1.value?.innerHTML); // 防止空值访问
};
const showSonLog =()=>{// 这样只能获取到组件的实,然而并不能获取到组件中的值和方法,这是vue3的一种保护措施console.log('子组件实例', sonRef.value)// 只有子组件通[defineExpose]暴露参数/方法后,父组件才能直接用console.log('子组件中的参数', sonRef.value.a)
}
</script>

 子组件

<template><div>子组件</div>
</template>
<script lang="ts" setup>
import { ref,defineExpose } from "vue";let a = ref(0)
let b = ref(1)
let c = ref(2)defineExpose({a})
</script><style lang="scss" scoped></style>