【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化（二）：https://developer.aliyun.com/article/1556914
* 情况四
监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：
- 若该属性值不是【对象类型】，需要写成函数形式。
- 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
<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
- 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
watch：要明确指出监视的数据
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>
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>
4. 路由
4.1. 【对路由的理解】
4.2. 【基本切换效果】
Vue3中要使用vue-router的最新版本，目前是4版本。- 路由配置文件代码如下：
import {createRouter,createWebHistory} from 'vue-router' import Home from '@/pages/Home.vue' import News from '@/pages/News.vue' import About from '@/pages/About.vue' const router = createRouter({ history:createWebHistory(), routes:[ { path:'/home', component:Home }, { path:'/about', component:About } ] }) export default router
main.ts代码如下：
import router from './router/index' app.use(router) app.mount('#app')
App.vue代码如下
<template> <div class="app"> <h2 class="title">Vue路由测试</h2> <!-- 导航区 --> <div class="navigate"> <RouterLink to="/home" active-class="active">首页</RouterLink> <RouterLink to="/news" active-class="active">新闻</RouterLink> <RouterLink to="/about" active-class="active">关于</RouterLink> </div> <!-- 展示区 --> <div class="main-content"> <RouterView></RouterView> </div> </div> </template> <script lang="ts" setup name="App"> import {RouterLink,RouterView} from 'vue-router' </script>
4.3. 【两个注意点】
- 路由组件通常存放在
pages或views文件夹，一般组件通常存放在components文件夹。- 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
4.4.【路由器工作模式】
history模式
优点：
URL更加美观，不带有#，更接近传统的网站URL。缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有
404错误。
const router = createRouter({ history:createWebHistory(), //history模式 /******/ })
hash模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：
URL带有#不太美观，且在SEO优化方面相对较差。
const router = createRouter({ history:createWebHashHistory(), //hash模式 /******/ })
4.5. 【to的两种写法】
<!-- 第一种：to的字符串写法 --> <router-link active-class="active" to="/home">主页</router-link> <!-- 第二种：to的对象写法 --> <router-link active-class="active" :to="{path:'/home'}">Home</router-link>
4.6. 【命名路由】
作用：可以简化路由跳转及传参（后面就讲）。
给路由规则命名：
routes:[ { name:'zhuye', path:'/home', component:Home }, { name:'xinwen', path:'/news', component:News, }, { name:'guanyu', path:'/about', component:About } ]
跳转路由：
<!--简化前：需要写完整的路径（to的字符串写法） --> <router-link to="/news/detail">跳转</router-link> <!--简化后：直接通过名字跳转（to的对象写法配合name属性） --> <router-link :to="{name:'guanyu'}">跳转</router-link>
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化（四）：https://developer.aliyun.com/article/1556916
![[译] 用 Typescript + Composition API 重构 Vue 3 组件](https://ucc.alicdn.com/hid5ykfodc62m_20240829_e496cb22e4e94454b6319d817d78e968.webp?x-oss-process=image/resize,h_160,m_lfit)
