浙江华洋建设有限公司网站,音乐接单推广app平台,苏州网站建设丶好先生科技,网站做排行多少费用本文章介绍vue3.5更新的几个新特性
1.vue中watch中深度监听更新的层级
在之前deep 属性是一个boolean值 我们要监听对象的变化需要使用deep: true 在vue3.5之后 deep 也可以是一个number 表示对象要监听的层级数量 这个功能还是比较实用的 因为层级过深的时候我们可能需要监听…本文章介绍vue3.5更新的几个新特性
1.vue中watch中深度监听更新的层级
在之前deep 属性是一个boolean值 我们要监听对象的变化需要使用deep: true 在vue3.5之后 deep 也可以是一个number 表示对象要监听的层级数量 这个功能还是比较实用的 因为层级过深的时候我们可能需要监听数据所在层级没有那么什么就不需要全部监听 可以优化性能
templatedivbutton clickchangechange/button/div
/template
script setup langts
import { ref, watch } from vue
let obj ref({a: {n1: 0,b: {n2: 0,c: {n3: 0,d: {n4: 0,e: {n5: 0}}}}}
})
watch(obj, (val) {console.log(val)
}, {deep: 2
})const change () {obj.value.a {q: 0}
}
/script在 vue3.4 中watch 配置中还新增一个once 属性 只监听一次数据变化
watch(obj, (val) {console.log(val)
}, {deep: 2,once: true
})2.vue中之前响应式数据的定义和获取组件的示例都是用 ref 这个函数定义 vue3.5之后引入新的定义获取ref的函数 useTemplateRef
基本使用 之前的使用方式const inputDom ref(null)input value refinputDom /获取dominputDom.value.focus()3.5新增templatedivinput value reftestRef /button clickonHandler获取焦点/button/div/templatescript setup langtsimport { useTemplateRef } from vueconst inputRef useTemplateRef(testRef)const onHandler () {inputRef.value.focus()}/script3.Teleport 传送组件
Teleport 组件新增一个 defer 之前传送组件只能传送到 定义传送组件之前已经存在dom里面 现在新增这个defer属性 可以传送到 定义在传送组件后面的dom中
TestTeleport.vaue
templatediv Teleport defer to#demo_1 div teleport test /div/Teleport!-- 加上defer 属性可以将Teleport 组件放到demo_1 结构下面 --div iddemo_1/div/div
/templateHome.vue
templatemain!-- 组件渲染之前已经存在dom结构 --div idtest/divTeleportDemo //main
/template4.props 3.5之后新增一个比较好用的功能 对props解构
之前对 props 进行结构不能实现vue的响应式更新 并且对props 赋默认值需要使用 withDefaults 包裹有一点点麻烦 如果要想实现对props 结构需要使用 toRef/ toRefs
TestProps.vue
templatedivtest propspmsg: {{ msg }}/ppcount: {{ count }}/p/div
/template
script setup langts
import { watch } from vueconst { msg, count } defineProps{msg: string,count: number
}()watch(() count, (val) {console.log(val)
})/scriptHome.vuetemplatemainTestProps :msgmsg :countcount /button clickonTesttest/button/main
/template
script setup langts
import TestProps from ../components/TestProps.vue
import { ref } from vue
let msg refstring(21323123)
let count refnumber(1)
function onTest() {count.value
}
/script5. onWatcherCleanup 新增api
这个api 也是优化watch 监听 如果要监听的属性变化很快而且我们在处理变化的之后的逻辑比较复杂 会很影响性能 之前处理这种操作可以使用防抖函数 现在vue 给我们提供了一种解决方法 templatediv{{ num }}button clickonTest1/button/div/templatescript setup langtsimport {ref, watch, onWatcherCleanup } from vuelet num refnumber(0)watch(num, (val) {let timer setTimeout(() {console.log(val)}, 1000) onWatcherCleanup(() {clearTimeout(timer)})})const onTest () {num.value }/script 注意 如果使用setTimeout测试间隔时间不能小于200ms 如果小于200毫秒 setTimeout 中的打印语句还是会执行的
以上就是我对vue3.5 更新的新特性的整理 如有错误欢迎指出
