Vue3 和 Vue2.6 的差异，和替代方案 Vue2.7

大纲链接 §

[toc]

1. 简记：Vue 3 对比 Vue 2 做了哪些改动？ ⇧

v3-migration官方文档写了（中文在这），这里列出几个容易被考的：

• 原理层面：
  • 使用 基于Proxy（代替Object.definedProperty）的数据响应式系统
• api层面
  • 使用Composition api 逻辑高内聚
  • 实例化 const app = createApp(App) app.use().mount() 代替了 new Vue({}) 创建根实例
    • const router = createRouter({}); app.use(router);
    • const pinia = createPinia({}); app.use(pinia);
    • const store = createStore({}); app.use(store);
  • SFC(Single-File Component)单文件组件 template模板语法糖 <script setup> 直接使用Composition api
  • 响应式数据（模块化） ref 和 reactive
  • destroyed 被改名为 unmounted 了（before 当然也改了）
  • 支持多根节点的组件，使用fragment: <template> <CompA /> <CompB /></template>
    • 要求显式定义 $attrs 应该分布在哪里：<template> <CompA v-bind="$attrs"/> <CompB /></template>
  • v-model:value 代替了以前的 v-model 和 .sync
  • 新增内置组件 Teleport 传送门
  • ref 属性支持函数了 ref="(el)=>{}"
• 更易维护： TypeScript + api模块化：支持局部导入
• 更易扩展：独立的响应化模块
• 兼容性：Vue 3 官方放弃对 IE11 的支持，需要兼容的话，使用Vue2.7

参考

• vue3 变更简单梳理
• v3-migration 迁移手册
• 超极速的Vue3上手指北
• 渐进 Vue│必备这些 Vue 的操作技巧
• v2.7.10 CHANGELOG.md

使用 Vue 2.7 ⇧

• IE8+

vue2.x 部分配套生态

Project	Status	Description
vue-router		Single-page application routing
vuex		Large-scale state management
vue-cli		Project scaffolding
vue-loader		Single File Component (*.vue file) loader for webpack
vue-server-renderer		Server-side rendering support
vue-class-component		TypeScript decorator for a class-based API
vue-devtools		Browser DevTools extension

参考文章 ⇧

• v2.7.10 CHANGELOG.md
• vue2.x examples

相关文章 ⇧

• 一文深入了解Vue2和Vue3的区别
• Vue2.0和Vue3.0的区别

• 作者： Joel
• 文章链接：
• 版权声明
• 非自由转载-非商用-非衍生-保持署名