【vue3学习】vue3核心语法汇总 一

目录

3.1. 【OptionsAPI 与 CompositionAPI】

3.2. 【拉开序幕的 setup】

3.3. 【setup 与 Options API 的关系】

3.4. 【reactive 创建：对象类型的响应式数据】

3.5. 【ref 创建：对象类型的响应式数据】

3.6. 【ref 对比 reactive】

3.7. 【toRefs 与 toRef】

3.8. 【computed计算属性】

3.9.【watch】

3.10. 【watchEffect】

3.11. 【标签的 ref 属性】

3.12. 【props】

3.13. 【生命周期】

3.14. 【自定义hook】

---

3.1. 【OptionsAPI 与 CompositionAPI】

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

● Vue3 的 API 设计是 Composition （组合）风格的。 ### Options API 的弊端

Options 类型的 API ，数据、方法、计算属性等，是分散在： data 、 methods 、 computed 中的，若想新增或者修改一个需求，

就需要分别修改： data 、 methods 、 computed ，不便于维护和复用。

Composition API 的优势

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

3.2. 【拉开序幕的 setup】

setup 概述

setup 是 Vue3 中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台_**”**_，组件中所用到的：数据、方

法、计算属性、监视......等等，均配置在 setup 中。

特点如下：

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

● setup 中访问 this 是 undefined 。

● setup 函数会在 beforeCreate 之前调用，它是“领先”所有钩子执行的。 ```vue

### setup 的返回值

- 若返回一个**对象**：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**

- 若返回一个**函数**：则可以自定义渲染内容，代码如下：

setup(){
return ()=> '你好啊！'
}

3.3. 【setup 与 Options API 的关系】

● Vue2 的配置（ data 、 methos ......）中**可以访问到** setup 中的属性、方法。

● 但在 setup 中**不能访问到** Vue2 的配置（ data 、 methos ......）。

● 如果与 Vue2 冲突，则 setup 优先。 ### setup 语法糖 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>
<script lang="ts">
export default {
name:'Person',
}
</script>
<!-- 下面的写法是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>

扩展：上述代码，还需要编写一个不写 setup 的 script 标签，去指定组件名字，比较麻烦，我们可以借助 vite 中的插件简化

1. 第一步： npm i vite-plugin-vue-setup-extend -D

2. 第二步： vite.config.ts ```jsx

import { defineConfig } from 'vite'

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

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

3. 第三步：`<script setup lang="ts" name="Person">`
## 3.3. 【ref 创建：基本类型的响应式数据】
- **作用：**定义响应式变量。
- **语法：**`let xxx = ref(初始值)`。
- **返回值：**一个`RefImpl`的实例对象，简称`ref对象`或`ref`，`ref`对象的`value`**属性是响应式的**。
- **注意点：**
- `JS`中操作数据需要：`xxx.value`，但模板中不需要`.value`，直接使用即可。
- 对于`let name = ref('张三')`来说，`name`不是响应式的，`name.value`是响应式的。
```vue
<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 setup lang="ts" name="Person">
import {ref} from 'vue'
// name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
let name = ref('张三')
let age = ref(18)
// tel就是一个普通的字符串，不是响应式的
let tel = '13888888888'
function changeName(){
// JS中操作ref对象时候需要.value
name.value = '李四'
console.log(name.value)
// 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
// name = ref('zhang-san')
}
function changeAge(){
// JS中操作ref对象时候需要.value
 age.value += 1
console.log(age.value)
}
function showTel(){
alert(tel)
}
</script>

3.4. 【reactive 创建：对象类型的响应式数据】

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

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

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

● 注意点： reactive 定义的响应式数据是“深层次”的。 ```vue

• 其实ref接收的数据可以是：基本类型、对象类型。
• 若ref接收的是对象类型，内部其实也是调用了reactive函数。

3.5. 【ref 创建：对象类型的响应式数据】

• 其实ref接收的数据可以是：基本类型、对象类型。
• 若ref接收的是对象类型，内部其实也是调用了reactive函数。

