vue3的总结

1.创建Vue项目的命令

Vue2:vue create 项目名

Vue3:npm init vue@latest

两种创建项目的差异性

前端功能化:(前端工程化)webpack ,gulp,vite,

关于vue2和vue3版本

什么时候用vue2

什么时候用vue3

1.稳定性

2.生态

3.市场大环境

4.新老项目

4.1.老项目:vue2

4.2.新项目:vue3

vue3中是否支持vue2的代码

支持:vue3几乎兼容vue2版本,eventBus全局事件总线不支持

选项式API

组合式API

Vue3的组件直接使用不需要引入和挂载到component里

设置关闭校验

二、setup函数

2.1 setup函数介绍

- `setup` 是一个新的组件选项，作为组件中使用==组合API的起点==。

- 从组件生命周期来看，它的执行在组件实例创建之前`vue2.x的beforeCreate`执行。

- 这就意味着在`setup`函数中 `this` 还不是组件实例，==`this` 此时是 `undefined`==

- 在模版中需要使用的数据和函数，需要在 `setup` 返回。

函数的setup必须return 可以写vue2的生命周期函数

<script setup>不能写vue2的生命周期函数得在生命周期函数之前加on

1. 响应式ref,Reactive

reactive声明的只能是引用数据类型的,但是使用解构赋值就不是响应式的需要使用toRefs来使之变成响应式的

2.计算属性

Vue3的写法比较多

为什么使用计算属性而不是函数

因为计算属性会进行缓存,函数是用一次调用一次.

2.1V-if和v-for的优先级高怎么解决

Vue2:template必须在一个根元素

Vue3:template可以多个根标签共存

watch函数**

定义计算属性：

watch函数，是用来定义侦听器的

监听ref定义的响应式数据

监听多个响应式数据数据

监听reactive定义的响应式数据

监听reactive定义的响应式数据，某一个属性

深度监听

默认执行

3.Vue2的侦听器和Vue3的侦听器的区别

Vue3的侦听器

4.Vue3获取DOM 的ref属性

父组件

子组件中需要暴露才能被父组件访问

Vue2的ref获取Dom

5.Props传值方式

Vue3的props传值

子组件

6.自定义事件

Vue2的

Vue3的自定义事件

父组件

子组件

7.全局事件总线

vue3 mitt

安装 cnpm install --save mitt

在main.js中