Vue3特性详解-CSDN博客

本文链接：https://blog.csdn.net/qq_63358859/article/details/122050549

一款框架诞生需要的阶段

查看版本: npm view vue versions

开发
alpha版：内部测试版 α
beta版：公开测试版 β
rc版：Release Candidate（候选版本）
stable版：稳定版

npm i vue@lasted:下载的是vue2

vue2
vuex3
vue-router3
element-ui 2

npm i vue@next：下载的是vue3

vue3
vuex4
vue-router4
element-plus 1
npm i vuex@next vue-router@next element-plus

vue3的安装使用

一、安装vue3：npm i vue@next
二、安装vue3版本的项目
三、安装vue-router、vuex
四、安装less@3、less-loader@7
五、配置vue.config.js,与vue2相同

vue3与vue2的十大区别

版本号不同
引用的vuex/vue-router版本不同
vue3的APP.vue的《template》中支持多个根节点

区别一：==vue3中推崇使用函数式编程==:各种创建实例，都调用函数来创建，我们从vue中解构出各种各样的函数来使用

区别二.Performance [pəˈfɔːməns]

重写了虚拟DOM的实现（跳过静态节点，只处理动态节点）
update性能提高1.3~2倍
SSR速度提高了2~3倍

区别三:Tree shaking [ˈʃeɪkɪŋ] 可以将无用模块“剪辑”，仅打包需要的)【webpack新版本的】

区别四 Fragment ['frægmənt] 不再限于模板中的单个根节点[文档碎片]

区别五 <Teleport> [ˈtelɪpɔːt] 以前称为<Portal> [ˈpɔːtl]，译作传送门,可以把组件内部的部分内容挂载到除#app的容器中(<Teleport to="#fotter">)，

  <div id="app"></div>
  <div id="footer"></div>
 <Teleport to="#footer"> 你好,世界</Teleport>

区别六<Suspense> [səˈspens]可在嵌套层级中等待嵌套的异步依赖项,嵌套一个异步组件，可以在获取到数据之前加载loading效果

父组件------------------
<template>
  <Suspense>
    <template #default><AsyncComponent></AsyncComponent></template>
    <template #fallback>loading.....</template>
  </Suspense>
</template>

<script>
import AsyncComponent from "./AsyncComponent.vue";
export default {
  name: "App",
  components: {
    AsyncComponent,
  },
};
</script>
子组件--------------------------
<template>
  <div>{
  
  { msg }}</div>
</template>

<script>
import { defineComponent } from "vue";
const query = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("我是异步组件");
    }, 2000);
  });
};
export default defineComponent({
  async setup() {
    let msg = await query();
    return {
      msg,
    };
  },
});
</script>

区别七:TypeScript更好的TypeScript支持

区别八：vue3支持把组件中的某些内容以图形的方式绘制到canvas画布上(Custom Renderer API自定义渲染器API)Apache ECharts