上一篇文章:快速使用Vue3最新的15個常用API(1W5+字詳解,建議收藏),我向大家介紹了關於Vue3常用的15個API的使用詳情,幫助大家快速上手Vue3,也很高興收到大家的支持,同樣也有一些人提出了疑問,尤其是對於 如何獲取當前組件實例 這個問題的討論最爲激烈,這裏我們就對其進行一些補充
- 公衆號:前端印象
- 不定時有送書活動,記得關注~
- 關注後回覆對應文字領取:【面試題】、【前端必看電子書】、【數據結構與算法完整代碼】、【前端技術交流羣】
在Vue2的各個組件中,我們頻繁地使用 this
,即獲取當前組件實例,是因爲每個組件的數據變量、方法都要通過組件實例去獲取。
例如:
<script>
export default {
name: 'App',
data: {
return {
name: '前端印象',
age: 22
}
},
methods: {
increase() {
this.age += 1
}
},
mounted() {
this.increase()
}
}
</script>
在上面這段代碼中很清晰的看到,首先在 data
中聲明瞭兩個響應式數據,分別爲 name
、age
;同時定義了一個方法 increase
,該方法是將 age
的值 +1
;在當前組件掛載後,調用 increase
方法
無論是獲取數據 age
,還是獲取方法 increase
,我們都是從 this
,即當前組件實例中獲取的
而到了Vue3,大部分甚至可以說全部的關鍵代碼都集中寫在了 setup
函數內,並且在該函數內是無法通過 this
獲取到當前組件實例的,那是因爲所有的變量、方法都可以直接使用
例如:
<script>
import {
ref, onMounted} from 'vue'
export default {
name: 'App',
setup() {
const name = ref('前端印象')
const age = ref(22)
function increase() {
age.value += 1
}
onMounted(() => {
increase()
})
return {
name, age}
}
}
</script>
這段代碼與上一段代碼功能一模一樣,但從始至終都沒有通過組件實例去獲取數據變量或方法,這無疑減少了很多的重複代碼,例如多次使用 this
,想必Vue3的初衷也不需要我們去獲取當前組件實例
但是上一篇文章講到的 getCurrentInstance
這個方法確實是可以獲取到組件實例的,如圖
但這隻有在 development
,即開發環境下才能獲取到當前組件的實例,換句話說就是這個方法只是在開發環境下用於調試使用的;
那麼在生產環境下是什麼樣的呢?我們把項目打包一下,並打印一下看看,如圖所示:
很明顯,在 ctx
中根本沒有看到當前組件實例的影子,而只有一個 _
,我們點進去看看裏邊是什麼,如圖所示
通過不斷的點擊,我們發現 _
裏面是無限循環的 getCurrentInstance
方法的返回結果,所以說該方法的返回結果在開發環境和生產環境下還是有所區別的
那麼,問題又來了,Vue3我們到底如何去獲取組件實例呢?這裏我想說哈,都這樣了,還獲取啥組件實例啊,不信我給你捋一遍
1. 獲取數據
Vue2:
<script>
export default {
name: 'App',
data: {
return {
name: '前端印象',
age: 22
}
},
mounted() {
console.log(this.name)
console.log(this.age)
}
}
</script>
Vue3:
<script>
import {
ref} from 'vue'
export default {
name: 'App',
setup() {
const name = ref('前端印象')
const age = ref(22)
console.log(name.value)
console.log(age.value)
return {
name, age}
}
}
</script>
2. 使用方法
Vue2:
<script>
export default {
name: 'App',
methods: {
show() {
console.log('show方法被調用')
}
},
mounted() {
this.show()
}
}
</script>
Vue3:
<script>
import {
onMounted} from 'vue'
export default {
name: 'App',
setup() {
function show() {
console.log('show方法被調用')
}
onMounted(() => {
show()
})
}
}
</script>
3. 獲取當前組件根元素
Vue2:
<template>
<div id="app" ref="root">
<p class="child"></p>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
const el = this.$refs.root
console.log(el)
}
}
</script>
Vue3:
<template>
<div id="app" ref="root">
<p class="child"></p>
</div>
</template>
<script>
import {
ref, onMounted} from 'vue'
export default {
name: 'App',
setup() {
const root = ref(null)
onMounted(() => {
console.log(root.value)
})
}
}
</script>
4. 子組件向父組件通信
Vue2:
<script>
export default {
name: 'App',
methods: {
change() {
this.$emit('valueChange', 3)
}
}
}
</script>
Vue3:
<script>
export default {
name: 'App',
setup(props, context) {
function change() {
context.emit('valueChange', 3)
}
}
}
</script>
5. 獲取Vuex對象
Vue2:
<script>
export default {
name: 'App',
mounted() {
console.log(this.$store.state.name)
this.$store.commit('show')
}
}
</script>
Vue3:
<script>
import {
onMounted} from 'vue'
import {
useStore} from 'vuex'
export default {
name: 'App',
setup(props, context) {
const store = useStore()
onMounted(() => {
console.log(store.name)
store.commit('show')
})
}
}
</script>
總結:
大家不要依賴 getCurrentInstance
方法去獲取組件實例來完成一些主要功能,否則在項目打包後,一定會報錯的。
關注公衆號「前端印象」,每日更新高質量前端技術文章,還能領取完整版JS版的數據結構與算法代碼、近年常考面試題等福利