1.前言
v3已经风风火火的流行起来了,虽然截止目前21年11月13号还是next版本,但是已经势不可挡了- 今天简要总结下区别
2.数据劫持方式不同
- v2主要是是通过
Object.defineProperty劫持数据- 对于新增的对象属性 使用数组修改元素 视图无法更新
- $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
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. 创建 加载
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
具名插槽的使用上有些许区别
slot 组件
<template>
<!-- 具名插槽 -->
<transition name="fade">
<div class="message-box" v-if="show">
<!-- title="来子组件自己的标题" -->
<slot name="title" content="我是子组件的哦"> 默认标题</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插槽内容 -->
<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. 生命周期钩子
常规写法
- v2 beforeDestroy 废弃了 v3
beforeUnmount- v2 destroyed 废弃了 v3 用
unmounted
setup
import {onMounted} from 'vue';
- 都是类似
onMounted这样 以on开头加上名字- 图示
钩子区别.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
