1.前言
v3已经风风火火的流行起来了,虽然截止目前21年11月13号还是next版本,但是已经势不可挡了2.今天简要总结下区别
2.数据劫持方式不同
1.v2主要是是通过
Object.defineProperty劫持数据2.对于新增的对象属性 使用数组修改元素 视图无法更新
3.$set 劫持数据
v3 new Proxy()劫持数据
3.v3支持组合式API
v3可以使用各种组合式API 写法更接近于
Reactthis基本不使用
都是通过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
beforeUnmountv2 destroyed 废弃了 v3 用
unmounted
setup
import {onMounted} from 'vue';
都是类似
onMounted这样 以on开头加上名字
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" //命名路由 } }
