vue3基础

一.vue3简介

1：2020年9月18日，vue3发布3.0版本

2：特点：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

3：Vue3带来了什么

• 打包大小减少40%
• 初次渲染快55%，更新渲染快133%
• 内存减少54%

二：安装vue3的开发者工具 

• 方式一： 打开chrome应用商店，搜索vue： 里面有个Vue.js devtools，且下面有个角标beta那个就是vue3的开发者工具
• 方式二： 离线模式下，可以直接将包丢到扩展程序 

三：分析目录结构 

• 在模板中vue3中是可以没有根标签了，这也是比较重要的改变
• 应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。
• main.js中的引入，在main.js里面写入的函数是全局的

 

 

四：setup函数 

1：setup是所有组合api“表演的舞台”

2：组件中所用到的：数据、方法等等，均要配置在setup中

3：setup函数的两种返回值：

• 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注）
• 若返回一个渲染函数：则可以自定义渲染内容。

4：setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性 

5：基本语法： 

/* 里面的代码会被编译成组件 setup() 函数的内容。
  这意味着与普通的 `<script>` 只在组件被首次引入的时候执行一次不同，
  `<script setup>` 中的代码会在每次组件实例被创建的时候执行。*/
<script setup>
    console.log('前端你好')
</script>

 5.1:当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用：

1:：<template>
          <button @click="src">{ { msg }}</button>
       </template>

2：        <script setup