Vue3入门指南-基础用法

Vue3入门指南-基础用法

终于 Vue3 的正式版发布了，两年多的开发，多位贡献者的努力。凝聚了这么多优秀开发者的智慧和努力，注定 Vue3 会成为下一个前端主流开发框架。本篇文章将带领大家一步步学习和了解使用vue3,当然更多的是我的学习过程。
前端就是这样，要时刻保持学习，每个月都有新技术的产生。如果每个知识都学，显然不现实，所以也要有选择性的学习。例如现在主流的三大框架，Vue/React/angular, 基于这三大框架的扩展框架我都应该有所涉及和了解。
有的小伙伴这时候会说，我们公司还没开始使用，可以先不学。确实是这样，我们公司也没有使用，但无论什么技术的产生都会有个过程，这个过程中有一个阶段是可以充分享受技术红利的。你现在学，无论技术红利什么时候到来，你都可以从容的抓住技术红利期，获得最大的收益。
当然本篇文章更多是讲如何使用，关于代码为何这样用，原理是什么我会在等以后深入了解以后在出一篇中级用法讲解。
俗话说读书百变不如手写一遍。希望大家还是能够自己手敲一遍。加深印象。

1.前置知识

虽然我讲解的都是零星的知识点和api用法，但是你要学习和了解还需要掌握以下的知识点。

• TypeScript - 你了解并且能够实用简单的用法
• Vue2.0基础 - 你起码要有Vue2.0的使用经验
• 你需要会使用npm或者yarn来安装依赖包
  当然上述的前置知识你都不会的话。你可以在掘金或者我的文章中查看vue2.0基础笔记-高级笔记，TypeScript可以去官网学习简单使用

2.Vue3.0的一些新特性

• Vue3是向下兼容，Vue3 支持大多数 Vue2 的特性。拿 Vue2 的语法开发 Vue3，也是没有任何问题的。
• 性能的提升，打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54%。
• 新推出的Composition API ，在 Vue2 中遇到的问题就是复杂组件的代码变的非常麻烦，甚至不可维护。Composition API一推出，立马解决了这个问题，它是一系列 API 的合集。
• 其他新特性：Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。
• 更好TypeScript支持

2-1.使用vue-cli 搭建vue3开发环境

Vue-cli ：Vue.js 开发的标准工具 ，
新版的 vue-cli 还提供了图形界面，
如果你对命令行陌生，也可以使用图形界面。

具体安装步骤我这了就不详细描述了。官网都很齐全也通俗易懂。这里贴上官网地址

2-2项目基本目录介绍

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里
---|components       -- Vue的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在Vue2中也有
---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js       -- Eslint的配置文件，不用作过多介绍
|-.gitignore         -- 用来配置那些文件不归git管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json      -- 关于TypoScript的配置文件
|-yarn.lock          -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中

2-3.main.ts入口文件

import { createApp } from "vue"; // 引入vue文件，并导出`createApp`
import App from "./App.vue"; // 引入自定义组件，你在页面上看的东西基本都在这个组件里

createApp(App).mount("#app"); // 把App挂载到#app节点上，在public目录下的index.html找节点

2-4.Composition API用法介绍

setup() 和 ref()的使用
使用setup()新语法，写了这个就不需像之前vue2语法需要写data了。

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{
  {girl}}</div>
  </div>
</template>

<script lang="ts">
import {
     defineComponent, ref } from "vue";
export default defineComponent({
    
  name: "App",
  setup() {
    
    const girl = ref('番茄女孩');
    return {
    
      girl
    };
  },
});
</script>

vue2中声明的变量需要放在data中声明使用。而vue3中通过ref声明变量，并且在setup函数中返回出去才可以在页面上使用。
vue2中修改data中的变量需要在methods中定义方法。然后通过事件触发修改变量。那么vue3中是如何定义方法和改变ref声明的变量呢？

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{
  {girl}}</div>
    <button @click="changeGirls">改变我的女孩</button>
  </div>
</template>

<script lang="ts">
import {
     defineComponent, ref } from "vue";
export default defineComponent({
    
  name: "App",
  setup() {
    
    const girl = ref('番茄女孩');
    const changeGirls = () => {
    
    	girl.value = '番茄男孩'
    }
    return {
    
      girl,
      changeGirls
    };
  },
});
</script>

是的你没看错。通过ref声明的变量在赋值的时候需要通过变量.value去进行赋值和读取操作。并且事件方法不在需要声明在methods中了。 而是直接写在setup函数中就可以了。 是不是非常的简单。并且节省了很多代码。但是通过ref声明的变量更改需要通过变量.value的方式去修改。很不符合我们之前书写代码的用法。那么下面介绍的reactive方法就很符合我们之前的用法。
reactive()
它也是一个函数(方法)，里边接受的参数是一个 Object(对象)。
无论是变量和方法，都可以作为 Object 中的一个属性，而且在改变changeGirls值的时候也不用再加讨厌的value属性了。再return返回的时候也不用一个个返回了，只需要返回一个data,就可以了。

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{
  { data.girl }}</div>
    <button @click