Vue3基础语法

我要2002024-07-31 15:16

一：创建Vue3工程（适用Vite打包工具）

Vite官网：Home | Vite中文网 (vitejs.cn)

直接新建一个文件夹，打开cmd运行：

bash 复制代码 
npm create vite@latest

选择Vue和TS语言即可

生成一个项目。

Vue3的核心语法：

【OptionsAPI 与 CompositionAPI】

  • Vue2的API设计是Options（配置）风格的。

  • Vue3的API设计是Composition（组合）风格的。

这种就是选项式API，数据和方法分开发，

这样的好处我觉得就是整体的架构很清晰

但是缺点就是修改起来很麻烦，方法和数据都散落在不同的地方

这种就是组合式API，这个组合式API就和后端的java代码一样，把变量和方法都写在一起

当然，能实现这个组合式API和下面的这个setup密不可分。

Setup：

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API "表演的舞台 " ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

特点如下：

  • setup函数返回的对象中的内容，可直接在模板中使用。

  • setup中访问**this是undefined。**

  • setup函数会在**beforeCreate之前调用**，它是"领先"所有钩子执行的。

直接看一段代码：

复制代码 
<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'
      let age = 18
      let tel = '13888888888'

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>
setup 语法糖

这个语法糖直接可以把setup独立出去

复制代码 
<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'

  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

响应式变量：

概念：响应式允许我们在应用程序运行过程中动态地跟踪和更新值，当这些变量的值变化时，视图会自动更新，体现了数据驱动和单向数据流的原则

上一个案例就很好理解了：

复制代码 
<script setup lang="ts" >
import {ref} from "vue";

const name = ref('张三');
const changename = () =>{
  name.value = '李四';
  console.log(name.value)
}
</script>

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <button @click="changename">修改名字</button>
  </div>
</template>

这段代码逻辑很简单，就是定于了一个响应式变量name，点击按钮触发回调函数修改name属性

非常简单的一个功能

如果我们将这个name换成不是响应式的变量，那么效果就是

'控制台会输出李四，说明name这个属性的值已经被改了，不过浏览器页面不会显示李四，因为这个变量不是响应式的，在页面上不会改变。

ref 创建

  • **作用：**定义响应式变量。

  • 语法： let xxx = ref(初始值)。

  • 返回值： 一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

ref定义的响应式变量在这个script脚本中调用值是需要加.value的，在声明组件的模板部分就是</template>中的html标签部分调用是不需要.value的

reactive 创建

  • 作用： 定义一个响应式对象 （基本类型不要用它，要用ref，否则报错）

  • 语法： let 响应式对象= reactive(源对象)。

  • 返回值： 一个Proxy的实例对象，简称：响应式对象。

  • 注意点： reactive定义的响应式数据是"深层次"的。

reactive我觉得用到不多，ref也可以处理对象类型的数据，不过ref处理对象类型的数据的时候在底层是转化为reactive的

案例：
复制代码 
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

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

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
</script>
注意点1：响应式变量里套响应式变量
复制代码 
const obj = reactive({
  a:1,
  b:2,
  c:ref(3)
})
console.log(obj.a)
console.log(obj.b)
console.log(obj.c)

很简单一小段代码，

reactive包着一个响应式对象，里面有一个ref

这个时候我们想要输出3这个值是不需要加.value的

在响应式变量里面的响应式变量会自动解构。

注意点2：响应式变量丢失响应式：

看这段代码：

复制代码 
<script setup lang="ts" >
import {ref,reactive} from "vue";

// 定义一个响应式变量
const data = reactive ({
  name:"abc",
  age:"18"
})
let {name,age} = data
// 使用toRefs解决
function ChangeName(){
  name += '------';
  console.log(name)
}
</script>

<template>
  <div class="person">
    <h2>name是：{{name}}</h2>
    <button @click="ChangeName" >修改名字</button>
  </div>
</template>

这段代码的整体逻辑也很简单，就是定义了一个响应式对象，里面有两个属性

我们对这个变量进行解构，然后新建了一个按钮，点击按钮之后调用回调函数ChangeName修改name的值。

点击之后：

控制台输出了修改之后的名字，可以屏幕上的值并没有改变

这说明name这个属性丢失了响应式

