vue3.5新增特性

1.响应式内部源码优化

2.Props的解构

  • 比较方便设置默认值
  • 解构后依旧是响应式
javascript 复制代码
// 子组件
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
javascript 复制代码
// template
<input type="text" ref="customKey">
<button @click="focus">获取焦点</button>
// script

import { useTemplateRef } from "vue"
const inputRef = useTemplateRef("customKey")
const focus = () => {
	inputRef.value.focus()
}
  • defer Teleport
javascript 复制代码
// teleport组件作用是挂载到目标元素下
// 内置teleport组件的约束为:在挂载teleport组件时,其目标元素必须存在。意思是目标元素必须在teleport之前
// 在3.5中加入了defer属性,它会在渲染周期之后挂载它
<Teleport defer to="#targetEl">
	<div>挂载的的内容</div>
</Teleport>

<div id="targetEl"></div>
  • onWatcherClearup
javascript 复制代码
// 当我们侦听某个数据,并在数据改变后操作,如果我们多次触发,想只保留最后一次。
// 比如,我们侦听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)
	// 清除上一次watch
	onWatcherClearup(()=>{
    	clearTime(timer)
    })
})
相关推荐
顾青6 分钟前
微信小程序实现身份证识别与裁剪(基于 VisionKit)
前端·微信小程序
星链引擎7 分钟前
技术深度聚焦版(侧重技术原理与代码细节)
前端
呵阿咯咯7 分钟前
ueditor富文本编辑器相关问题
前端
月弦笙音7 分钟前
【Vue3】Keep-Alive 深度解析
前端·vue.js·源码阅读
地方地方7 分钟前
手写 AJAX 与封装 MyAxios:深入理解前端网络请求
前端·javascript·面试
该用户已不存在13 分钟前
7个没听过但绝对好用的工具
前端·后端
渣哥29 分钟前
代理选错,性能和功能全翻车!Spring AOP 的默认技术别再搞混
javascript·后端·面试
遇见火星33 分钟前
Docker入门:快速部署你的第一个Web应用
前端·docker·容器
WeilinerL1 小时前
泛前端代码覆盖率探索之路
前端·javascript·测试
浮游本尊1 小时前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js