1.前言
v3已經(jīng)風(fēng)風(fēng)火火的流行起來了,雖然截止目前21年11月13號還是next版本,但是已經(jīng)勢不可擋了- 今天簡要總結(jié)下區(qū)別
2.數(shù)據(jù)劫持方式不同
- v2主要是是通過
Object.defineProperty劫持?jǐn)?shù)據(jù)- 對于新增的對象屬性 使用數(shù)組修改元素 視圖無法更新
- $set 劫持?jǐn)?shù)據(jù)
v3 new Proxy()劫持?jǐn)?shù)據(jù)
v3 v2響應(yīng)式原理區(qū)別
3.v3支持組合式API
v3可以使用各種組合式API 寫法更接近于
React
this基本不使用
都是通過hook的形式使用
setUp的使用
import {useRoute,useRouter} from "vue-router" 路由
import { onMounted, reactive ,defineProps,defineEmits,useContext} from "vue";
import {useStore} from 'vuex' //存儲
const store = useStore()
Object.assign(userInfo, res.data);
console.log("userInfo", userInfo);
store.commit("updateUserInfo",userInfo)
//響應(yīng)式數(shù)據(jù)
let res = reactive({
list1:[]
})
// 鉤子
onMounted(() => {
})
//插槽 組件上的屬性
const {slots,attrs} = useContext()
// props 組件傳參
const props = defineProps({
num: Number,
});
//事件 觸發(fā)
const emit = defineEmits(["change"]);
let changeNum = () => {
emit("change", 10);
};
let route = useRoute()
let router = useRouter()
4.v-if和 v-for優(yōu)先級問題
v-if優(yōu)先級高于 v-for
5. v3廢除 過濾器 filter
6. 打包
1.Vue3.0打包項目時 支持按需打包
tree-shaking樹搖
- import {createApp} from "vue"
7. v3 沒有組件模板有唯一頂層元素的限制
<template>
<h1>第三界面</h1>
<button>測試 </button>
</template>
v2 要求必須 有一個唯一的頂層元素包裹
<template>
<div>
<h1>第三界面</h1>
<button>測試 </button>
</div>
</template>
8. 創(chuàng)建 加載
v2
el掛載
var app=new Vue({
el:"#app",
data:{
num:10,
x:100
}
})
v3
mount掛載
const app = Vue.createApp({
data(){
return{
msg:"我們是冠軍"
}
}
}).mount("#app")
9. vuex 使用
<script setup>
import { onMounted, reactive } from "vue";
import {useStore} from 'vuex'
let store = useStore()
let add = ()=>{
store.commit("increase",{payload:100})
}
let changeCar = ()=>{
store.dispatch("getActionList")
}
onMounted(() => {});
</script>
注意 對象的使用
<script setup>
import { onMounted, reactive } from "vue";
import {useStore} from 'vuex'
import axios from "axios";
let userInfo = reactive({});
const store = useStore()
let login = () => {
axios
.post("/xx/xx/cellphone", {
phone: 186xxxx8753,
password: "123456",
})
.then((res) => {
if (res.data.code == 200) {
Object.assign(userInfo, res.data);
console.log("userInfo", userInfo);
store.commit("updateUserInfo",userInfo)
} else {
alert("登錄失敗");
}
});
};
</script>
10. slot
具名插槽的使用上有些許區(qū)別
slot 組件
<template>
<!-- 具名插槽 -->
<transition name="fade">
<div class="message-box" v-if="show">
<!-- title="來子組件自己的標(biāo)題" -->
<slot name="title" content="我是子組件的哦"> 默認(rèn)標(biāo)題</slot>
<slot></slot>
<span class="message-box-close" @click="$emit('update:show', false)"
>X</span
>
</div>
</transition>
</template>
使用 slot組件
<name-slot v-model:show="showMsgView">
<!-- 名為title插槽內(nèi)容 -->
<template v-slot:title="slotData">
<h1>溫馨提示</h1>
<p> 父組件:{{ msg }} </p>
<p>{{ slotData.content }}</p>
</template>
<template v-slot:default> 默認(rèn)插槽 </template>
</name-slot>
v-slot的寫法
默認(rèn)插槽
11. 生命周期鉤子
常規(guī)寫法
- v2 beforeDestroy 廢棄了 v3
beforeUnmount- v2 destroyed 廢棄了 v3 用
unmounted
setup
import {onMounted} from 'vue';
- 都是類似
onMounted這樣 以on開頭加上名字- 圖示
鉤子區(qū)別.png
12. router
12.1 404 配置
{
path:"/404",
name:"NotFound",
component: ()=>import("@/views/404.vue") //lazy-load
},
// 404放到最后配置
//因為404 所有的路由都匹配不上 才走 404
{
// path:"*", v2可以的
path:'/:pathMatch(.*)/', //v3 的寫法
// redirect:"/404" //重定向 上面所有的 path 都匹配不上的話 會重定向到 /404
redirect:{
name:"NotFound" //命名路由
}
}
參考資料
響應(yīng)式原理區(qū)別
組件傳值 sync v-model
v3 事件 計算屬性
v3 data setup
v3 事件 toRefs fetch
v3 hook 案例
v3 render fetch封裝
v3 使用TS
v3 TS接口-axios
vue3使用 vuex
