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

小张快跑。2025-05-13 13:21

一、什么是Vite

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

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

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的代代码片段

html 复制代码 
<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的语法糖之后我们就出现了一种新的写法：

html 复制代码 
<script lang="ts" setup name="test">
  let name = "张三";
  let age = 148;
  let tel = "1522321555";
</script>

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

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

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

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

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

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

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

javascript 复制代码 
<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  += 1
    console.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能且只能用来定义对象数据类型

html 复制代码 
<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的局限性

javascript 复制代码 
let car = reactive({ brand: "奔驰", price: 100 });

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

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

javascript 复制代码 
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()

html 复制代码 
<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

html 复制代码 
<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默认开启深度监听，这种深度监听是无法关闭的（隐式创建深度监听）

html 复制代码 
<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函数式，注意点：若是对象监视的地址值，需要关注对象内部，需要手动开启深度监听 。

html 复制代码 
<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监听多个数据

html 复制代码 
<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？

html 复制代码 
<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方法，将子组件中的参数/方法暴露给父组件使用

代码示例：

父组件

html 复制代码 
<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>

子组件

html 复制代码 
<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>
相关推荐
ai产品老杨6 分钟前
AI赋能安全生产，推进数智化转型的智慧油站开源了。
前端·javascript·vue.js·人工智能·ecmascript
帮帮志12 分钟前
vue实现与后台springboot传递数据【传值/取值 Axios 】
前端·vue.js·spring boot
xixingzhe226 分钟前
Nginx 配置多个监听端口
服务器·前端·nginx
清风细雨_林木木1 小时前
Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践
前端·css·vue.js
逊嘘1 小时前
【Web前端开发】CSS基础
前端·css
小宁爱Python1 小时前
深入掌握CSS Flex布局：从原理到实战
前端·javascript·css
Attacking-Coder2 小时前
前端面试宝典---webpack面试题
前端·面试·webpack
极小狐2 小时前
极狐GitLab 容器镜像仓库功能介绍
java·前端·数据库·npm·gitlab
程序猿阿伟2 小时前
《Flutter社交应用暗黑奥秘：模式适配与色彩的艺术》
前端·flutter
rafael(一只小鱼)2 小时前
黑马点评实战笔记
前端·firefox
热门推荐
01【分布式】Hadoop完全分布式的搭建（零基础）02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06Coze扣子平台完整体验和实践（附国内和国际版对比）07DeepSeek各版本说明与优缺点分析08苍穹外卖面试总结09西电B测-计算机网络综合实验(含验收问题)10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）