1.前言

1. v3已經(jīng)風(fēng)風(fēng)火火的流行起來了,雖然截止目前21年11月13號還是next版本,但是已經(jīng)勢不可擋了
2. 今天簡要總結(jié)下區(qū)別

2.數(shù)據(jù)劫持方式不同

1. v2主要是是通過Object.defineProperty 劫持數(shù)據(jù)
2. 對于新增的對象屬性 使用數(shù)組修改元素 視圖無法更新
3. $set 劫持數(shù)據(jù)

v3 new Proxy()劫持數(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

v3過濾器的 替代方案

6. 打包

1.Vue3.0打包項目時 支持按需打包 tree-shaking 樹搖

2. 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>

vue3使用 vuex

10. slot

具名插槽的使用上有些許區(qū)別
slot 組件

<template>
  <!-- 具名插槽 -->
  <transition name="fade">
    <div class="message-box" v-if="show">
      <!-- title="來子組件自己的標(biāo)題" -->
      <slot name="title" content="我是子組件的哦"> 默認標(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> 默認插槽 </template>
    </name-slot>

v-slot的寫法
默認插槽

11. 生命周期鉤子

常規(guī)寫法

1. v2 beforeDestroy 廢棄了 v3 beforeUnmount
2. v2 destroyed 廢棄了 v3 用 unmounted

setup

import {onMounted} from 'vue';

3. 都是類似onMounted這樣 以on開頭加上名字

4. 圖示
   鉤子區(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

初心

我所有的文章都只是基于入門，初步的了解；是自己的知識體系梳理;

如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;

共勉