Vue.js 3.0

• 源码组织方式的变化

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

• Composition API（组合API）
• 性能提升
• Vite
• 
• 
• 
• 
• 

• Vue2版本

  拉可牧

  互联网人实战大学

  设计动机

  OPTIONS API

  包含一个描述组件选项(DATA,METHODS,PROPS等)的对象

  .OPTIONSAPI开发复杂组件,同一个功能逻辑的代码被拆分到不同选项

  

  
  Vue3.0

  设计动机

  COMPOSITION API

  VUE.JS3.0新增的一组API

  一组基于函数的API

  可以更灵活的组织组件的逻辑

  

  性能提升

  响应式系统升级

  编译优化

  源码体积的优化

  

  响应式系统升级

  .VUE.JS2.X中响应式系统的核心DEFINEPROPERTY

  .VUE.JS3.0中使用PROXY对象重写响应式系统

  可以监听动态新增的属性

  ,可以监听删除的属性

  可以监听数组的索引和LENGTH属性

  

  二包牧月

  编译优化

  互联网人实战大学

  .VUE.JS2.X中通过标记静态根节点,优化DIFF的过程

  .VUE.JS3.0中标记和提升所有的静态根节点,DIF的时候只需要对

  比动态节点内容

  FRAGMENTS (升级VETUR 插件)

  静态提升

  PATCH FLAG

  缓存事件处理函数

  

  优化打包体积

  .VUE.JS3.0中移除了一些不常用的A

  API

  例如:

  INLINE-TEMPLATE

  FILTER等

  TREE-SHAKING

  

  ES MODULE

  .现代浏览器都支持 ES MODULE 不支持)

  通过下面的方式加载模块

  <SCRIPT TYPE"MODULE" SRC-"..."></SCRIPT>

  支持模块的SCRIPT默认延迟加载

  类似于SCRIPT标签设置DEFER

  在文档解析完成后,触发DOMCONTENTLOADED事件前执行

  

  VITE AS VUE-CLI

  .VITE在开发模式下不需要打包可以直接运行

  VUE-CLI开发模式下必须对项目打包才可以运行

  

  VITE特点

  快速冷启动

  按需编译

  模块热更新

  

  VITE AS VUE-CLI

  VITE 在生产环境下使用 ROLLUP 打包

  基于ESMODULE的方式打包

  VUE-CLI使用WEBPACK打包

  

  VITE创建项目

  VITE创建项目

  SSSS

  NPM INIT VITE-APP <PROJECT-NAME>

  S CD <PROJECT-NAME>

  NPM INSTALL

  RUN DEV

  NPM

  基于模板创建项目

  虫守

  INIT

  VITE-APP --TEMPLATE

  REACT

  NPM

  INIT

  VITE-APP --TEMPLATE

  PREACT

  NPM

  

  其实执行NPM INITE-APP时,NPM会补全模块名为 CREATE-VITE-APP 并执行NPX CREATE-APP

  NPM INIT VITE-APP HELLO-VUE3

  1234

  # SAME

  AS

  NPX CREATE-VITE-APP HELLO-VUE3

  

  COMPUTED

  ?第一种用法

  COMPUTED(0)

  三> COUNT.VALUE+1

  第二种用法

  CONST COUNT - REF(1)

  CONST PLUSONE

  COMPUTED({

  COUNT.VALUE + 1,

  GET:

  VAL

  个

  SET

  1

  三 VAL

  COUNT.VALUE

  

  拉勾教

  互联网人实战

  WATCH

  WATCH的三个参数

  第一个参数:要监听的数据

  第二个参数:监听到数据变化后执行的函数,这个函数有两个参数分别

  是新值和旧值

  第三个参数:选项对象,DEEP和IMMEDIATE

  WATCH的返回值

  取消监听的函数