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 => {
    position.x = e.pageX;
    position.y = e.pageY;
  };
  Vue.onMounted(() => {
    window.addEventListener("mousemove", update);
  });
  Vue.onUnmounted(() => {
    window.removeEventListener("mousemove");
  });

  return position;
}

const app = Vue.createApp({
  setup() {
    const position = useMousePosition();
    return {
      position
    };
  }
})

app.mount('#app')

性能提升

• 3.0 采用 proxy 替代了 defindProperty 实现响应式，对编译器做了优化，重写了虚拟dom，使得render和update的性能有了很大的提升，官方提出服务端渲染的性能也提高了2-3倍

响应式系统升级

• vuejs2.*中响应式系统的核心是defineProperty
• vuejs3.*中使用了proxy对象重写响应式系统, 提高了响应性系统的性能和功能
  • 可以监听动态新增属性
  • 可以监听删除属性
  • 可以监听数组的索引和length属性

编译优化

• vuejs2.* 中通过标记静态根节点，优化diff的过程
• vuejs3.* 中通过标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容(vue3 template explorer)
  • Fragments (升级vuetur插件)
  • 静态提升
  • Patch flag
  • 缓存事件处理函数

源代码体积优化

• vuejs3.* 移除了一些不常用的api （inline-template, filter）
• tree-shaking

Vite

• 不需要打包，可以直接运行项目，大大提高了研发效率

ES Module

• 现代浏览器都支持ESM
• 通过下面方法加载模块

<script type="module" src=""></script>

• 支持模块的默认延时加载
  • 类似scrpit标签设置defer
  • 在文档解析完成后，触发DOMContentLoaded事件执行

Vite as Vue-cli

• Vite在开发模式下不需要打包可以直接运行
• vue-cli在开发模式下必须提前打包才可以运行

Vite 的特点

• 快速冷启动
• 按需编译
• 模块热更新

打包方式

• vite在生产环境下使用Rollup打包，基于es module的方式打包
• vue-cli使用webpack打包

Vite创建项目

• 创建新项目

npm init vite-app <project-name>
cd <project-name>
npm install 
npm run dev

• 基于模版创建

npm init vite-app --template react
npm init vite-app --template preact