vue3.5新增特性

2024-09-06 15:36

文章标签 特性新增 vue3.5

本文主要是介绍vue3.5新增特性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.响应式内部源码优化

2.Props的解构

比较方便设置默认值
解构后依旧是响应式

// 子组件
const { message = "默认值message", count = 0 } = defineProps({message:String,count: Number
})// 编译器会自动对解构变量（message,count）的访问编译到props.count中，因此在访问时会跟踪它
// 所有在watch解构的props时，需要放到getter中watch( () => count, (newV) => {console.log("count发生变化",newV)
})

3.SSR优化

4.自定义元素改善

5.其他相关特性

useTemplateRef

// template
<input type="text" ref="customKey">
<button @click="focus">获取焦点</button>
// scriptimport { useTemplateRef } from "vue"
const inputRef = useTemplateRef("customKey")
const focus = () => {inputRef.value.focus()
}

defer Teleport

// teleport组件作用是挂载到目标元素下
// 内置teleport组件的约束为：在挂载teleport组件时，其目标元素必须存在。意思是目标元素必须在teleport之前
// 在3.5中加入了defer属性，它会在渲染周期之后挂载它
<Teleport defer to="#targetEl"><div>挂载的的内容</div>
</Teleport><div id="targetEl"></div>

onWatcherClearup

// 当我们侦听某个数据，并在数据改变后操作，如果我们多次触发，想只保留最后一次。
// 比如，我们侦听id改变获取数据，多次触发，想只根据最后id请求获取数据，取消之前的请求<button @click="id++">id 改变</button>import {ref，watch，onWatcherClearup} from "vue"
const id = ref(0)watch(id,(newV)=>{const timer = setTimeOut(()=>{// 多次连续点击，只会打印最后一次console.log("根据id获取的结果",newV)},2000)// 清除上一次watchonWatcherClearup(()=>{clearTime(timer)})
})