了解VUE3
vite基本使用
vite是什么：
创建vue应用
基本步骤：
- 在main.js 导入createApp函数
- 定义App.vue组件，导入main.js
- 使用createApp函数基于App.vue组件创建应用实例
- 挂载至index.html的#app容器
选项API和组合API
选项API
- 在vue2.x项目中使用的就是选项API写法，代码风格：data选项写数据，methods选项写函数，一个功能逻辑的代码分散。
- 优点：易于学习和使用，写代码的位置已经约定好
- 缺点：代码组织性差，相似的逻辑代码不便于复用，复杂代码多了不好阅读
- 补充：虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率大，不好维护。
组合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函数
定义计算属性：
监听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
|