Vue3基础知识总结

最新推荐文章于 2024-09-23 15:10:00 发布

初辰ge

最新推荐文章于 2024-09-23 15:10:00 发布

阅读量2.6k

点赞数 10

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/chuenst/article/details/118303942

版权

vue 专栏收录该内容

27 篇文章 7 订阅

订阅专栏

vue3介绍

（
vue3 保持了 vue2 的大部分特性，增加了以下新特性：

组合式 API
Teleport
片段
触发组件选项
来自 @vue/runtime-core 的 createRenderer API 创建自定义渲染器
单文件组件组合式 API 语法糖 (``) 实验性
单文件组件状态驱动的 CSS 变量 ( 中的 v-bind) 实验性
Suspense
vue3较比vue2做出了以下改变：
打包大小减少 41%
初次渲染快 55%，更新快133%
内存使用减少 54%
更好的 TypeScript 支持

Composition API（组合式API）

通过创建 Vue 组件，将界面中重复的部分连同其功能一起提取为可重用的代码段，叫做组合式API。

Vue 实例创建方式的变化

<body>
  <div id="root"> </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          title: 'vue3真香'
        }
      },
      template: `<div>{{title}}</div>`
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台中可以访问 vm 对象，并且修改data中变量的值
在这里插入图片描述

setup 函数

setup 函数在实例被创建之前执行

<body>
  <div id="root"> </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      setup() {
        return {
          title: 'hello'
        }
      },
      template: `<div>{{title}}</div>`
    })
    const vm = app.mount('#root')
  </script>
</body>

在这里插入图片描述