Vue 3.x版本的信息

一、vue3与vue2的区别

1、底层的改变

2、语法的改变

大部分语法都和vue2进行了兼容，所以没有什么改变，vue3在vue2的基础上改变了vue的引入方式，插件安装方式，以及新增了一个组合API

1.vue3的引入方式和插件的安装方式：

现在需们需要通过结构的方式引入vue3中的createApp方法，再通过该方法创建vue3实例，

插件的安装，直接在创建的实例后面链式使用use注册。

下面的例子为一个vue3项目中入口文件（main.js）的代码

2.组合API

vue3新增了一个组合API选项——setup()

setup（）可以接受两个参数：prop、context

props：表示父组件传递过来的参数，我们想要在setup()选项中使用就需要将props作为关键字传递进该函数中，这个参数不能解构赋值。但我们如果非要解构该参数，可以在setup()中使用

const [参数一，参数二，. . . ] = torefs(props)

的方式解构。（需要引入torefs方法）

context：是一个普通的JavaScript对象，暴露了可能在setup()中有用的值

context.attrs

context.slots

context.emit

context.expose

其中我们最常用的就是emit了，和vue2一样，这个表示我们可以在父组件中调用子组件里的方法。

在steup()中，我们无法使用data、computed、methods、refs选项，想在setup()中写methods方法，直接写就可以了，不需要调用vue里的回调函数。

在setup()中可以使用的vue中的回调函数

我们可以在里面将一个功能相关的选项解构后放入其中，使得组件中相关功能的代码相邻，提高代码的可读性。在后续的解析中，这些代码仍会被解析到vue2原有的选项中，例如computed、生命周期钩子、依赖注入、watch监听等

我们想要在setup()中使用这些方法，需要从vue文件中解构出各自方法，在setup()中已回调函数的形式去调用，最后将外部需要用到的变量用return暴露出去，下面我们看几个例子：

下面的例子是依赖注入，我们看到想要在setup()中使用inject方法，就要在前面用import引入vue，并将该方法将解构出来，使用它们时，因为他们最为回调函数，会将结果作为返回值，所以我们需要用一个变量来命名他们

可以在setup()中使用的选项：

单个响应式参数：ref

多个响应式参数:reactive

生命周期钩子：想要在setup()中使用，需要按右边的参数解构出来后调用

计算属性：computed

侦听选项：watch

依赖，注入：inject，provide

注入：provide，这个方法有两个参数，第一个参数表示键名，第二个参数表示键值

注入：inject，接受两个参数，第一个参数为接收的值的键名，第二个参数表示父组件没有注入参数时的默认值。