保姆級(jí)Vue3開發(fā)教程分享
獲取 this
Vue2 中每個(gè)組件里使用 this 都指向當(dāng)前組件實(shí)例,this 上還包含了全局掛載的東西,都知道 this.xxx
啥都有
而 Vue3 中沒有 this,如果想要類似的用法有兩種,一是獲取當(dāng)前組件實(shí)例,二是獲取全局實(shí)例,如下自己可以去打印出來看看
<script setup> import { getCurrentInstance } from 'vue' // proxy 就是當(dāng)前組件實(shí)例,可以理解為組件級(jí)別的 this,沒有全局的、路由、狀態(tài)管理之類的 const { proxy, appContext } = getCurrentInstance() // 這個(gè) global 就是全局實(shí)例 const global = appContext.config.globalProperties </script>
全局注冊(cè)(屬性/方法)
Vue2 中我們要往全局上掛載東西通常就是如下,然后在所有組件里都可以通過 this.xxx
獲取到了
Vue.prototype.xxx = xxx
而 Vue3 中不能這么寫了,換成了一個(gè)能被所有組件訪問到的全局對(duì)象,就是上面說的全局實(shí)例的那個(gè)對(duì)象,比如在 main.js
中做全局注冊(cè)
// main.js import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // 添加全局屬性 app.config.globalProperties.name = '沐華'
在其他組件中調(diào)用
<script setup> import { getCurrentInstance } from 'vue' const { appContext } = getCurrentInstance() const global = appContext.config.globalProperties console.log(global.name) // 沐華 </script>
獲取 DOM
<template> <el-form ref="formRef"></el-form> <child-component /> </template> <script setup lang="ts"> import ChildComponent from './child.vue' import { getCurrentInstance } from 'vue' import { ElForm } from 'element-plus' // 方法一,這個(gè)變量名和 DOM 上的 ref 屬性必須同名,會(huì)自動(dòng)形成綁定 const formRef = ref(null) console.log(formRef.value) // 這就獲取到 DOM 了 // 方法二 const { proxy } = getCurrentInstance() proxy.$refs.formRef.validate((valid) => { ... }) // 方法三,比如在 ts 里,可以直接獲取到組件類型 // 可以這樣獲取子組件 const formRef = ref<InstanceType<typeof ChildComponent>>() // 也可以這樣 獲取 element ui 的組件類型 const formRef = ref<InstanceType<typeof ElForm>>() formRef.value?.validate((valid) => { ... }) </script>
初始化
Vue2 中進(jìn)入頁面就請(qǐng)求接口,或者其他一些初始化的操作,一般放在 created
或 mounted
,而 Vue3 中 beforeCreated
和 created
這倆鉤子就不用了,因?yàn)?setup 在這倆之前執(zhí)行,還要這倆的話就多此一舉了
所以但凡是以前你用在 beforeCreated / created / beforeMounted / mounted
這幾個(gè)鉤子里的內(nèi)容,在 Vue3 中要么放在 setup
里,要么放在 onMounted
里
<script setup> import { onMounted } from 'vue' // 請(qǐng)求接口函數(shù) const getData = () => { xxxApi.then(() => { ... }) } onMounted(() => { getData() }) </script>
解除綁定
Vue2 中一般清除定時(shí)器、監(jiān)聽之類的操作有兩種方法:
- 一是用
$once
搭配hook: BeforeDestroy
使用,這個(gè) Vue3 不支持了 - 二是用
beforeDestroy / deactivated
這倆鉤子,Vue3 中只是把鉤子函數(shù)重命名了一下
<script setup> import { onBeforeUnmount, onDeactivated } from 'vue' // 組件卸載前,對(duì)應(yīng) Vue2 的 beforeDestroy onBeforeUnmount(() => { clearTimeout(timer) window.removeAddEventListener('...') }) // 退出緩存組件,對(duì)應(yīng) Vue2 的 deactivated onDeactivated(() => { clearTimeout(timer) window.removeAddEventListener('...') }) </script>
ref 和 reactive
這兩都是用于創(chuàng)建響應(yīng)式對(duì)象,ref
通常用于創(chuàng)建基礎(chǔ)類型,reactive
通常用于創(chuàng)建響應(yīng)式,這是官方推薦的,現(xiàn)實(shí)中也不盡然,有人也用 ref
來定義數(shù)組,也有人一個(gè)組件只定義一個(gè) reactive
,所有數(shù)據(jù)都放里面,就像 Vue2 的 data
一樣,也有人都用
需要知道的有兩點(diǎn):
ref
如果傳入的是引用類型,內(nèi)部源碼也是調(diào)用reactive
來實(shí)現(xiàn)的ref
返回的屬性在template
中使用,直接用就是了,但是在 JS 中使用,需要通過.value
獲取,如下。因?yàn)?ref 返回的是一個(gè)包裝對(duì)象
<template> <div>{{ count }}</div> </template> <script setup> import { ref, reactive } from 'vue' const count = ref(1) // 有人這么用 const arr = ref([]) console.log(arr.value) // [] // 也有人這么用,一個(gè)組件里所有的屬性全部定義在一個(gè)對(duì)象里,有點(diǎn) Vue2 data 的味道 const data = reactive({ name: '沐華', age: 18, ... }) console.log(data.name) // 沐華 // 也有人一個(gè)組件里 ref 和 reactive 兩種都用,隨便你 </script>
為什么 ref
要返回一個(gè)包裝對(duì)象?Vue2 中 data 都是返回一個(gè)對(duì)象這都知道
因?yàn)閷?duì)象引用類型,可以用來做代理或劫持,如果只返回基礎(chǔ)類型的話,存儲(chǔ)在棧中,執(zhí)行棧里執(zhí)行完就回收了,沒有辦法添加代理或劫持,自然就沒辦法追蹤后續(xù)的變化,所以不得不返回一個(gè)對(duì)象,這樣才能有響應(yīng)式
toRef 和 toRefs
這兩共同點(diǎn)就是用來創(chuàng)建響應(yīng)式的引用的,主要用來取出響應(yīng)式對(duì)象里的屬性,或者解構(gòu)響應(yīng)式對(duì)象,解構(gòu)出來的屬性值依然是響應(yīng)式屬性,如果不用這兩直接解構(gòu)的話是會(huì)丟失響應(yīng)式效果的
主要就是方便我們使用直接變量 xxx
,而不需要 data.xxx
。并且我們修改 xxx
的時(shí)候也是直接修改源對(duì)象屬性的
這兩的區(qū)別:帶 s 和不帶 s,就是單數(shù)和復(fù)數(shù)嘛,意思就是取一個(gè)和取一堆咯
<script setup> import { reactive, toRef, toRefs } from 'vue' const data = reactive({ name: '沐華', age: 18 }) // 這樣雖然能拿到 name / age,但是會(huì)變成普通變量,沒有響應(yīng)式效果了 const { name, age } = data // 取出來一個(gè)響應(yīng)式屬性 const name = toRef(data, 'name') // 這樣解構(gòu)出來的所有屬性都是有響應(yīng)式的 const { name, age } = toRefs(data) // 不管是 toRef 還是 toRefs,這樣修改是會(huì)把 data 里的 name 改掉的 // 就是會(huì)改變?cè)磳?duì)象屬性,這才是響應(yīng)式該有的樣子 name.value = '沐沐華華' </script>
watch
watch 就是用來監(jiān)聽一個(gè)已有屬性,發(fā)生變化的時(shí)候做某些操作,Vue2 中常用有如下三種寫法
watch: { userId: 'getData', userName (newName, oldName) { this.getData() }, userInfo: { handler (newVal, newVal) { this.getData() }, immediate: true, deep: true } }
而 Vue3 中監(jiān)聽的寫法就豐富得多了
Vue3 的 watch 是一個(gè)函數(shù),能接收三個(gè)參數(shù),參數(shù)一是監(jiān)聽的屬性,參數(shù)二是接收新值和老值的回調(diào)函數(shù),參數(shù)三是配置項(xiàng)
<script setup> import { watch, ref, reactive } from 'vue' const name = ref('沐華') const data = reactive({ age: 18, money: 100000000000000000000, children: [] }) // 監(jiān)聽 ref 屬性 watch(name, (newName, oldName) => { ... }) // 監(jiān)聽其他屬性、路由或者狀態(tài)管理的都這樣 watch( () => data.age, (newAge, oldAge) => { ... } ) // 監(jiān)聽多個(gè)屬性,數(shù)組放多個(gè)值,返回的新值和老值也是數(shù)組形式 watch([data.age, data.money], ([newAge, oldAge], [newMoney, oldMoney]) => { ... }) // 第三個(gè)參數(shù)是一個(gè)對(duì)象,為可配置項(xiàng),有5個(gè)可配置屬性 watch(data.children, (newList, oldList) => { ... }, { // 這兩個(gè)和 Vue2 一樣,沒啥說的 immediate: true, deep: true, // 回調(diào)函數(shù)的執(zhí)行時(shí)機(jī),默認(rèn)在組件更新之前調(diào)用。更新后調(diào)用改成post flush: 'pre', // 默認(rèn)值是 pre,可改成 post 或 sync // 下面兩個(gè)是調(diào)試用的 onTrack (e) { debugger } onTrigger (e) { debugger } }) </script>
關(guān)于副作用,在 watch 回調(diào)函數(shù)中能接收第三個(gè)參數(shù),為清除副作用的函數(shù),它的執(zhí)行機(jī)制默認(rèn)在更新之前調(diào)用,比如如下代碼,當(dāng) key 觸發(fā)更新時(shí)會(huì)先打印 222
再打印 沐華
,如果需要在更新之后調(diào)用,可以在 watch 第三個(gè)配置項(xiàng)中添加 flush: post
,
// 回調(diào)函數(shù)接收一個(gè)參數(shù),為清除副作用的函數(shù) watch(key, (newKey, oldKey, onInvalidate) => { console.log('沐華') // 獲取DOM默認(rèn)獲取到的是更新前的dom,如果是flush: post,可以獲取到更新后的dom console.log('DOM節(jié)點(diǎn):', dom.innterHTML) onInvalidate(() => { console.log(2222) }) })
監(jiān)聽還沒完呢
尤大:嘿嘿~
watchEffect
Vue3 中除了 watch 還增加了一個(gè) watchEffect。區(qū)別是:
- watch 是對(duì)傳入的一個(gè)或多個(gè)值進(jìn)行監(jiān)聽,觸發(fā)時(shí)會(huì)返回新值和老值,且默認(rèn)第一次不會(huì)執(zhí)行
- watchEffect 是傳入一個(gè)立即執(zhí)行函數(shù),所以默認(rèn)第一次就會(huì)執(zhí)行,且不需要傳入監(jiān)聽內(nèi)容,會(huì)自動(dòng)收集函數(shù)內(nèi)的數(shù)據(jù)源作為依賴,當(dāng)依賴發(fā)生變化時(shí)會(huì)重新執(zhí)行函數(shù)(有點(diǎn)像computed的味道),而且不會(huì)返回新值和老值
- 清除副作用和副作用的刷新時(shí)機(jī)是一樣的,區(qū)別是 watch 中會(huì)作為回調(diào)的第三個(gè)參數(shù)傳入,watchEffect 中是回調(diào)函數(shù)的第一個(gè)參數(shù)
- 正常情況下組件銷毀/卸載后這兩都會(huì)自動(dòng)停止監(jiān)聽,但也有例,比如異步的方式在
setTimeout
里創(chuàng)建的監(jiān)聽就都需要手動(dòng)停止監(jiān)聽,停止方式如下
// 停止監(jiān)聽 const unwatch = watch('key', callback) const unwatchEffect = watchEffect(() => {}) // 需要的時(shí)候手動(dòng)停止監(jiān)聽 unwatch() unwatchEffect()
watchEffect 使用:
<script setup> import { watchEffect } from 'vue' // 正常使用 watchEffect(() => { // 會(huì)自動(dòng)收集這個(gè)函數(shù)使用到的屬性作為依賴,進(jìn)行監(jiān)聽 // 監(jiān)聽的是 userInfo.name 屬性,不會(huì)監(jiān)聽 userInfo console.log(userInfo.name) }) // 有兩個(gè)參數(shù),參數(shù)一是觸發(fā)監(jiān)聽回調(diào)函數(shù),參數(shù)二是可選配置項(xiàng) watchEffect(() => {...}, { // 這里是可配置項(xiàng),意思和 watch 是一樣的,不過這只有3個(gè)可配置的 flush: 'pre', onTrack (e) { debugger } onTrigger (e) { debugger } }) // 回調(diào)函數(shù)接收一個(gè)參數(shù),為清除副作用的函數(shù),和 watch 的同理 watchEffect(onInvalidate => { console.log('沐華') onInvalidate(() => { console.log(2222) }) }) </script>
watchEffect 如果需要修改配置項(xiàng) flush 為 post 或 sync 時(shí),可以直接使用別名,如下
watchEffect(() => {...}, { flush: 'post', }) // 和下面這個(gè)是一樣的 watchPostEffect(() => {}) ----------------------------- watchEffect(() => {...}, { flush: 'sync', }) // 和下面這個(gè)是一樣的 watchSyncEffect(() => {})
computed
Vue2 中 computed 最見的使用場(chǎng)景一般有: mapGetters/mapState
獲取狀態(tài)管理的屬性、 獲取 url 上的屬性、條件判斷、類型轉(zhuǎn)換之類的,支持函數(shù)和對(duì)象兩種寫法
而 Vue3 中 computed
不再是一個(gè)對(duì)象,而是一個(gè)函數(shù),用法其實(shí)基本差不多,函數(shù)第一個(gè)參數(shù)是偵聽器源,用于返回計(jì)算的新值,也支持對(duì)象寫法,第二個(gè)參數(shù)可用于調(diào)試
<script setup> import { computed } from 'vue' // 獲取 url 上的 type 屬性 const type = computed(() => Number(this.$route.query.type || '0')) // 對(duì)象寫法 const visible = computed({ get () { return this.visible }, set (val) { this.$emit('input', val) } }) // computed 第二個(gè)參數(shù)也是一個(gè)對(duì)象,調(diào)試用的 const hehe = computed(參數(shù)一上面兩種都可, { onTrack (e) { debugger } onTrigger (e) { debugger } }) </script>
nextTick
nextTick
的使用方法,除了不能用 this
其他的和 Vue2 一模一樣,還是三種方式
<script setup> import { nextTick} from 'vue' // 方式 一 const handleClick = async () => { await nextTick() console.log('沐華') } // 方式二 nextTick(() => { console.log('沐華') }) // 方式三 nextTick().then(() => { console.log('沐華') }) </script>
mixins 和 hooks
Vue2 中邏輯的抽離復(fù)用一般用 mixins,缺點(diǎn)有三:
- 沒有獨(dú)立命名空間,mixins 會(huì)和組件內(nèi)部產(chǎn)生命名沖突
- 不去翻代碼不知道引入的 mixins 里面有啥
- 引入多個(gè) mixins 時(shí)不知道自己使用的是來自哪一個(gè) mixins 的
Vue3 中邏輯抽離復(fù)用的 hooks 語法,其實(shí)就是一個(gè)函數(shù),可以傳參,拿返回值來用?;蛘呖梢赃@樣理解:平時(shí)要封裝公用的方法是怎么寫的?Vue3 里就可以怎么寫
// xxx.js expport const getData = () => {} export default function unInstance () { ... return {...} } // xxx.vue import unInstance, { getData } from 'xx.js' const { ... } = unInstance() onMounted(() => { getData() })
關(guān)于 hooks 如何寫出更優(yōu)雅的代碼,還個(gè)需要多寫,多實(shí)踐
組件通信
Vue3 組件通信的方式,有如下幾種
- props + defineProps
- defineEmits
- defineExpose / ref
- useAttrs
- v-model(支持多個(gè))
- provide / inject
- Vuex / Pinia
關(guān)于 Vue 組件通信的使用方式,去年我寫過一篇文章,上面都羅列的很詳細(xì)了,就不搬過來了
多個(gè) v-model
Vue2 中每個(gè)組件上只能寫一個(gè) v-model,子組件沒有寫 model
的話,默認(rèn)在 props
接收 value
即可,修改就是用 this.$emit('input')
事件
Vue3 中每個(gè)組件每個(gè)組件上支持寫多個(gè) v-model,沒有了 .sync
和 model
重命名的操作,也不需要了,寫v-model 的時(shí)候就需要把命名一起寫上去了,如下:
// 父組件寫法 <template> <child v-model:name="name" v-model:age="age" /> </template> <script setup> import { ref } from "vue" const name = ref('沐華') const age = ref(18) </script> // 子組件 <script setup> const emit = defineEmits(['update:name', 'update:age']) const handleClick = () => { console.log('點(diǎn)擊了') emit('update:name', '這是新的名字') } </script>
狀態(tài)管理
Vuex 會(huì)的就不用說了,不會(huì)的就直接學(xué) Pinia 吧
Pinia 的使用方式,我之前也寫過一篇文章,也不搬過來了
上手 Vue 新的狀態(tài)管理 Pinia,一篇文章就夠了
路由
Vue2 中的 $route
和 $router
如下,可以自己打印出來看一下
<script setup> import { useRoute, useRouter } from "vue-router" // route 對(duì)應(yīng) this.$route const route = useRoute() // router 對(duì)應(yīng) this.$router const router = useRouter() </script>
template
Vue2 中只能有一個(gè)根節(jié)點(diǎn),而 Vue3 中支持多個(gè)根節(jié)點(diǎn),這個(gè)大家都知道
其實(shí)本質(zhì)上 Vue3 每個(gè)組件還是一個(gè)根節(jié)點(diǎn),因?yàn)?DOM 樹只能是樹狀結(jié)構(gòu)的,只是 Vue3 在編譯階段新增了判斷,如果當(dāng)前組件不只一個(gè)根元素,就添加一個(gè) fragment
組件把這個(gè)多根組件的給包起來,相當(dāng)于這個(gè)組件還是只有一個(gè)根節(jié)點(diǎn)
<template> <div>1</div> <div>2</div> </template>
CSS 樣式穿透
Vue2 中在 scoped
中修改子組件或者組件庫中的組件樣式,改不了的情況下,就可以用樣式穿透,不管是 Less
還是 SASS
都是用 /dee/ .class {}
來做樣式穿透,而 Vue3 中就不支持 /deep/
的寫法了,換成 :deep(.class)
<style scoped> // 這樣寫不生效的話 .el-form { .el-form-item { ... } } // Vue2 中這樣寫 /deep/ .el-form { .el-form-item { ... } } // Vue3 中這樣寫 :deep(.el-form) { .el-form-item { ... } } </style> // 別再這樣加一個(gè)沒有 scoped 的 style 標(biāo)簽了,全都加到全局上去了 // <style lang="scss"> // .el-form { // .el-form-item { ... } // } // </style>
CSS 綁定 JS 變量
就是 CSS 中可以使用 JS 的變量來賦值,如下
<template> <div class="name">沐華</div> </template> <script setup> import { ref } from "vue" const str = ref('#f00') // 紅色 </script> <style scoped lang="scss"> .name { background-color: v-bind(str); // JS 中的色值變量 #f00 就賦值到這來了 } </style>
以上就是保姆級(jí)Vue3開發(fā)教程分享的詳細(xì)內(nèi)容,更多關(guān)于Vue3開發(fā)文檔的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue3集成json-editor-vue3的代碼實(shí)現(xiàn)
這篇文章主要介紹了Vue3集成json-editor-vue3的代碼實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11Vue自定義指令實(shí)現(xiàn)點(diǎn)擊右鍵彈出菜單示例詳解
這篇文章主要為大家介紹了Vue自定義指令實(shí)現(xiàn)點(diǎn)擊右鍵彈出菜單示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)
這篇文章主要介紹了詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)
今天小編就為大家分享一篇vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue-cli2 構(gòu)建速度優(yōu)化的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli2 構(gòu)建速度優(yōu)化的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01