vue 学习笔记三

一 watchEffect

1 概念

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

watch 对比 watchEffect

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

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

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

1.1 示例代码

<template>
  <div class="person">
    <h2>需求：当水温达到60度，或水位达到80cm时，给服务器发请求</h2>
    <h2>当前水温：{{temp}}°C</h2>
    <h2>当前水位：{{height}}cm</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch,watchEffect} from 'vue'

// 数据
let temp = ref(10)
let height = ref(0)

// 方法
function changeTemp(){
  temp.value += 10
}
function changeHeight(){
  height.value += 10
}
// 监视 -- watch实现
/* watch([temp,height],(value)=>{
  // 从value中获取最新的水温(newTemp)、最新的水位(newHeight)
  let [newTemp,newHeight] = value
  // 逻辑
  if(newTemp >= 60 || newHeight >= 80){
    console.log('给服务器发请求')
  }
}) */
// 监视 -- watchEffect实现
watchEffect(()=>{
  if(temp.value >= 60 || height.value >= 80){
    console.log('给服务器发请求')
  }
})

二 标签的ref属性

2 概念

在 Vue3 中，ref 既可以用来创建响应式数据，也可以作为模板引用直接访问 DOM 元素或子组件实例。它解决了传统 document.getElementById 在组件化开发中作用域冲突的问题。

2.1 示例代码

<template>
<div class="person">
    <h1>中国</h1>
    <h2 ref="title2">北京</h2>
    <h3>尚硅谷</h3>
    <button @click="showLog">点我输出h2这个元素</button>
</div>
</template>

<script lang="ts" setup name="Person">
import {ref} from 'vue'
// 创建一个title2, 用于存储ref标记的内容
let title2 = ref()

function showLog(){
    console.log(title2.value)
}
</script>

三 ts中的接口 泛型 自定义类型

3 作用

在 Vue3 中，我们可以使用 ref 和 reactive 来创建响应式的数据引用，并利用 TypeScript 的类型系统来确保数据结构的准确性。

3.1 接口

接口用于定义对象的结构和类型。例如，我们可以定义一个 PersonInter 接口来描述一个人的信息，包括 id、name 和 age。

// 定义一个接口，用于限制person对象的具体属性
export interface PersonInter {
    id:string,
    name:string,
    age:number
}

3.2 自定义类型

自定义类型可以用于定义更复杂的数据结构。

// 一个自定义类型
// export type Persons = Array<PersonInter>
export type Persons = PersonInter[]

3.3示例

vue

<template>
<div class="person">
    ???
</div>
</template>

<script lang="ts" setup name="Person">
import {type PersonInter} from '@/types'

// let person:PersonInter = {id:'asyud7asfd01',name:'张三',age:60}
let personList:Array<PersonInter> = [
    {id: 'asyud7asfd01',name: '张三',age:60},
    {id: 'asyud7asfd02',name: '李四',age:18},
    {id: 'asyud7asfd03',name: '王五',age:5}
]
</script>

ts

// 定义一个接口，用于限制person对象的具体属性
export interface PersonInter {
    id:string,
    name:string,
    age:number
}
// 一个自定义类型
// export type Persons = Array<PersonInter>
export type Persons = PersonInter[]