熟悉Vue2的怎么学Vue3

根据Vue的官方文档，Vue 2 将于 2023 年 12 月 31 日停止维护，并且最近手里拿到一个使用Vue3开发的项目，因此有必要学习一下Vue3，在这里总结一下学习的内容，便于还为学习Vue3的Vue2的同学们快速跟进。

本文内容是在阅读Vue3文档-开始与基础部分的内容相比Vue2不同的一些小部分。

组合式API（Composition API）

Vue3支持两种不同风格的组件书写方式，一种是选项使API，即在Vue2中长使用的：用包含多个选项的对象来描述组件的逻辑，如data, methods, mounted等，选项所定义的属性暴漏在函数内部的this上，this指向当前组件实例。

另外一种，就是组合式API，先来看一个样例：

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

注意：

1. 组合式API通常与<script setup>搭配使用
2. 示例中的count并没有被data等包围，但是通过ref实现为响应式数据

当然，选项式API在Vue3中仍然是受支持。

node命令调用vue脚手架快速初始化

要求node版本16.0及以上

# 创建项目
npm init vue@latest

# 打开项目，并启动
cd <your-project-name>
npm install
npm run dev

# 打包
npm run build

应用配置

例如配置应用级的错误处理器：

app.config.errorHandler = (err) => { /* 处理错误 */ }

注册全局组件：

app.component('TodoDeleteButton', TodoDeleteButton)

动态绑定多个值

这一点我没记得Vue2有，看例子吧：通过一个多属性值绑定组件的id和class属性。

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

<div v-bind="objectOfAttrs"></div>

动态参数

这一点，我也不记得Vue2有：

<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething">

<!-- 其中的attributeName和eventName均为数据属性或者Javascript表达式 -->

并且文档中强调，在html文件中，需要避免在名称中使用大写字母，在.vue文件中不受此限制。

响应式代理

看官方示例：

export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

通过this.someObject=newObject，someObject此时已经newObject的一个响应式代理，而原始的newObject不会变为响应式的：请确保始终通过 this 来访问响应式状态。

透传 Attribute

<!-- MyComponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

使用时：

<MyComponent class="baz" />

将被渲染为：

<p class="baz">Hi!</p>
<span>This is a child component</span>

动态组件

<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>

被传给 :is 的值可以是被注册的组件名或者导入的组件对象。