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)
})
})