全局屬性
vue2
- 對於一些第三方插件，vue2中通常使用prototype原型來掛載到vue對象中
import Vue from 'vue'
Vue.prototype.$http=Axiox
Vue.prototype.$echart= Echart
vue3
- vue3中提供了一個名為
globalProperties的全局屬性配置，可以代替vue2中的prototype
app.config.globalProperties.$http = Axios
app.config.globalProperties.$echart = Echart
- 使用$http
import {getCurrentInstance} from 'vue'
setup () {
const { ctx } = getCurrentInstance();
onMounted(() => {
console.log(ctx.$http)
})
.......
}
ref與v-for的生成
vue2
vue2中v-for與ref一起使用，批量模板引用的時候，獲取的ref為一個數組
<div v-for="i in 3" ref="setItemRef" :key="i">{{i}}</div> //這里是數組
mounted() {
console.log(this.$refs.setItemRef)
},
vue3
vue3 中ref綁定的是一個函數，
<div v-for="item in 3" :ref="setItemRef"></div> //這里綁定的是函數
setup(){
let itemRefs = []
const setItemRef = el => {
itemRefs.push(el)
}
onMounted(() => {
console.log(itemRefs)
})
}
二者獲取ref的dom方式有變化，但是獲取的結果相同
異步組件
在路由中，常常使用懶加載的方式來引入組件
vue2
component: () => import('@/views/homePage/index.vue'),
vue3
在vue3中引入了一個新的方法 --->defineAsyncComponent定義異步組件，來包裹vue2引入方式里面的內容
import { defineAsyncComponent } from 'vue'
component: defineAsyncComponent(() => import('./NextPage.vue'))
自定義指令
改變鈎子函數的命名
vue2
vue2中綁定的鈎子函數為
- bind - 指令綁定到元素后發生。只發生一次。
- inserted - 元素插入父 DOM 后發生。
- update - 當元素更新，但子元素尚未更新時，將調用此鈎子。
- componentUpdated - 一旦組件和子級被更新，就會調用這個鈎子。
- unbind - 一旦指令被移除，就會調用這個鈎子。也只調用一次。
vue3
將鈎子函數的命名與生命周期的鈎子函數命名相一致
- bind → beforeMount
- inserted → mounted
- beforeUpdate：新的！這是在元素本身更新之前調用的，很像組件生命周期鈎子。
- componentUpdated → updated
- beforeUnmount：新的！與組件生命周期鈎子類似，它將在卸載元素之前調用。
- unbind -> unmounted
在鈎子函數中引用組件實例的方式
某些情況下需要去獲取組件中實例的某些屬性
vue2
- 需要通過vnod來獲取實例
Vue.directive('has', {
inserted: (el, binding, vnode) => checkPermission(el, binding, vnode),
});
export const checkPermission = (el, binding, vnode) => {
...
const permissionArr = vnode.context.$store.state.permissionId //所擁有的所有權限id
...
}
vue3
- 從binding中去獲取對象
export const checkPermission = (el, binding, vnode) => {
...
const permissionArr =binding.instance.$store.state.permissionId //所擁有的所有權限id
...
}
v-bind="$attrs"
占坑
自定義元素元素的交互
is的用法
vue2
- 組件：
<component :is="currentTabComponent"></component>
- html標簽
<table>
<tr is="blog-post-row"></tr>
</table>
vue3
- 組件
<component is="currentTabComponent"></component>
- html標簽
<table>
<tr v-is="'blog-post-row'"></tr> // v-is類似綁定一個變量，而我們需要組件名，為字符串，所以用單引號包裹
</table>
事件
- vue3中去除了
$on、$off、$once、三種方法，僅保留$emit。
過濾器
vue3中移除了過濾器的功能，建議使用methods或者computed 來代替，實際上在vue2中也完全可以這兩種方式實現
局部過濾器
vue2
<p>{{message|toLower}}</p>
data() {
return {
message: 'ABC'
}
},
filters: {
toLower(value) {
return value.toLowerCase()
}
}
vue3
- vue3用computed或者methods來定義
<p>{{messageToLower}}</p>
import {
computed,
ref,
} from 'vue';
setup(){
let message = ref('ABC')
let messageToLower = computed(() => {
// console.log(message)
return message.value.toLowerCase()
})
return{
messageToLower,
}
}
全局過濾器
vue2
Vue.filter('toLower', (value)=> {
return value.toLowerCase()
})
vue3
- 在main.js中注冊
const app =createApp(App)
app.config.globalProperties.$filter={
toLower(value){
return value.toLowerCase()
}
}
- 使用
<p>{{$filters.toLower(message)}}</p>
根節點
vue2
- vue2的
template中只能存在一個根節點
<template>
<div id="app">
...
</div>
</template>
vue3
- vue3中可以存在多個節點
<template>
<div>...</div>
<a>...</a>
<p>...</p>
</template>
函數式組件
占坑
全局API
占坑
內聯模板
vue2
-
利用inline-template屬性
-
在vue2中文檔提示了這么一段話，所以幾乎沒有用過
不過，
inline-template會讓模板的作用域變得更加難以理解。所以作為最佳實踐，請在組件內優先選擇template選項或.vue文件里的一個<template>元素來定義模板。>
vue3
移除了此功能，
唯一的key
v-if中的key
vue2
- 在vue2中，v-if，v-else中的key是為了控制某個組件或者元素的復用
- 不帶key的話會復用，< hello-world >組件只創建一次
<!---->
<template v-if="loginType === 'username'">
<hello-world title="username"></hello-world>
</template>
<template v-else>
<hello-world title="email"></hello-world>
</template>
<button @click="changeType">切換</button>
- 帶key的話每次切換都會重新去渲染組件（前提是key不同）
<template v-if="loginType === 'username'">
<hello-world title="username" key="a"></hello-world>
</template>
<template v-else>
<hello-world title="email" key="b"></hello-world>
</template>
<button @click="changeType">切換</button>
vue3
vue3中默認是帶有key的，這個key始終保持唯一，與其他的key不同，不能通過故意使用相同的 key 來強制重用分支。
<div v-if="condition">Yes</div>
<div v-else>No</div>
template中v-for的key
vue2
vue2中，在template標簽上，可以使用v-for指令，但是不能綁定key，只能在子節點上面去綁定唯一的key
<template v-for="item in list">
<div :key="item.id">...</div>
</template>
vue3
vue3中可以將key綁定到template上
<template v-for="item in list" :key="item.id">
<div>...</div>
</template>