大连 手机网站案例,国家正规现货交易平台,设计师互动网站,开发网站定制本节说明介绍vue3中的特殊属性#xff1a;key、is、ref#xff1b; 其中key、is用法vue2、vue3基本一致#xff0c;而ref在vue3 中与vue2中出入较大
1、key作用与用途
vue3与vue2的diff虚拟算法不相同#xff0c;后续章节会专门介绍
vue使用虚拟算法时#xff0c;用于标…本节说明介绍vue3中的特殊属性key、is、ref 其中key、is用法vue2、vue3基本一致而ref在vue3 中与vue2中出入较大
1、key作用与用途
vue3与vue2的diff虚拟算法不相同后续章节会专门介绍
vue使用虚拟算法时用于标识DOM元素比较新旧节点识别虚拟节点
若没有key的时候vue会使用一种最小化元素移动算法尽可能的就地复用更新原则 有key时则将根据 key 的变化顺序来重新排列元素并且将始终移除/销毁 key 已经不存在的元素
切记 key是number | string | symbol 类型不能是object类型 并且一定不要使用 new Date() 的结果作为 key 值因为每次创建 Date 对象都会创建一个新的key值导致 key 值变化从而导致 DOM 元素被不停地销毁和创建从而会导致页面内存溢出特别是对于大型列表数据一定要绑定唯一的key值
ulli v-foritm in lists :keyitm.id{{itm.name}}/li
/ul2、模板中的ref
在vue2中ref是给组件或者元素添加一个标识方便我们后续获取到该组件或者元素进而调用该组件或元素的方法属性 但是vue3中模板中的ref 需要与 ref() 创建的属性名称保持一致 如下
templatediv classhome-containerAbout refabout/About/div
/template
script setup
import { ref } from vue
const about ref() // 必须与模板dom 中ref 同名需要等组件挂载完成之后才能使用
/script注意在vue3中script setup组件模式是私有的 一个父组件无法访问到一个使用了 script setup 的子组件中的任何东西除非子组件在其中通过 defineExpose 宏显式暴露 详情请查看第十三节组件之间通讯
3、is用途
用于绑定动态组件
比如
templatecomponent :iscomName/componentel-button clickhandleChangeCom切换组件/el-button
/template// comName 为动态组件名称
script setupimport { ref, markRaw } from vueimport Work from ./work.vue // 组件内容 The job is GeYous live.import UserInfo from ./userInfo.vue // 组件内容用户信息const workRaw markRaw(Work) // 注意这里需要使用markRaw 将组件标记为静态的或者shallowRef 将组件标记为只有浅层代理的否则会警告导致渲染失败const userInfoRaw markRaw(UserInfo)let comName ref(workRaw)const handleChangeCom () {console.log(, comName)if (comName.value workRaw) {comName.value userInfoRaw} else {comName.value workRaw}}
/script还有一种特殊情况使用is 有时需要 Vue 用其组件来替换原生元素如 DOM 内模板解析注意事项所述。你可以在 is attribute 的值中加上 vue: 前缀这样 Vue 就会把该元素渲染为 Vue 组件
templateulli isvue:my-lists-component/li // 这里会被渲染为 my-lists-component 组件/ul
/template仅代表个人见解如有错误欢迎批评指正