3.6. 【ref 对比 reactive】

宏观角度看：

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

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

● 区别：

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

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

例：Object.assign(car,{brand:'奥拓',price:1})

● 使用原则：

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

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

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

3.7. 【toRefs 与 toRef】

● 作用：将一个响应式对象中的每一个属性，转换为 ref 对象。

● 备注： toRefs 与 toRef 功能一致，但 toRefs 可以批量转换。

● 语法如下： ```vue

3.8. 【computed计算属性】

● 作用：根据已有数据计算出新数据（和`Vue2`中的`computed`作用一致）。

<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    <button @click="changeFullName">将全名改为li-si</button> <br>
    全名：<span>{{fullName}}</span> <br>
    全名：<span>{{fullName}}</span> <br>
    全名：<span>{{fullName}}</span> <br>
    全名：<span>{{fullName}}</span> <br>
    全名：<span>{{fullName}}</span> <br>
    全名：<span>{{fullName}}</span> <br>
  </div>
</template>

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

  let firstName = ref('zhang')
  let lastName = ref('san')

  // fullName是一个计算属性，且是只读的
  /* let fullName = computed(()=>{
    console.log(1)
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
  }) */

  // fullName是一个计算属性，可读可写
  let fullName = computed({
    // 当fullName被读取时，get调用
    get(){
      return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },
    // 当fullName被修改时，set调用，且会收到修改的值
    set(val){
      const [str1,str2] = val.split('-')
      firstName.value = str1
      lastName.value = str2
    }
  })

  function changeFullName(){
    fullName.value = 'li-si'
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
  li {
    font-size: 20px;
  }
</style>

3.9.【watch】

● 作用：监视数据的变化（和 Vue2 中的 watch 作用一致）

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

> 1. ref 定义的数据。

> 2. reactive 定义的数据。

> 3. 函数返回一个

值（ getter 函数）。

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

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

* 情况一

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

<template>
<div class="person">
<h1>情况一：监视【ref】定义的【基本类型】数据</h1>
 <h2>当前求和为：{{sum}}</h2>
<button @click="changeSum">点我sum+1</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
// 数据
let sum = ref(0)
// 方法
function changeSum(){
sum.value += 1
}
// 监视，情况一：监视【ref】定义的【基本类型】数据
const stopWatch = watch(sum,(newValue,oldValue)=>{
console.log('sum变化了',newValue,oldValue)
if(newValue >= 10){
stopWatch()
}
})
</script>

• 情况二
  监视 ref 定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监
  视。
  注意：
  ● 若修改的是 ref 定义的对象中的属性， newValue 和 oldValue 都是新值，因为它们是同一个对象。
  ● 若修改整个 ref 定义的对象， newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

<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>
<script lang="ts" setup name="Person">
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)
},{deep:true})
</script>

* 情况三

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

*情况四
监视 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)
}) */
// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
watch(()=>person.car,(newValue,oldValue)=>{
 console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>

* 情况五

监视上述的多个数据

<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>

3.10. 【watchEffect】

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

● watch 对比 watchEffect

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

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

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

● 示例代码：

<template>
<div class="person">
<h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
<h2 id="demo">水温：{{temp}}</h2>
<h2>水位：{{height}}</h2>
<button @click="changePrice">水温+1</button>
<button @click="changeSum">水位+10</button>
</div>
</template>
<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>

3.11. 【标签的 ref 属性】

作用：用于注册模板引用。

● 用在普通 DOM 标签上，获取的是 DOM 节点。

● 用在组件标签上，获取的是组件实例对象。

用在普通 DOM 标签上：

<template>
<div class="person">
<h1 ref="title1">尚硅谷</h1>
 <h2 ref="title2">前端</h2>
<h3 ref="title3">Vue</h3>
<input type="text" ref="inpt"> <br><br>
<button @click="showLog">点我打印内容</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref} from 'vue'
let title1 = ref()
let title2 = ref()
let title3 = ref()
function showLog(){
// 通过id获取元素
const t1 = document.getElementById('title1')
// 打印内容
console.log((t1 as HTMLElement).innerText)
console.log((<HTMLElement>t1).innerText)
console.log(t1?.innerText)
/************************************/
// 通过ref获取元素
console.log(title1.value)
console.log(title2.value)
 console.log(title3.value)
}
</script>

用在组件标签上：

<!-- 父组件App.vue -->
<template>
<Person ref="ren"/>
<button @click="test">测试</button>
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {ref} from 'vue'
let ren = ref()
function test(){
console.log(ren.value.name)
console.log(ren.value.age)
}
</script>
<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
 import {ref,defineExpose} from 'vue'
// 数据
let name = ref('张三')
let age = ref(18)
/****************************/
/****************************/
// 使用defineExpose将组件中的数据交给外部
defineExpose({name,age})
</script>

3.12. 【props】

// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {
id:string,
name:string,
age:number
}
// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>

App.vue 中代码：

<template>
 <Person :list="persons"/>
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {reactive} from 'vue'
import {type Persons} from './types'
let persons = reactive<Persons>([
{id:'e98219e12',name:'张三',age:18},
{id:'e98219e13',name:'李四',age:19},
{id:'e98219e14',name:'王五',age:20}
])
</script>

Person.vue 中代码：

<template>
<div class="person">
<ul>
<li v-for="item in list" :key="item.id">
{{item.name}}--{{item.age}}
</li>
</ul>
</div>
</template>
<script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'
// 第一种写法：仅接收
// const props = defineProps(['list'])
// 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()
// 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
console.log(props)
</script>

3.13. 【生命周期】

● 概念： Vue 组件实例在创建时要经历一系列的初始化步骤，在此过程中 Vue 会在合适的时机，调用特定的函数，从而让开发

者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子

● 规律：

生命周期整体分为四个阶段，分别是：**创建、挂载、更新、销毁**，每个阶段都有两个钩子，一前一后。

● Vue2 的生命周期

创建阶段： beforeCreate 、 created

挂载阶段： beforeMount 、 mounted

更新阶段： beforeUpdate 、 updated

销毁阶段： beforeDestroy 、 destroyed

● Vue3 的生命周期

创建阶段： setup

挂载阶段： onBeforeMount 、 onMounted

更新阶段： onBeforeUpdate 、 onUpdated

卸载阶段： onBeforeUnmount 、 onUnmounted

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

● 示例代码：

<template>
<div class="person">
<h2>当前求和为：{{ sum }}</h2>
<button @click="changeSum">点我sum+1</button>
</div>
</template>
<!-- vue3写法 -->
<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>

3.14. 【自定义hook】

● 什么是 hook ？—— 本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装，类似于 vue2.x 中的 mixin 。

● 自定义 hook 的优势：复用代码, 让 setup 中的逻辑更清楚易懂。

示例代码：

● useSum.ts 中内容如下：

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}
}

● useDog.ts 中内容如下：

import {reactive,onMounted} from 'vue'
import axios,{AxiosError} from 'axios'
export default function(){
let dogList = reactive<string[]>([])
// 方法
async function getDog(){
 try {
// 发请求
let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
// 维护数据
dogList.push(data.message)
} catch (error) {
// 处理错误
const err = <AxiosError>error
console.log(err.message)
}
}
// 挂载钩子
onMounted(()=>{
getDog()
})
//向外部暴露数据
return {dogList,getDog}
}

● 组件中具体使用：

<template>
<h2>当前求和为：{{sum}}</h2>
<button @click="increment">点我+1</button>
<button @click="decrement">点我-1</button>
<hr>
<img v-for="(u,index) in dogList.urlList" :key="index" :src="(u as string)">
<span v-show="dogList.isLoading">加载中......</span><br>
<button @click="getDog">再来一只狗</button>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name:'App',
})
</script>
<script setup lang="ts">
import useSum from './hooks/useSum'
import useDog from './hooks/useDog'
let {sum,increment,decrement} = useSum()
let {dogList,getDog} = useDog()
</script>