vue3介绍

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(()=>{
  //使用到哪个状态，当哪个状态发生改变的时候就会触发该回调函数
})