一：Vue.prototype 變?yōu)?app.config.globalProperties
~~~
// 之前 - Vue 2
Vue.prototype.$http = () => {}
// 之后 - Vue 3
const app = createApp({})
app.config.globalProperties.$http = () => {}
~~~
二：Vue.extend 移除 使用 createApp代替
~~~
// 之前 - Vue 2
// 創(chuàng)建構(gòu)造器
const Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data() {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 創(chuàng)建一個 Profile 的實例，并將它掛載到一個元素上
new Profile().$mount('#mount-point')
~~~
~~~
// 之后 - Vue 3
const Profile = {
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data() {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
}
Vue.createApp(Profile).mount('#mount-point')
~~~
- 使用vite創(chuàng)建vue3項目
- vue3和vue2的區(qū)別
- v-for 內(nèi)的 ref 不再注冊 ref 數(shù)組
- 異步組件的用法區(qū)別
- 自定義指令的用法區(qū)別
- 自定義事件的區(qū)別
- 過濾器已被移除，可使用全局屬性代替
- 全局API的一些變化
- key屬性
- 插槽的使用區(qū)別
- v-model的使用區(qū)別
- watch偵聽數(shù)組的變化
- <style>的變量綁定
- <style scoped> 中可以對全局和插槽的樣式做修改
- 組合式API
- composition API
- 組合式 API 語法糖 script setup
- Teleport將組件渲染到指定元素
- 其他事項
- 移除 $children
- 移除 $listeners