掌握这些知识点让你学会使用Vue3

作者：文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196883.html

拒绝标题党，看完本文你就基本可以上手搞开发了，本文适合Vue初学者，或者Vue2迁移者，当然还是建议小伙伴到Vue3官网完全过一遍。不适合精通原理，源码的大佬们。

创建 Vue3 项目

那么正式开始学习我们的Vue3，先从创建项目开始。

使用 vue-cli 创建

输入下面的命令然后选择配置项进行安装即可，这里注意vue-cli的版本一定要在4.5.0以上

// 安装或者升级
npm install -g @vue/cli
//查看版本 保证 vue cli 版本在 4.5.0 以上
vue --version
// 创建项目
vue create my-project
//然后根据提示一步一步傻瓜式操作就行了
...

使用 Vite 创建

都说Vue3.0和Vite2更配，各种优化，各种快，但都不属于本文的内容，本文的目的我们只需要知道它特别好用，怎么用就行了。每行都有注释，一目了然。

// 初始化 viete 项目
npm init vite-app <project-name>
// 进入项目文件夹
cd <project-name>
// 安装依赖
npm install
//启动项目
npm run dev

创建完以后我们先来看看入口文件main.js

// 引入 createApp 函数,创建对应的应用,产生应用的实例对象
import { createApp } from 'vue'
// 引入 app 组件(所有组件的父级组件)
import App from './App.vue'
import './index.css'
// 创建 app 应用返回对应的实例对象,调用 mount 方法进行挂载  挂载到#app 节点上去
createApp(App).mount('#app')

然后看看根组件app.vue

// Vue2 组件中的 html 模板中必须要有一对根标签,Vue3 组件的 html 模板中可以没有根标签
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- 使用子级组件 -->
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
// defineComponent 函数,目的是定义一个组件 内部可以传入一个配置对象
import { defineComponent } from 'vue';
//引入子级组件
import HelloWorld from './components/HelloWorld.vue'
// 暴露出去一个定义好的组件
export default defineComponent({
  // 当前组件的名字
  name: 'App',
  // 注册组件
  components: {
    // 注册一个子级组件
    HelloWorld
  }
})
</script>

Composition API

接下来到了重头戏，Vue3的招牌特性，Composition API

Composition API可以更方便的抽取共通逻辑，但是不要过于在意逻辑代码复用，以功能提取代码也是一种思路。

顺便提一句，Vue3兼容大部分Vue2语法，所以在Vue3中书写Vue2语法是没有问题的（废除的除外），但是既然我们已经升级Vue3了，不建议混合使用，除非一些大型特殊项目需要兼容两个版本。

setup

setup是组合Composition API中的入口函数，也是第一个要使用的函数。

setup只在初始化时执行一次，所有的Composition API函数都在此使用。

setup() {
  console.log('我执行了') //我执行了
},

可以通过console.log看到setup是在beforeCreate生命周期之前执行的(只执行一次):

beforeCreate() {
  console.log('beforeCreate 执行了');
},
setup() {
  console.log('setup 执行了');
},
//setup 执行了
//beforeCreate 执行了

由此可以推断出setup执行的时候，组件对象还没有创建，组件实例对象this还不可用，此时this是undefined，不能通过this来访问data/computed/methods/props。

返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性，返回对象中的方法会与methods中的方法合并成功组件对象的方法，如果有重名， setup优先。因为在setup中this不可用，methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods里的内容，所以还是不建议混合使用。

setup函数如果返回对象，对象中的属性或方法 , 模板中可以直接使用：

//templete
<div>{{number}}</div>

//JS
setup() {
  const number = 2021;
  return {
    number,
  };
},

自定义指令

先看看Vue2自定义指令的钩子

bind：当指令绑定在对应元素时触发。只会触发一次。
inserted：当对应元素被插入到 DOM 的父元素时触发。
update：当元素更新时，这个钩子会被触发（此时元素的后代元素还没有触发更新）。
componentUpdated：当整个组件（包括子组件）完成更新后，这个钩子触发。
unbind：当指令被从元素上移除时，这个钩子会被触发。也只触发一次。

在 Vue3 中，官方为了更有助于代码的可读性和风格统一，把自定义指令的钩子名称改的更像是组件生命周期，尽管他们是两回事

bind => beforeMount
inserted => mounted
beforeUpdate: 新的钩子，会在元素自身更新前触发
update => 移除！
componentUpdated => updated
beforeUnmount: 新的钩子，当元素自身被卸载前触发
unbind => unmounted

过渡动画

这个没有什么大的改动，只是修改了两个class名字，正是因为没有什么大的改动，导致我曾经在这里栽了大跟头，写完了怎么都不对，后来查官网才知道。

以下是直接引用官网的

更多建站教程请访问 https://www.mimiwuqi.com/webqianduan/