简要总结vue3和vue2区别

1.前言

1. v3已经风风火火的流行起来了,虽然截止目前21年11月13号还是next版本,但是已经势不可挡了
2. 今天简要总结下区别

---

2.数据劫持方式不同

1. v2主要是是通过Object.defineProperty 劫持数据
2. 对于新增的对象属性 使用数组修改元素 视图无法更新
3. $set 劫持数据

---

v3 new Proxy()劫持数据
v3 v2响应式原理区别

---

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)

//响应式数据
 let res = reactive({
        list1:[]
    })
// 钩子
onMounted(() => {
  
})
//插槽 组件上的属性
const {slots,attrs} = useContext()
// props   组件传参
const props = defineProps({
  num: Number,
});
//事件 触发
const emit = defineEmits(["change"]);
let changeNum = () => {
  emit("change", 10);
};
let route = useRoute()
let router = useRouter()

---

4.v-if和 v-for优先级问题

v-if优先级高于 v-for

---

5. v3废除 过滤器 filter

v3过滤器的 替代方案

---

6. 打包

1.Vue3.0打包项目时 支持按需打包 tree-shaking 树摇

2. import {createApp} from "vue"

---

7. v3 没有组件模板有唯一顶层元素的限制

---

v2 要求必须 有一个唯一的顶层元素包裹

---

8. 创建 加载

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 使用

注意 对象的使用

vue3使用 vuex

---

10. slot

具名插槽的使用上有些许区别
slot 组件

---

使用 slot组件

v-slot的写法
默认插槽

---

11. 生命周期钩子

常规写法

1. v2 beforeDestroy 废弃了 v3 beforeUnmount
2. v2 destroyed 废弃了 v3 用 unmounted

---

setup

import {onMounted} from 'vue';

3. 都是类似onMounted这样 以on开头加上名字

4. 图示
   钩子区别.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" //命名路由
    }
  }

---

参考资料

响应式原理区别
组件传值 sync v-model
v3 事件 计算属性
v3 data setup
v3 事件 toRefs fetch
v3 hook 案例
v3 render fetch封装
v3 使用TS
v3 TS接口-axios
vue3使用 vuex

---

初心

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

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