1、构建工具vite
（1）、打包工具选择rollupe
（2）、很多核心包是使用go语言写的
2、响应式原理是不一样的
vue2使用defineProperty实现
vue3使用proxy实现
3、api不同
（1）路由不一样
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from './page/Home.vue'
import About from './page/About.vue'
const routes = [
{
path: "/home",
name: "home",
meta: {
keepAlive: true //设置页面是否需要使用缓存
},
component: () => import("./page/Home.vue")
},
{
path: "/about",
name: "about",
meta: {
keepAlive: true //设置页面是否需要使用缓存
},
component: () => import("./page/About.vue")
}
]
const router = createRouter({
history:createWebHashHistory(),
routes
})
export default router
（2）创建实例
new App({})--->createApp
（3）keep-alive
<keep-alive>包裹元素</keep-alive>
--->
<!-- vue3.0配置 -->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="$route.path" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" :key="$route.path" v-if="!$route.meta.keepAlive"/>
</router-view>
{
path: "/home",
name: "home",
meta: {
keepAlive: true //设置页面是否需要使用缓存
},
component: () => import("./page/Home.vue")
}
（4）声明一个状态
必须使用ref 和reactive使一个普通的数据变成响应式对象，即状态
（5）生命周期
on-原生命周期，参数为回调函数，逻辑在回调函数中执行
（6）script标签写法上的不同
<script>
export default{}
<script>
--->
- a
<script>
export default{
setup(){
return { msg,add }
}
}
<script>
- b
<script setup>
import { ref } from 'vue'
let msg = ref('')
<script>
（7）侦听props变化
watch(()=>props.msg,(newValue,oldValue)=>{
console.log(newValue,'监测props变化')
})
（8）状态侦听
watch(()=>state.msg,(newValue,oldValue)=>{
console.log(newValue,'监测props变化')
})
watch([()=>person.name,()=>person.age],([newName,newAge],[oldName,oldAge])=>{
console.log([newName,newAge],'监测props变化')
})
watchEffect(()=>{
//使用到哪个状态，当哪个状态发生改变的时候就会触发该回调函数
})
