[GN] Vue3.2 快速上手 ---- 核心语法2

文章目录

标签的 ref 属性
props
生命周期
自定义hook
总结

标签的 ref 属性

用在普通DOM标签上，获取的是DOM节点。
用在组件标签上，获取的是组件实例对象。

用在普通DOM标签上：

<template><div class="person"><h3 ref="title">Vue</h3><button @click="showLog">点我打印</button></div>
</template><script lang="ts" setup name="Person">import {ref} from 'vue'let title = ref()function showLog(){// 通过id获取元素const t1 = document.getElementById('title')// 打印内容console.log(t1?.innerText) //获取的是`DOM`节点。// 通过ref获取元素console.log(title.value)}
</script>

用在组件标签上：
- 父组件App使用子组件Person
- Person组件标签上使用ref 可以获取组件实例
- 但需要子组件代码中使用defineExpose暴露内容

<!-- 父组件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>

props

App.vue是父组件，Person是子组件
父组件中使用子组件 < Person :list=“persons” /> 。并给子组件传送list值
父中定义了发送对象格式子中也可定义接受格式
详见下方代码

新建文件type.ts定义接口

// 定义一个接口，限制每个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>([ //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 Persons} 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>

生命周期

Vue3的生命周期

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

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

自定义hook

hook—— 本质是一个函数，把setup函数中使用的Composition API进行了封装
自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。

useSum.ts中内容如下：

import {ref,onMounted} from 'vue'export default function(){let sum = ref(0)const increment = ()=>{sum.value += 1}//向外部暴露数据return {sum,increment}
}

-useDog.ts中内容如下：

import {reactive,onMounted} from 'vue'
import axios,{AxiosError} from 'axios'export default function(){let dogList = reactive<string[]>([])// 方法async function getDog(){// 发请求let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')// 维护数据dogList.push(data.message)}//向外部暴露数据return {dogList,getDog}
}

-组件中具体使用：

<template><h2>当前求和为：{{sum}}</h2><button @click="increment">点我+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 setup lang="ts">import useSum from './hooks/useSum' // 引入hookimport useDog from './hooks/useDog'let {sum,increment,decrement} = useSum() //直接调用let {dogList,getDog} = useDog()
</script>