原因式因为解构赋值会创建一个新的引用，而不是原始对象

解决办法：
1：ToRefs
复制代码 
<script setup lang="ts" >
import {ref, reactive, toRefs} from "vue";

// 定义一个响应式变量
const data = reactive ({
  name:"abc",
  age:"18"
})
let {name,age} = toRefs(data)
// 使用toRefs解决
function ChangeName(){
  name.value += '------';
  console.log(name.value)
}
</script>
2：直接用ref定义这个对象：
复制代码 
<script setup lang="ts" >
import {ref, reactive, toRefs} from "vue";

// 定义一个响应式变量
const data = ref ({
  name:"abc",
  age:"18"
})

function ChangeName(){
  data.value.name += "------";
  console.log(data.value.name)
}
</script>

<template>
  <div class="person">
    <h2>name是：{{data.name}}</h2>
    <button @click="ChangeName" >修改名字</button>
  </div>
</template>
toRefs 与 toRef:
复制代码 
<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

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

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>

Watch：

作用：监视数据的变化

比如检测到年龄超过18岁，然后执行什么逻辑

又或者检测到金额超过一定大小，然后执行什么逻辑

  • 特点：Vue3中的watch只能监视以下四种数据：

  1. ref定义的数据。

  2. reactive定义的数据。

  3. 函数返回一个值（getter函数）。

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

来自Vue3的官方文档

情况一：ref的基本数据
复制代码 
<script setup lang="ts">
import {ref,watch} from "vue";

let sum = ref(5);
function AddSum(){
  sum.value++;
}
const stopWatch = watch(sum,(newVal) => {
  console.log(newVal);
  if(newVal >= 10){
    stopWatch();
  }
})
</script>

直接照着数据名写就行，

watch函数中有两个点，一个是这个返回值stopWatch，这个就是用来停止监视的，

看得后面的if逻辑，当这个newVal就是变化后的值超过了10，就停止监视

还有watch的第二个参数，（newVal），后面其实还能写，写成（newVal，OldVal），这顾名思义就是变化前和变化后的值。

情况二：对象类型数据

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

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

案例：

复制代码 
<script setup lang="ts">
import {ref,watch} from 'vue'
// 数据
let person = ref({
  name:'张三',
  age:18
})
// 方法
function changeName(){
  person.value.name += '~'
}
function changeAge(){
  person.value.age += 1
}
function changePerson(){
  person.value = {name:'李四',age:90}
}
/*
  监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
  watch的第一个参数是：被监视的数据
  watch的第二个参数是：监视的回调
  watch的第三个参数是：配置对象（deep、immediate等等.....）
*/
watch(person,(newValue,oldValue)=>{
  console.log('person变化了',newValue,oldValue)
},)
</script>

<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

这一段代码逻辑就是：创建了一个person对象里面有两个值，姓名和年龄，我们有三个函数分别修改姓名，年龄和整个人

然后我们的watch第一个参数传的式watch

我点击修改姓名或者修改年龄，控制台没有任何反应

当我修改整个人的时候，控制台才有输出

说明用ref定义对象类型的数据，监视的是地址值，检测不到对象里面的具体属性

将watch函数修改一下，开启深度监视。

复制代码 
watch(person,(newValue,oldValue)=>{
  console.log('person变化了',newValue,oldValue)
},{deep:true})

当对象类型的内部数据发生了改变，这马上就发生了变化。

情况三：监视ref或reactive定义的【对象类型】数据中的某个属性，

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

  2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

直接看代码：

复制代码 
<template>
  <div class="person">
    <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
    <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 lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
   watch(()=> person.name,(newValue,oldValue)=>{
    console.log('person.name变化了',newValue,oldValue)
  })

整体的逻辑就是将要监视对象的某个属性以箭头函数的方式做为第一个参数

情况四：监视多个数据：

还是直接看代码：

复制代码 
<template>
  <div class="person">
    <h1>情况五：监视上述的多个数据</h1>
    <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 lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况五：监视上述的多个数据
  watch([()=>person.name,person.car],(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})

</script>

就是把想要监视的多个数据封装成一个对象。

WatchEffect：

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

  • watch对比watchEffect

    1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

    2. watch：要明确指出监视的数据

    3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

