Vue3 01 -- 初识Vue3

Vue3 组合式API

在vue2的版本里，数据和函数是分开维护的，并且调用时还要用到mount或者Create。

但是在vue3的版本里，经过setup的语法糖，能够实现集中式维护，一个功能写的代码能放在一起，且代码量更少了。

使用create-vue创建项目

1. 在工作目录下，用命令行运行npm init vue@latest
2. 按照指示一步步建立。
3. 成功建立后，在项目目录下运行npm install 下载环境，然后运行。

 项目目录和关键文件

项目配置文件变成了基于vite的配置

核心依赖还是package.json

入口文件还是main.js

根组件还是app.vue 但是vue格式发生了变化

首先script到了最上面，template到了中间。

template不再需要根div元素

script支持vue3最大的特色，组合式api。

Set up

setup 可以写在vue2的形式里，发生在beforeCreate函数之前，组件挂载完毕之后。

 默认的写法，在定义完数据和函数之后，需要将数据return。

使用的时候和vue2一样，直接绑定click事件，用{{}}绑定数据。

 用setup语法糖，这样只需要定义数据和方法就行，return工作已经完成了。

经过语法糖的封装能更简单的使用组合式api。

ref（）

 ref简单来说就是生成一个响应式对象。

用这些函数都要有一个通用的过程，1 导入 2 执行接收

reactive()

 用法与ref类似，但是只能传入类型为对象的初始值。

ref和reactive异同点：

reactive和ref函数都是通过函数调用的方式生成响应数据。

reactive不能处理简单类型的数据

ref参数类型支持更好但是必须通过.value访问修改

ref函数的内部实现依赖于reactive

更推荐使用ref函数，更加灵活。

computed 计算属性函数

 通用的步骤还是没少，1 、导入 2、用变量接收

用变量接收 computed函数，里面参数是一个回调函数，return的是基于响应式数据做计算的值。

watch函数

watch的作用是侦听一个或者多个数据的变化，数据变化时执行回调函数

 通用的步骤一样 1 导入 2 执行函数

watch函数的基础用法，有2个参数：

1. 侦听变化的数据

2. 回调函数，回调函数里有2个参数，前者是更新后的值，后者是更新前的值

侦听多个数据和单个数据类似，

只是参数里面装的是数组。

watch函数有两个额外的参数：

1. immediate

2. deep

immediate通常用来给出相应的搜索提示，侦听器刚创建的时候就会调用。

watch监听的ref对象是浅层的，如果是对象里的某个值发生改变，则不会调用watch函数，此时要加deep参数。

但是deep函数消耗的资源很多，一般不推荐这样写，因为对象侦听通常是针对对象的某个属性，所以可以用下面的进阶写法。

精确侦听对象的某个属性

 这里的watch函数，

第一个参数的位置，从某个需要侦听的变量，修改成了一个回调函数，回调函数需要指明需要侦听的对象的某个属性。

第二个参数不变。

作为watch函数的第一个参数，ref对象不需要添加.value。

不开启deep，需要在第一个参数写成函数的写法，返回需要监听的具体属性。

生命周期函数

这里的生命周期函数 vue3与vue2相比，绝大多数前面只需要加一个on就行了。

但是beforeCreate和created的API被组合成了setup。

使用起来很简单，1 导入 2 调函数。

可以执行多次，使用的业务场景就是原来的函数太复杂，在不动代码的情况下加一些业务逻辑，可以直接再起一个函数。

父子通信

父组件要传变量值给子组件的时候，

父组件要在子组件内绑定属性，这一点和vue2一样。

子组件通过defineProps函数接收，这个叫“编译器宏”之后会讲到。

接受的时候名字要对应，数据类型也要指明。

子传父的做法是绑定事件，通过绑定事件接收子组件传过来的变量。

子组件通过编译器宏defioneEmits生成emit方法，里面放的是绑定事件的名称。

通过emit（事件名称，传的数据）向父组件传递。

父组件通过该事件的回调函数，设一个参数接收这个数据。

模板引用

vue2是通过$refs得到绑定的ref对象的

在vue3中，得到了更快捷的方式。

只需要先用ref生成一个ref对象，

再通过ref标识绑定ref对象到标签即可使用。

 provide和inject

project 和 inject 的 作用就是实现跨层组件通信，某个父级组件和子级组件进行通信。

使用方法很简单，不再赘述。

这里需要说明的是，每个组件只能修改本组件的数据，如果要实现跨组件修改，可以传递方法，底层组件调用方法修改顶层组件中的数据。

-------转载 原文来自 https://www.cnblogs.com/xiaochaoheni/p/17390390.html