vue3特性
- 增加了setup语法糖，用来写组合api
这是大佬对于setup的讲解：莫问前程F6的vue3之setup的使用理解 - 支持多个根节点，支持jsx
- 只引入所需要的Api
- 引入了proxy来重写双向绑定
proxy与vue2的Object.defineProperty(obj, prop, desc)方式相比有以下优势：
丢掉麻烦的备份数据
省去for in 循环
可以监听数组变化
代码更简化 - 增加了补丁标记用来标记动态文本，在vue2中数据变更是进行全量的diff计算，而在vue3中只对于有标记的动态文本进行diff计算，大大优化了vue的性能
Ref全家桶
ref 深层次响应
- 深层次响应
- 修改、取值需要加上.vlaue
shallowRef 浅层次响应
- shallowRef 浅层次响应，即数据修改后不会响应到页面
<template>
<button @click="change">修改</button>
<div>{{ man2 }}</div>
</template>
<script lang="ts" setup>
import {ref, shallowRef} from 'vue'
const man1 = ref({na: 'h,e,l,l,o'})
const man2 = shallowRef({name: 'hello word'})
const change = () => {
man2.value.name = '大满'
console.log(man2)
}
</script>
直接修改.value可以对shallowRef 绑定的数据进行视图响应
man2.value = {
name: '大满'
}
triggerRef强制更新
triggerRef强制执行更新视图，shallowRef和triggerRef一起使用可以达到ref的响应效果
<script lang="ts" setup>
import {ref, shallowRef, triggerRef} from 'vue'
const man2 = shallowRef({name: 'hello word'})
const change = () => {
man2.value.name = '大满'
triggerRef(man2)
console.log(man2)
}
//视图点击修改效果如上
</script>
shallowRef 和ref一起使用会被受到影响响应到页面上，因为ref会调用triggerRef强制执行更新视图
<template>
<button @click="change">修改</button>
<div>{{ man1 }}</div>
<div>{{ man2 }}</div>
</template>
<script lang="ts" setup>
import {ref, shallowRef} from 'vue'
const man1 = ref({na: 'h,e,l,l,o'})
const man2 = shallowRef({name: 'hello word'})
const change = () => {
man1.value.na = '大满'
man2.value.name = '大满'
console.log(man2)
}
</script>
点击修改按钮后，视图都更新了
customRef 自定义响应
可以利用customRef结合定时任务，实现防抖
!!!在修改前如果有定时器（定时时间内多次修改），那么先关闭这个定时器，再继续修改（实现防抖效果)
const guanguan = MyRef('guanguan')
function MyRef(value: string) {
let timer: any
return customRef((track, trigger) => {
return {
get() {
track() //通知value的值会被修改，需要被追踪
return value
},
set(newVal) {
clearTimeout(timer) //在修改前如果有定时器（定时时间内多次修改），那么先关闭这个定时器，再继续修改（实现防抖效果）
timer = setTimeout(() => {
value = newVal
trigger() //去通知get()要重新渲染
console.log(guanguan)
timer = null
})
}
}
})
}
const change = () => {
guanguan.value = '大美女'
}
isRef
进行响应式数据判断，返回true和false
shallowRef和customRef都可以进行属于响应式数据都可进行判断
reactive全家桶
reactive 深层次
- 只能绑定引用数据类型，object、array、map、set等
- reactive取值修改不需要加上.value，适合form表单中使用,ref需要加上.value
- 调用接口修改数组时不能直接等号赋值，会把外层的proxy覆盖掉破坏了响应式对象，导致无法响应，数组 可以使用push加字符串模板解构赋值，或者添加一个对象，把数组当作一个属性去处理
<template>
<button @click="change">修改</button>
<div>{{ guanguan }}</div>
<div>{{ guanguan1 }}</div>
</template>
<script lang="ts" setup>
import { reactive} from 'vue'
let guanguan = reactive({
off: {
name: 'guanguan'
}
})
let guanguan1 = reactive({
off: {
name: [1, 2]
}
})
const change = () => {
guanguan.off.name = '大美女'
let num = [3, 4]
let timer = setTimeout(() => {
guanguan1.off.name = num
}, 500)
}
</script>
点击修改按钮后，guanguan1的数据不会响应到视图层，不会再实现双向绑定效果
解决办法：
let timer = setTimeout(() => {
guanguan1.off = {
name: [...num]
}
}, 500)
setTimeout(() => {
guanguan1.off = {
name: []
}
guanguan1.off.name.push(...num)
}, 500)
shallowReactive 浅层次
- 直接修改无法响应到视图
- 指到第一个属性修改可以响应到视图层
- 和 reactive 一起使用会被受到影响（即响应到视图层）
<script lang="ts" setup>
import {reactive, shallowReactive} from 'vue'
let a = shallowReactive({
off: {
name: 'guanguan'
}
})
const change = () => {
a.off = {name: '大美女'} // 响应到视图层
a.off.name = '大美女' // 不响应到视图层
}
</script>
readonly isReadonly isShallow
readonly：只读
isReadonly：判断是否只读
isShallow：判断是否属于浅层次响应
<script lang="ts" setup>
import {isReadonly, isShallow, reactive, readonly, shallowReactive} from 'vue'
let guanguan = readonly(reactive({
off: {
name: 'guanguan'
}
}))
let a = shallowReactive({
off: {
name: 'guanguan'
}
})
const change = () => {
console.log(isShallow(a)) // true
console.log(isReadonly(guanguan)) //true
guanguan.off.name = '大美女' //编译器代码规范提示
}
</script>
点击事件控制台打印：
toRef toRefs 和 toRaw
toRef（对象名，key）
- toRef只对响应式对象起作用，对于非响应式对象不起作用
- 用于对象中key值的单独使用
<script lang="ts" setup>
import {reactive, toRef} from 'vue'
let guanguan = reactive({
name: 'guanguan',
sex: '女'
})
let name = toRef(guanguan, 'name')
const change = () => {
name.value = '大美女' //会响应到视图层
console.log(name)
}
</script>
toRefs（对象名）
适用于响应式对象的解构赋值
let {name, sex} = toRefs(guanguan)
原理：
const toRefs = <t extends object>(obj: T) => {
let map: any = {}
for (let key in obj) {
map[key] = toRef(obj, key)
}
return map
}
let {name, sex} = toRefs(guanguan)
</t>
toRaw
将响应式对象转为非响应式对象
console.log(guanguan)
console.log(toRaw(guanguan))
Original: https://blog.csdn.net/m0_46084075/article/details/127805602
Author: 今天不想敲代码
Title: Vue3 学习
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/657884/
转载文章受原作者版权保护。转载请注明原作者出处！