简单了解Vue3

了解VUE3

vite基本使用

vite是什么：

• 它是一个更加轻便（热更新速度快，打包构建速度快）的vue项目脚手架工具。

• 相对vue-cli它默认安装的插件少，随着开发过程依赖增多，需要自己额外配置。

  vite基本使用：

  • 创建项目 npm init vite-app 项目名称 或者 yam create vite-app 项目名称
  • 安装依赖 npm 或 yam
  • 启动项目 npm run dev 或者 yam dev

创建vue应用

基本步骤：

• 在main.js 导入createApp函数
• 定义App.vue组件，导入main.js
• 使用createApp函数基于App.vue组件创建应用实例
• 挂载至index.html的#app容器

选项API和组合API

选项API

• 在vue2.x项目中使用的就是选项API写法，代码风格：data选项写数据，methods选项写函数，一个功能逻辑的代码分散。
• 优点：易于学习和使用，写代码的位置已经约定好
• 缺点：代码组织性差，相似的逻辑代码不便于复用，复杂代码多了不好阅读
• 补充：虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率大，不好维护。

组合API

• 在vue3.0项目中将会使用组合API写法，代码风格：一个功能逻辑的代码组织在一起（包含数据，函数…）

• 优点：功能逻辑复杂繁多的情况下，各个功能逻辑代码组织在一起，便于阅读和维护。

• 缺点：需要有良好的代码组织能力和拆分逻辑能力。

组合API函数

组合API-setup函数

• setup是一个新的组件选项，作为组件中使用组合API的起点
• 从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
• 这就意味着在setup函数中this还不是组件实例，this此时是undefined
• 模板中需要使用的数据和函数，需要在setup返回。

组合API-生命周期

vue2.x生命周期钩子函数：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

vue3.0生命周期钩子函数

• setup创建实例前
• onBeforeMount挂载DOM前
• onMounted挂载DOM后
• onBeforeUpdate更新组件前
• onUpdated更新组件后
• onBeforeUnmount卸载销毁前
• onUnmounted卸载组件后

总结：组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。

组合API-reactive函数

定义响应式数据：

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。
• 通常是用来定义响应式对象数据。

组合API-toRef函数

定义响应式数据：

• toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

组合API-Refs函数

定义响应式数据：

• toRefs是函数，转化响应式对象中所有属性为单独响应式数据，对象成为普通对象。

组合API-ref函数

定义响应式数据：

• ref函数，常用于简单数据类型定义为响应式数据
• 在修改值，获取值的时候，需要.value
• 在模板中使用ref申明的响应式数据，可以省略.value

ref与reactive的使用场景

• 当你明确知道需要的是一个响应式数据对象，那么就使用reactive
• 其他情况使用ref

组合API-computed函数

定义计算属性：

• computed函数，是用来定义计算属性的，计算属性不能修改。

计算属性的两种用法

• 给computed传入函数，返回值就是计算属性的值
• 给computed传入对象，get获取计算属性的值，set监听计算属性改变

组合API-watch函数

定义计算属性：

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

监听ref定义的响应式数据

watch(ref的数据,()=>{})

监听多个响应式数据

watch([a,b],()=>{})

监听reactive定义的响应式数据

watch(reactive的数据,()=>{})

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

watch(()=>data.name,()=>{})

监听深层

watch(obj,()=>{},{deep:true,immediate:true})

组合API-ref属性

获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开

获取单个DOM或者组件

1.先定义一个空响应式数据ref定义

2.setup中返回该数据，你想要获取那个dom元素，在该元素上使用ref属性绑定该数据即可

获取v-for遍历的DOM或者组件

1.定义一个空数组，接收所有遍历出来的元素

2.定义一个函数，往空数组push DOM

组合API-父子通讯

父传子：在setup中使用props数据 setup(props){ // props就是父组件数据}

子传父：触发自定义事件的时候emit来自 setup(props,{emit}){ // emit就是触发事件函数}

在vue2.0中v-model和.sync已经合并成v-model指令

组合API-依赖注入

使用场景：有一个父组件，里头有子组件，以及很多后代组件，共享父组件数据。

provide函数提供数据和函数给后代组件使用

inject函数给当前组件注入provide提供的数据和函数

v-model语法糖

在vue2.0中，v-model语法糖简写的代码 <c:value=“msg” @input = “msg = $event” />

在vue3.0中，v-model语法糖所有调整:<Son modelValue = “msg” @update:modelValue = “msg = $event” />

vue3.0封装组件支持v-model的时候，父传子:modelValue 子传父 @update:modelValue