Vue3学习笔记 - vue3带来了什么？

目录

源码组织方式

Composition API

option api

option api demo

composition api (基于函数的API)

compostion api demo

性能提升

响应式系统升级

编译优化

源代码体积优化

Vite

ES Module

Vite as Vue-cli

Vite 的特点

打包方式

Vite创建项目

---

源码组织方式

• 源码采用TypeScript 重写
• 使用 Monorepo 管理项目结构

Composition API

• RFC（Request for Comments）
• Composition API RFC

option api

• 包含一个描述组件选项（data, methods, props等）的对象
• Option APi 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项

option api demo

export default {
   data() {
      return {
          positon: {
              x:0,
              y:0,
          }
      }
   },
   created() {
       window.addEventListener('mousemove', this.handle)
   },
   destroyed() {
       window.removeEventListener('mousemove', this.handle)
   },
   methods: {
       handle(e) {
           this.position.x = e.pageX;
           this.position.y = e.pageY;
       }
   }
}

composition api (基于函数的API)

• vue3.0新增了一组APi
• 一组基于函数的api
• 可以更灵活的组织组件的逻辑

compostion api demo

function useMousePosition() {
  const position = Vue.reactive({
    x: 0,
    y: 0
  });

  const update = e