2023-1-16 前端達人
//main.js //引入的不再是Vue構(gòu)造函數(shù)了，引入的是一個名為createApp的工廠函數(shù) import {createApp} from 'vue import App from './App.vue //創(chuàng)建應(yīng)用實例對象-app(類似于之前vue2中的vm實例，但是app比vm更輕) createApp(APP).mount('#app') //卸載就是unmount,卸載就沒了 //createApp(APP).unmount('#app') //之前我們是這么寫的，在vue3里面這一塊就不支持了，會報錯的，引入不到 import vue from 'vue'; new Vue({ render:(h) => h(App) }).$mount('#app') //多個應(yīng)用實例 const app1 = createApp({ /* ... */ }) app1.mount('#container-1') const app2 = createApp({ /* ... */ }) app2.mount('#container-2')
理解：Vue3.0中一個新的額配置項，值為一個函數(shù)
2.setup是所有Composition API(組合api) “表演的舞臺”
組件中所用到的：數(shù)據(jù)、方法等等，均要配置在setup中
setup函數(shù)的兩種返回值:
注意點：
import {h} from 'vue' //向下兼容，可以寫入vue2中的data配置項 module default { name: 'App', setup(){ //數(shù)據(jù) let name = '張三', let age = 18, //方法 function sayHello(){ console.log(name) }, //f返回一個對象（常用） return { name, age, sayHello } //返回一個函數(shù)（渲染函數(shù)） //return () => {return h('h1','學習')} return () => h('h1','學習') } }
<script setup></script >
<script setup>。(不包括一般的 <script>)
<script setup> 中的頂層綁定都將自動暴露給模板。
<script setup> 是在單文件組件 (SFC) 中使用組合式 API 的編譯時語法糖。當同時使用 SFC 與組合式 API 時該語法是默認推薦。相比于普通的 <script> 語法，它具有更多優(yōu)勢：
/* 里面的代碼會被編譯成組件 setup() 函數(shù)的內(nèi)容。
這意味著與普通的 `<script>` 只在組件被首次引入的時候執(zhí)行一次不同，
`<script setup>` 中的代碼會在每次組件實例被創(chuàng)建的時候執(zhí)行。*/ <script setup> console.log('hello script setup') </script>
當使用 <script setup> 的時候，任何在 <script setup> 聲明的頂層的綁定 (包括變量，函數(shù)聲明，以及 import 導(dǎo)入的內(nèi)容) 都能在模板中直接使用：
<script setup> // 變量 const msg = '王二麻子' // 函數(shù) function log() { console.log(msg) } </script> <template> <button @click="log">{{ msg }}</button> </template>
import 導(dǎo)入的內(nèi)容也會以同樣的方式暴露。這意味著我們可以在模板表達式中直接使用導(dǎo)入的 action 函數(shù)，而不需要通過 methods 選項來暴露它：
<script setup> import { say } from './action' </script> <template> <div>{{ say ('hello') }}</div> </template>
響應(yīng)式狀態(tài)需要明確使用響應(yīng)式 API 來創(chuàng)建。和 setup() 函數(shù)的返回值一樣，ref 在模板中使用的時候會自動解包：
<script setup> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">{{ count }}</button> </template>
<script setup> 范圍里的值也能被直接作為自定義組件的標簽名使用：
/**
*這里 MyComponent 應(yīng)當被理解為像是在引用一個變量。
*如果你使用過 JSX，此處的心智模型是類似的。
*其 kebab-case 格式的 <my-component> 同樣能在模板中使用——不過，
*強烈建議使用 PascalCase 格式以保持一致性。同時這也有助于區(qū)分原生的自定義元素。
*/ <script setup> import MyComponent from './MyComponent.vue' </script> <template> <MyComponent /> </template>
/**
*由于組件是通過變量引用而不是基于字符串組件名注冊的，
*在 <script setup> 中要使用動態(tài)組件的時候，應(yīng)該使用*動態(tài)的 :is 來綁定：
*/ <script setup> import Foo from './Foo.vue' import Bar from './Bar.vue' </script> <template> <component :is="Foo" /> <component :is="someCondition ? Foo : Bar" /> </template>
<FooBar/> 引用它自己。
import { FooBar as FooBarChild } from './components'
<Foo.Bar> 來引用嵌套在對象屬性中的組件。這在需要從單個文件中導(dǎo)入多個組件的時候非常有用：
<script setup> import * as Form from './form-components' </script> <template> <Form.Input> <Form.Label>label</Form.Label> </Form.Input> </template>
<script setup> 中不需要顯式注冊，但他們必須遵循 vNameOfDirective 這樣的命名規(guī)范：
<script setup> const vMyDirective = { beforeMount: (el) => { // 在元素上做些操作 } } </script> <template> <h1 v-my-directive>This is a Heading</h1> </template>
<script setup> import { myDirective as vMyDirective } from './MyDirective.js' </script>
<script setup> 中可用：
<script setup> const props = defineProps({ foo: String }) const emit = defineEmits(['change', 'delete']) // setup 代碼 </script>
<script setup> 中使用的編譯器宏。他們不需要導(dǎo)入，且會隨著 <script setup> 的處理過程一同被編譯掉。
<script setup> 的組件是默認關(guān)閉的——即通過模板引用或者 $parent 鏈獲取到的組件的公開實例，不會暴露任何在 <script setup> 中聲明的綁定。
//可以通過 defineExpose 編譯器宏來顯式指定在 <script setup> 組件中要暴露出去的屬性： <script setup> import { ref } from 'vue' const a = 1 const b = ref(2) defineExpose({ a, b }) </script> //當父組件通過模板引用的方式獲取到當前組件的實例， //獲取到的實例會像這樣 { a: number, b: number } (ref 會和在普通實例中一樣被自動解包)
<script setup> 使用 slots 和 attrs 的情況應(yīng)該是相對來說較為罕見的，因為可以在模板中直接通過 $slots 和 $attrs 來訪問它們。在你的確需要使用它們的罕見場景中，可以分別用 useSlots 和 useAttrs 兩個輔助函數(shù)：
<script setup> import { useSlots, useAttrs } from 'vue' const slots = useSlots() const attrs = useAttrs() </script> //useSlots 和 useAttrs 是真實的運行時函數(shù)，它的返回與 setupContext.slots 和 setupContext.attrs 等價。 //它們同樣也能在普通的組合式 API 中使用。
<script> 一起使用：
<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有這些需要的情況下或許會被使用到：
<script> // 普通 <script>, 在模塊作用域下執(zhí)行 (僅一次) runSideEffectOnce() // 聲明額外的選項 export default { inheritAttrs: false, customOptions: {} } </script> <script setup> // 在 setup() 作用域中執(zhí)行 (對每個實例皆如此) </script>
<script setup> 中可以使用頂層 await。結(jié)果代碼會被編譯成 async setup()：
<script setup> const post = await fetch(`/api/post/1`).then((r) => r.json()) </script> // 另外，await 的表達式會自動編譯成在 await 之后保留當前組件實例上下文的格式。
Object.defineProperty( data, 'count', { get(){}, set(){} }) //模擬實現(xiàn)一下 let person = { name: '張三', age: 15, } let p = {} Object.defineProperty( p, 'name', { configurable: true, //配置這個屬性表示可刪除的，否則delete p.name 是刪除不了的 false get(){ //有人讀取name屬性時調(diào)用 return person.name }, set(value){ //有人修改時調(diào)用 person.name = value } })
- 存在問題：
1. 新增屬性。刪除屬性。界面不會更新
2. 直接通過下表修改數(shù)組，界面不會自動更新
//模擬vue3中實現(xiàn)響應(yīng)式 let person = { name: '張三', age: 15, } //我們管p叫做代理數(shù)據(jù)，管person叫源數(shù)據(jù) const p = new Proxy(person,{ //target代表的是person這個源對象，propName代表讀取或者寫入的屬性名 get(target,propName){ console.log('有人讀取了p上面的propName屬性') return target[propName] }, //不僅僅是修改調(diào)用，增加的時候也會調(diào)用 set(target,propName,value){ console.log(`有人修改了p身上的${propName}屬性，我要去更新界面了`) target[propName] = value }, deleteProperty(target,propName){ console.log(`有人刪除了p身上的${propName}屬性，我要去更新界面了`) return delete target[propName] } }) //映射到person上了，捕捉到修改，那就是響應(yīng)式啊
//vue3底層源碼不是我們上面寫的那么low，實現(xiàn)原理一樣，但是用了一個新的方式 window.Reflect  let obj = { a: 1, b:2, } //傳統(tǒng)的只能通過try catch去捕獲異常，如果使用這種那么底層源碼將會有一堆try catch try{ Object.defineProperty( obj, 'c', { get(){ return 3 }, }) Object.defineProperty( obj, 'c', { get(){ return 4 }, }) } catch(error) { console.log(error) } //新的方式： 通過Reflect反射對象去操作，相對來說要舒服一點，不會要那么多的try catch const x1 = Reflect.defineProperty( obj, 'c', { get(){ return 3 }, }) const x2 = Reflect.defineProperty( obj, 'c', { get(){ return 3 }, }) //x1,和x2是有返回布爾值的 if(x2){ console.log('某某操作成功了') }else { console.log('某某操作失敗了') }
let person = { name: '張三', age: 15, } //我們管p叫做代理數(shù)據(jù)，管person叫源數(shù)據(jù) const p = new Proxy(person,{ //target代表的是person這個源對象，propName代表讀取或者寫入的屬性名 get(target,propName){ console.log('有人讀取了p上面的propName屬性') return Reflect.get(target, propName) }, //不僅僅是修改調(diào)用，增加的時候也會調(diào)用 set(target,propName,value){ console.log(`有人修改了p身上的${propName}屬性，我要去更新界面了`) Reflect.set(target, propName, value) }, deleteProperty(target,propName){ console.log(`有人刪除了p身上的${propName}屬性，我要去更新界面了`) return Reflect.deleteProperty(target,propName) } })
從定義數(shù)據(jù)角度對比：
從原理角度對比：
從使用角度對比：
//父組件 <script setup> // This starter template is using Vue 3 <script setup> SFCs // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup import HelloWorld from './components/test3.vue'; const hello = (val) =>{ console.log('傳遞的參數(shù)是：'+ val); } </script> <template> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="傳遞吧" @hello="hello"> <template v-slot:cacao> <span>是插槽嗎</span> </template> <template v-slot:qwe> <span>meiyou</span> </template> </HelloWorld> </template>
//子組件 export default { name: 'test3', props: ['msg'], emits:['hello'], //這里setup接收兩個參數(shù)，一個是props，一個是上下文context setup(props,context){ /**
* props就是父組件傳來的值，但是他是Porxy類型的對象
* >Proxy:{msg:'傳遞吧'}
* 可以當作我們自定義的reactive定義的數(shù)據(jù)
*/ /**
* context是一個對象 包含以下內(nèi)容：
* 1.emit觸發(fā)自定義事件的
* 2.attrs 相當于vue2里面的 $attrs 包含：組件外部傳遞過來，但沒有在props配置中聲明的屬性
* 3.slots 相當于vue2里面的 $slots
* 3.expose 是一個回調(diào)函數(shù)
*/ console.log(context.slots); let person = reactive({ name: '張三', age: 17, }) function changeInfo(){ context.emit('hello', 666) } //返回對象 return { person, changeInfo } //返回渲染函數(shù)（了解） 這個h是個函數(shù) //return () => h('name','age') } } </script>
<template> <h1>一個人的信息</h1> <div> 姓： <input type="text" v-model="person.firstName"> 名：<input type="text" v-model="person.lastName"> <div> <span>簡名：{{person.smallName}}</span> <br> <span>全名：{{person.fullName}}</span> </div> </div> </template> <script> import { computed,reactive } from 'vue' export default { name: 'test4', props: ['msg'], emits:['hello'], setup(){ let person = reactive({ firstName: '張', lastName: '三' }) //簡寫形式 person.smallName = computed(()=>{ return person.firstName + '-' + person.lastName }) //完全形態(tài) person.fullName = computed({ get(){ console.log('調(diào)用get'); return person.firstName + '*' + person.lastName }, set(value){ console.log('調(diào)用set'); const nameArr = value.split('*') person.firstName = nameArr[0] person.firstName = nameArr[1] }, }) return { person, } }, } </script>
1.監(jiān)視reactive定義的響應(yīng)式數(shù)據(jù)的時候：oldValue無法獲取到正確的值，強制開啟了深度監(jiān)視（deep配置無效）
2.監(jiān)視reactive定義的響應(yīng)式數(shù)據(jù)中某個屬性的時候：deep配置有效
具體請看下面代碼以及注釋
<template> <h1>當前求和為： {{sum}}</h1> <button @click="sum++">點我+1</button> <hr> <h1>當前信息為： {{msg}}</h1> <button @click="msg+='!' ">修改信息</button> <hr> <h2>姓名： {{person.name}}</h2> <h2>年齡： {{person.age}}</h2> <button @click="person.name += '~' ">修改姓名</button> <button @click="person.age++">增長年齡</button> </template> <script> //使用setup的注意事項 import { watch,ref,reactive } from 'vue' export default { name: 'test5', props: ['msg'], emits:['hello'], setup(){ let sum = ref(0) let msg = ref('你好啊') let person = reactive({ name: '張三', age: 18, job:{ salary: '15k' }, }) //由于這里的this是指的是undefined，所以使用箭頭函數(shù) //情況一：監(jiān)視ref所定義的一個響應(yīng)式數(shù)據(jù) // watch(sum, (newValue,oldValue)=>{ // console.log('新的值',newValue); // console.log('舊的值',oldValue); // }) //情況二：監(jiān)視ref所定義的多個響應(yīng)式數(shù)據(jù) watch([sum,msg], (newValue,oldValue)=>{ console.log('新的值',newValue); //['sum的newValue', 'msg的newValue'] console.log('舊的值',oldValue); //['sum的oldValue', 'msg的oldValue'] },{immediate: true,deep:true}) //這里vue3的deep是有點小問題的，可以不用deep，（隱式強制deep） //情況三：監(jiān)視reactive定義的所有響應(yīng)式數(shù)據(jù), //1.此處無法獲取正確的oldValue（newValue與oldValue是一致值）,且目前無法解決 //2.強制開啟了深度監(jiān)視（deep配置無效） /**
* 受到碼友熱心評論解釋： 此處附上碼友的解釋供大家參考：
* 1. 當你監(jiān)聽一個響應(yīng)式對象的時候，這里的newVal和oldVal是一樣的，因為他們是同一個對象【引用地址一樣】，
* 即使里面的屬性值會發(fā)生變化，但主體對象引用地址不變。這不是一個bug。要想不一樣除非這里把對象都換了
*
* 2. 當你監(jiān)聽一個響應(yīng)式對象的時候，vue3會隱式的創(chuàng)建一個深層監(jiān)聽，即對象里只要有變化就會被調(diào)用。
* 這也解釋了你說的deep配置無效，這里是強制的。
*/ watch(person, (newValue,oldValue)=>{ console.log('新的值',newValue); console.log('舊的值',oldValue); }) //情況四：監(jiān)視reactive對象中某一個屬性的值， //注意： 這里監(jiān)視某一個屬性的時候可以監(jiān)聽到oldValue watch(()=>person.name, (newValue,oldValue)=>{ console.log('新的值',newValue); console.log('舊的值',oldValue); }) //情況五：監(jiān)視reactive對象中某一些屬性的值 watch([()=>person.name,()=>person.age], (newValue,oldValue)=>{ console.log('新的值',newValue); console.log('舊的值',oldValue); }) //特殊情況: 監(jiān)視reactive響應(yīng)式數(shù)據(jù)中深層次的對象，此時deep的配置奏效了 watch(()=>person.job, (newValue,oldValue)=>{ console.log('新的值',newValue); console.log('舊的值',oldValue); },{deep:true}) //此時deep有用 return { sum, msg, person, } }, } </script>
<script> //使用setup的注意事項 import { ref,reactive,watchEffect } from 'vue' export default { name: 'test5', props: ['msg'], emits:['hello'], setup(){ let sum = ref(0) let msg = ref('你好啊') let person = reactive({ name: '張三', age: 18, job:{ salary: '15k' }, }) //用處： 如果是比較復(fù)雜的業(yè)務(wù)，發(fā)票報銷等，那就不許需要去監(jiān)聽其他依賴，只要發(fā)生變化，立馬重新回調(diào) //注重邏輯過程，你發(fā)生改變了我就重新執(zhí)行回調(diào)，不用就不執(zhí)行，只執(zhí)行一次 watchEffect(()=>{ //這里面你用到了誰就監(jiān)視誰，里面就發(fā)生回調(diào) const x1 = sum.value
console.log('我調(diào)用了'); }) return { sum, msg, person, } }, } </script>
<template> <h1>生命周期</h1> <p>當前求和為： {{sum}}</p> <button @click="sum++">加一</button> </template> <script> //使用setup的注意事項 import { ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue' export default { name: 'test7', setup(){ let sum = ref(0) //通過組合式API的形式去使用生命周期鉤子 /**
* beforeCreate 和 created 這兩個生命周期鉤子就相當于 setup 所以，不需要這兩個
*
* beforeMount ===> onBeforeMount
* mounted ===> onMounted
* beforeUpdate ===> onBeforeUpdate
* updated ===> onUpdated
* beforeUnmount ===> onBeforeUnmount
* unmounted ===> onUnmounted
*/ console.log('---setup---'); onBeforeMount(()=>{ console.log('---onBeforeMount---'); }) onMounted(()=>{ console.log('---onMounted---'); }) onBeforeUpdate(()=>{ console.log('---onBeforeUpdate---'); }) onUpdated(()=>{ console.log('---onUpdated---'); }) onBeforeUnmount(()=>{ console.log('---onBeforeUnmount---'); }) onUnmounted(()=>{ console.log('---onUnmounted---'); }) return { sum } }, //這種是外層的寫法，如果想要使用組合式api的話需要放在setup中 beforeCreate(){ console.log('---beforeCreate---'); }, created(){ console.log('---created---'); }, beforeMount(){ console.log('---beforeMount---'); }, mounted(){ console.log('---mounted---'); }, beforeUpdate(){ console.log('---beforeUpdate---'); }, updated(){ console.log('---updated---'); }, //卸載之前 beforeUnmount(){ console.log('---beforeUnmount---'); }, //卸載之后 unmounted(){ console.log('---unmounted---'); } } </script>
//usePoint.js import {reactive,onMounted,onBeforeUnmount } from 'vue' function savePoint(){ //實現(xiàn)鼠標打點的數(shù)據(jù) let point = reactive({ x: null, y: null }) //實現(xiàn)鼠標點的方法 const savePoint = (e)=>{ point.x = e.pageX
point.y = e.pageY } //實現(xiàn)鼠標打點的生命周期鉤子 onMounted(()=>{ window.addEventListener('click',savePoint) }) onBeforeUnmount(()=>{ window.removeEventListener('click',savePoint) }) return point } export default savePoint
//組件test.vue <template> <p>當前求和為： {{sum}} </p> <button @click="sum++">加一</button> <hr> <h2>當前點擊時候的坐標： x: {{point.x}} y:{{point.y}}</h2> </template> <script> import { ref } from 'vue' import usePoint from '../hooks/usePoint' export default { name: 'test8', setup(props,context){ let sum = ref(0) let point = usePoint() return { sum, point } } } </script>
<template> <h2>姓名： {{name2}}</h2> <h2>年齡： {{person.age}}</h2> <button @click="person.name += '~' ">修改姓名</button> <button @click="person.age++">增長年齡</button> </template> <script> //使用setup的注意事項 import { reactive, toRef, toRefs } from 'vue' export default { name: 'test9', setup(){ let person = reactive({ name: '張三', age: 18, job:{ salary: '15k' }, }) //toRef const name2 = toRef(person,'name') //第一個參數(shù)是對象，第二個參數(shù)是鍵名 console.log('toRef轉(zhuǎn)變的是',name2); //ref定義的對象 //toRefs,批量處理對象的所有屬性 //const x = toRefs(person) //console.log('toRefs轉(zhuǎn)變的是',x); //是一個對象 return { person, name2, ...toRefs(person) } }, } </script>
//場景一： 使用<script setup> <script setup lang="ts"> const props = defineProps({ foo: { type: String, required: true }, bar: Number }) props.foo // string props.bar // number | undefined </script> //也可以將 props 的類型移入一個單獨的接口中 <script setup lang="ts"> interface Props { foo: string
bar?: number } const props = defineProps<Props>() </script> //場景二： 不使用<script setup> import { defineComponent } from 'vue' export default defineComponent({ props: { message: String }, setup(props) { props.message // <-- 類型：string } })
//1.一個類型字面量： defineProps<{ /*... */ }>() //2.對同一個文件中的一個接口或?qū)ο箢愋妥置媪康囊?/span> interface Props {/* ... */} defineProps<Props>() //3.接口或?qū)ο笞置骖愋涂梢园瑥钠渌募?dǎo)入的類型引用，但是，傳遞給 defineProps 的泛型參數(shù)本身不能是一個導(dǎo)入的類型： import { Props } from './other-file' // 不支持！ defineProps<Props>()
//當使用基于類型的聲明時，失去了對 props 定義默認值的能力。通過目前實驗性的響應(yīng)性語法糖來解決： <script setup lang="ts"> interface Props { foo: string
bar?: number } // 對 defineProps() 的響應(yīng)性解構(gòu) // 默認值會被編譯為等價的運行時選項 const { foo, bar = 100 } = defineProps<Props>() </script>
//場景一： 使用<script setup> <script setup lang="ts"> const emit = defineEmits(['change', 'update']) // 基于類型 const emit = defineEmits<{ (e: 'change', id: number): void (e: 'update', value: string): void }>() </script> //場景二： 不使用<script setup> import { defineComponent } from 'vue' export default defineComponent({ emits: ['change'], setup(props, { emit }) { emit('change') // <-- 類型檢查 / 自動補全 } })
import { ref } from 'vue' import type { Ref } from 'vue' //1.ref 會根據(jù)初始化時的值推導(dǎo)其類型： // 推導(dǎo)出的類型：Ref<number> const year = ref(2020) // => TS Error: Type 'string' is not assignable to type 'number'. year.value = '2020' //2.指定一個更復(fù)雜的類型，可以通過使用 Ref 這個類型： const year: Ref<string | number> = ref('2020') year.value = 2020 // 成功！ //3.在調(diào)用 ref() 時傳入一個泛型參數(shù)，來覆蓋默認的推導(dǎo)行為： // 得到的類型：Ref<string | number> const year = ref<string | number>('2020') year.value = 2020 // 成功！ //4.如果你指定了一個泛型參數(shù)但沒有給出初始值，那么最后得到的就將是一個包含 undefined 的聯(lián)合類型： // 推導(dǎo)得到的類型：Ref<number | undefined> const n = ref<number>()
import { reactive } from 'vue' //1.reactive() 也會隱式地從它的參數(shù)中推導(dǎo)類型： // 推導(dǎo)得到的類型：{ title: string } const book = reactive({ title: 'Vue 3 指引' }) //2.要顯式地標注一個 reactive 變量的類型，我們可以使用接口： interface Book { title: string
year?: number } const book: Book = reactive({ title: 'Vue 3 指引' })
import { ref, computed } from 'vue' //1.computed() 會自動從其計算函數(shù)的返回值上推導(dǎo)出類型： const count = ref(0) // 推導(dǎo)得到的類型：ComputedRef<number> const double = computed(() => count.value * 2) // => TS Error: Property 'split' does not exist on type 'number' const result = double.value.split('') //2.通過泛型參數(shù)顯式指定類型： const double = computed<number>(() => { // 若返回值不是 number 類型則會報錯 })
//在處理原生 DOM 事件時，應(yīng)該為我們傳遞給事件處理函數(shù)的參數(shù)正確地標注類型 <script setup lang="ts"> function handleChange(event) { // 沒有類型標注時 `event` 隱式地標注為 `any` 類型, // 這也會在 tsconfig.json 中配置了 "strict": true 或 "noImplicitAny": true 時報出一個 TS 錯誤。 console.log(event.target.value) } </script> <template> <input type="text" @change="handleChange" /> </template> //因此，建議顯式地為事件處理函數(shù)的參數(shù)標注類型,需要顯式地強制轉(zhuǎn)換 event 上的屬性： function handleChange(event: Event) { console.log((event.target as HTMLInputElement).value) }
/*
provide 和 inject 通常會在不同的組件中運行。要正確地為注入的值標記類型，
Vue 提供了一個 InjectionKey 接口，它是一個繼承自 Symbol 的泛型類型，
可以用來在提供者和消費者之間同步注入值的類型：
*/ import { provide, inject } from 'vue' import type { InjectionKey } from 'vue' const key = Symbol() as InjectionKey<string> provide(key, 'foo') // 若提供的是非字符串值會導(dǎo)致錯誤 const foo = inject(key) // foo 的類型：string | undefined //建議將注入 key 的類型放在一個單獨的文件中，這樣它就可以被多個組件導(dǎo)入。 //當使用字符串注入 key 時，注入值的類型是 unknown，需要通過泛型參數(shù)顯式聲明： const foo = inject<string>('foo') // 類型：string | undefined //注意注入的值仍然可以是 undefined，因為無法保證提供者一定會在運行時 provide 這個值。 //當提供了一個默認值后，這個 undefined 類型就可以被移除： const foo = inject<string>('foo', 'bar') // 類型：string //如果你確定該值將始終被提供，則還可以強制轉(zhuǎn)換該值： const foo = inject('foo') as string
//模板引用需要通過一個顯式指定的泛型參數(shù)和一個初始值 null 來創(chuàng)建： <script setup lang="ts"> import { ref, onMounted } from 'vue' const el = ref<HTMLInputElement | null>(null) onMounted(() => { el.value?.focus() }) </script> /**
注意為了嚴格的類型安全，有必要在訪問 el.value 時使用可選鏈或類型守衛(wèi)。這是因為直到組件被掛載前，
這個 ref 的值都是初始的 null，并且在由于 v-if 的行為將引用的元素卸載時也可以被設(shè)置為 null。
*/ <template> <input ref="el" /> </template>
//有時，你可能需要為一個子組件添加一個模板引用，以便調(diào)用它公開的方法。舉例來說，我們有一個 MyModal 子組件，它有一個打開模態(tài)框的方法 <!-- MyModal.vue --> <script setup lang="ts"> import { ref } from 'vue' const isContentShown = ref(false) const open = () => (isContentShown.value = true) defineExpose({ open }) </script> //為了獲取 MyModal 的類型，我們首先需要通過 typeof 得到其類型，再使用 TypeScript 內(nèi)置的 InstanceType 工具類型來獲取其實例類型： <!-- App.vue --> <script setup lang="ts"> import MyModal from './MyModal.vue' const modal = ref<InstanceType<typeof MyModal> | null>(null) const openModal = () => { modal.value?.open() } </script> //注意，如果你想在 TypeScript 文件而不是在 Vue SFC 中使用這種技巧，需要開啟 Volar 的Takeover 模式。
import { useStore } from 'vuex' export default { setup () { const store = useStore() } }
import { computed } from 'vue' import { useStore } from 'vuex' export default { setup () { const store = useStore() return { // 在 computed 函數(shù)中訪問 state count: computed(() => store.state.count), // 在 computed 函數(shù)中訪問 getter double: computed(() => store.getters.double) } } }
import { useStore } from 'vuex' export default { setup () { const store = useStore() return { // 使用 mutation increment: () => store.commit('increment'), // 使用 action asyncIncrement: () => store.dispatch('asyncIncrement') } } }
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://www.yvirxh.cn