直接看代码：

复制代码 
<script lang="ts" setup name="Person">
  import {ref,watch,watchEffect} from 'vue'
  // 数据
  let temp = ref(0)
  let height = ref(0)

  // 方法
  function changePrice(){
    temp.value += 10
  }
  function changeSum(){
    height.value += 1
  }

  // 用watch实现，需要明确的指出要监视：temp、height
  watch([temp,height],(value)=>{
    // 从value中获取最新的temp值、height值
    const [newTemp,newHeight] = value
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if(newTemp >= 50 || newHeight >= 20){
      console.log('联系服务器')
    }
  })

  // 用watchEffect实现，不用
  const stopWtach = watchEffect(()=>{
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if(temp.value >= 50 || height.value >= 20){
      console.log(document.getElementById('demo')?.innerText)
      console.log('联系服务器')
    }
    // 水温达到100，或水位达到50，取消监视
    if(temp.value === 100 || height.value === 50){
      console.log('清理了')
      stopWtach()
    }
  })
</script>

生命周期：

在Vue.js中，组件生命周期是指组件在其整个存在期间所经历的一系列阶段

  1. 创建前（beforeCreate）：在此阶段，实例正在初始化，但是数据还没有被观察到，$options 已经可用。
  2. 创建（created）：实例已经完全初始化，并且数据已经通过运行时代理被劫持（watched）。这是执行数据初始化的好时机。
  3. 挂载（mounted）：组件已经被DOM挂载到了某个元素上，此时可以开始执行异步操作和监听事件，因为实例已经稳定了。
  4. 更新（updated）：当组件的props、响应式数据或计算属性发生改变，且VNode已经更新完成之后触发。在此阶段可以处理数据的变化。
  5. 销毁（beforeDestroy）/（destroyed）：组件即将卸载或已经卸载之前，执行清理工作，比如解绑事件和清除定时器等。

  • 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

    <script lang="ts" setup name="Person"> import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
    复制代码 
    // 数据
let sum = ref(0)
// 方法
function changeSum() {
  sum.value += 1
}
console.log('setup')
// 生命周期钩子
onBeforeMount(()=>{
  console.log('挂载之前')
})
onMounted(()=>{
  console.log('挂载完毕')
})
onBeforeUpdate(()=>{
  console.log('更新之前')
})
onUpdated(()=>{
  console.log('更新完毕')
})
onBeforeUnmount(()=>{
  console.log('卸载之前')
})
onUnmounted(()=>{
  console.log('卸载完毕')
})
    </script>

用的最多的应该就是onMounted(挂载完毕)，我觉得可以把这个方法理解为后端的拦截器即可

我记得后面还有一个场景用了onUnmounted这个卸载之后的钩子，好像emitter绑定了一个事件，

这个也很好理解，当你的组件被卸载之后，拿绑定的事件就可以直接删除了

这也可以理解为java中的IO流，我们每次开流关流之后都会在finally中关掉这个流

自定义Hooks：

什么是hook？------ 本质是一个函数，把setup函数中使用的Composition API进行了封装

这个对于后端来说超级好理解，这个自定义hooks可以理解为工具类。

具体用法：

复制代码 
import {ref,onMounted} from 'vue'

export default function(){
  let sum = ref(0)

  const increment = ()=>{
    sum.value += 1
  }
  const decrement = ()=>{
    sum.value -= 1
  }
  onMounted(()=>{
    increment()
  })

  //向外部暴露数据
  return {sum,increment,decrement}
}

我们在这个ts文件中，定义了一个变量，还有一些对这个变量的方法，还有一个生命周期钩子

并且需要记得要向外暴露。

复制代码 
<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="increment">点我+1</button>
  <button @click="decrement">点我-1</button>
  <hr>
</template>

<script setup lang="ts">
  import useSum from './hooks/useSum'
  let {sum,increment,decrement} = useSum()
</script>

用一个对象类型的数据接受useSum文件中的暴露值，然后直接在模板文件中使用即可

相关推荐
恋猫de小郭1 小时前
Flutter Zero 是什么？它的出现有什么意义？为什么你需要了解下？
android·前端·flutter
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅9 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊9 小时前
jwt介绍
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示