1. 组件的声明周期函数发生了变化

• 例如:

  beforeCreate 修改为 setup
  created 修改为 setup
  beforeMount | onBeforeMount;
  mounted | onMounted;
  beforeUpdate | onBeforeUpdate;
  updated | onUpdated;
  activeted | onActiveted;
  deactiveted | onDeactiveted;
  beforeDestory | onBeforeUnmount;
  destoryed | onUnmounted;
  errorCaptured | one rrorCaptured;
  renderTracked | onRenderTracked;
  renderTriggered | onRenderTriggered;

2. setup 中返回的值为双向数据绑定的属性

   export default {
     setup(props: any, context: any) {
       return {
         changeMsg() {
           console.log("修改了msg");
         },
       };
     },
   };
   

3. 使用 reactive 管理状态

   import { reactive } from "vue";
   export default {
     setup(props: any, context: any) {
       const state = reactive({
         msg: "hha kyle!",
       });
       return {
         changeMsg() {
           console.log("修改了msg");
         },
       };
     },
   };
   

4. 使用 toRefs 将 reactive 定义的返回出去

   // 返回出去才会绑定proxy
   import { reactive } from "vue";
   export default {
     setup(props: any, context: any) {
       const state = reactive({
         msg: "hha kyle!",
       });
       return {
         changeMsg() {
           console.log("修改了msg");
         },
         ...toRefs(state),
       };
     },
   };
   

5. 新增了 script setup

   <script setup>
     // 这里写的相当于在setup函数里写;
   </script>
   

6. setup 函数接受 props, context 形参

props 接受的参数

context

attrs: Proxy
emit: (event, ...args) => instance.emit(event, ...args)
expose: exposed => {…}
slots: Proxy

7. vue3 很好的支持了 JSX 和 TypeScript

8. Pinia 用于 Vue 的状态管理库。

• 优点

  易于学习
  极轻， 仅有 1 KB
  模块化设计，便于拆分状态