超级会员免费看
目录
vue2开发缺点和vue3开发优点
- vue2代码冗余，杂乱
- vue3则可以把相关的功能代码抽离分割在一起，方便开发者快速阅读
1.setup使用
- setup函数是 Composition API（组合API）的入口
- setup是启动页面后会自动执行的一个函数
- 项目中定义的所有变量，方法等都需要在setup中
- 在setup函数中定义的变量和方法最后都需要 return 出去， 否则无法在视图层中使用
setup(){
console.log('自动执行')
const name = '林一'
const age = 20
const company = '阿里巴巴'
const btn = ()=>{
const res = `我叫${name},今年${age}岁了,在${company}上班`
console.log(res)
}
// 计算属性
// 侦听器
return {name,btn}
}2.生命周期函数
- onBeforeMount —— 在挂载开始之前被调用
- onMounted —— 组件挂载时调用
- onBeforeUpdate —— 数据更新时调用
- onUpdated —— 数据更改导致的虚拟 DOM 重新渲染，在这之后会调用该钩子
- onBeforeUnmount —— 在卸载组件实例之前调用
- onErrorCaptured —— 当捕获一个来自子孙组件的错误时被调用
Vue应用程序中有4个主要事件
- 创建 — 在组件创建时执行
- 挂载 — DOM 被挂载时执行
- 更新 — 当响应数据被修改时执行
- 销毁 — 在元素被销毁之前立即运行
import { onBeforeMount, ....... } from 'vue'3.vuex
- 同vue2一致
- 需要安装，引入
//安装
npm install vuex@next --save
//引入
import {useStore} from 'vuex'4.toRef介绍
- toRef也可以创建一个响应式数据
- ref本质是拷贝粘贴一份数据，脱离了与原数据的交互
- ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据,但是会更新视图层
- toRef的本质是引用，与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
- 使用需引入
import {toRef} from 'vue'
//toRef接收两个参数，第一个参数是要操作的对象，第二个参数是对象的某个属性
const obj = {name:'林一'}
toRef(obj,'name')setup(){
const obj = {name:'林一',age:40}
// const res = ref(obj.name)
const res = toRef(obj,'name')
const btn = ()=>{
res.value = '林二'
console.log(res)
console.log(obj)
}
return {res,btn}
}5.ref介绍
- ref 为我们的值创建了一个响应式引用
- 使用需引用
import {ref} from 'vue'//组合式api
ref('林一')- 当ref里的值发生改变时，视图层会自动更新
- ref可操作基本数据类型，也可以操作复杂数据类型：对象，数组
- 建议：ref用来操作基本数据类型：数字，字符串
setup(){
const name = ref('林一')
const age = ref(52)
const company = ref('阿里巴巴')
// 对象类型
const obj = ref({
taobao:'淘宝',
tamll:'天猫'
})
// 数组类型
const arr = ref([
{
xiami:'林二',
huabei:'京东'
}
])
const btn = ()=>{
// 响应对象类型
// name.value = '林三'
// obj.value.taobao = '淘宝000'
// console.log(obj)
// 响应数组类型
arr.value[0].xiami = '京东000'
console.log(arr)
}
return {name,age,company,btn,obj,arr}
}6.组件传值
//第一种：进入页面即刻传值（祖孙传值）
const p1 = reactive({name:'林一',age:52})
provide('p',p1)//祖传
const res = inject('p')//孙收
//第二种：点击传值
<Vue ref="val"/>//引入子组件，使用ref调用该子组件
const val = ref()
const p1 = reactive({name:'林一',age:52})
function btn(){
val.value.receive(p1)
}7.shallowRef和shallowReactive
- shallowRef只处理基本类型数据
- shallowReactive只处理第一层数据
- 使用需引入
import { shallowReactive,shallowRef } from 'vue'setup() {
//shallowReactive:只处理第一层的数据
const p1 = shallowReactive({
name:'林一',
product:{
taobao:5
}
})
// shallowRef:只处理基本类型数据
const p2 = shallowRef({
val:1
})
console.log(p2)
return{...toRefs(p1),p2}
},8.watchEffect
- watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖
- watch 可以获取到新值与旧值（更新前的值），而 watchEffect是拿不到的
- watchEffect不需要指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性， 那么当这些属性变更的时候，这个回调都会执行，而 watchEffect 只能监听指定的属性而做出变更
- 使用需引入
import { watchEffect } from 'vue'setup() {
const p1 = ref(0)
const p2 = ref(1)
const p3 = reactive({
name:'林一',
age:50,
product:{
wx:14
}
})
const S = watchEffect(()=>{
const a = p1.value
const b = p2.value
console.log('进入页面我就执行')
})
S()//停止监听
return {p1,p2,p3}
},9.watch侦听器
- 与vue2一致，均是用来侦听数据变化的，没有缓存，可监听data中数据，支持异步
- 使用需引入
mport { watch } from 'vue'setup() {
const p1 = ref(0)
const p2 = ref(1)
const p3 = reactive({
name:'林一',
age:50,
product:{
wx:14
}
})
// 一：侦听ref的基本数据
// watch(p1,(newVal,oldVal)=>{
// console.log(newVal,oldVal)
// },{immediate:true})//{immediate:true}立即侦听
// 二：侦听多个ref响应数据
// watch([p1,p2],(newVal,oldVal)=>{
// console.log(newVal,oldVal)
// })
// 三：侦听整个reactive定义的数据:只能监听到最新的结果，之前的结果监听不到
// watch(p3,(newVal,oldVal)=>{
// console.log(newVal,oldVal)
// })
// 四：侦听reactive定义的数据中的某一个值:可以监听到,无论层级有多深
watch(()=>p3.product.wx,(newVal,oldVal)=>{
console.log(newVal,oldVal)
})
return {p1,p2,p3}
},10.computed
- 与vue2一致，均是用来监听数据变化
- 是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新
- 不能再data中出现同样的名字
- 使用需引入
import { computed } from 'vue'setup() {
const mayun = ''
const huateng = ''
const res = reactive({linyi,liner})
// 计算年龄总和
const sum = computed({
get(){
return res.linyi + res.liner
},
set(val){
console.log(val)
}
})
return {...toRefs(res),sum}
}11.reactive介绍
- reactive同样为我们的值创建了一个响应式引用
- 定义基本普通类型数据不能用reactive，用ref
- reactive主要定义复杂数据类型，比如数组，对象
- reactive可响应深层次的数据，比如多维数组
- reactive返回一个响应式的proxy对象
- 使用需引入
import { reactive } from 'vue'
reactive({name:'林一'})setup(){
// const name = reactive({name:'林一'})
// const age = reactive({age:20})
// const company = reactive({company:'阿里巴巴'})
// // 深层次响应式
// const pro = reactive({
// a:'淘宝',
// b:'天猫',
// c:{
// d:'京东',
// e:'顺丰'
// }
// })
const btn = ()=>{
// name.name = '林二'
// age.age = 40
// pro.c.d = '京东0000'
res.name = '林三'
}
// 共用一个reactive
const name = '林四'
const age = 52
const company = '阿里巴巴'
const res = reactive({name,age,company})
return {res,btn}
}12.toRefs介绍
- 用于批量设置多个数据为响应式数据
- toRefs与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
- toRefs还可以与其他响应式函数交互，更加方便处理视图层数据
- 使用需引入
import {toRefs} from 'vue'
toRefs(obj)setup(){
const obj = {name:'林一',age:40}
const refs = reactive(obj)
// const res = toRefs(refs)
const btn = ()=>{
// res.name.value = '林三'
// console.log(res)
console.log(refs)
refs.name = '林二'
console.log(refs)
console.log(obj)
}
return {...toRefs(refs),btn}
}13.Fragment
- 在Vue2中: 组件必须有一个根标签
- 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
- 好处: 减少标签层级, 减小内存占用
14.Teleport
`Teleport` 是一种能够将我们的<strong style="color:#DD5145">组件html结构</strong>移动到指定位置的技术。
<teleport to="移动位置">
<div v-if="isShow" class="mask">
<div class="dialog">
<h3>我是一个弹窗</h3>
<button @click="isShow = false">关闭弹窗</button>
</div>
</div>
</teleport>15.Suspense
- 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
- 使用步骤：
- 异步引入组件
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))使用```Suspense```包裹组件，并配置好```default``` 与 ```fallback```
<template>
<div class="app">
<h3>我是App组件</h3>
<Suspense>
<template v-slot:default>
<Child/>
</template>
<template v-slot:fallback>
<h3>加载中.....</h3>
</template>
</Suspense>
</div>
</template>
⭐️⭐️⭐️ 作者：船长在船上
🚩🚩🚩 主页：来访地址船长在船上的博客
🔨🔨🔨 简介：CSDN前端领域博客专家，CSDN前端领域优质创作者，资深前端开发工程师，专注web前端领域开发，在CSDN分享工作中遇到的问题以及问题解决方法和对项目开发的实际案例总结以及新技术的认识。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
