Vue3.5新特性

最新推荐文章于 2024-10-05 01:22:45 发布

Abao

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量702

点赞数 18

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_72439307/article/details/141901093

版权

响应式属性解构

响应式属性解构已经处于实验状态约一年了，但随着 3.5 版本的发布，它将成为一个稳定特性。这个特性允许你从defineProps宏中解构属性而不会失去响应性。

import { watchEffect } from 'vue'

const { count } = defineProps(['count'])

watchEffect(() => {
  // 每当父组件中的 count 属性发生变化时，这里就会记录
  console.log(count)
})

尤雨溪说：“几乎每一个在实际项目中大规模使用响应式属性解构的开发者都反馈良好。他们表示喜欢这个特性，希望看到这个特性被稳定下来。”

对于那些不想使用这个特性的人，也提供了一个标志来关闭它。

// vite.config.js
export default {
  plugins: [
    vue({
      script: {
        propsDestructure: false
      }
    })
  ]
}

useTemplateRef

<script setup>
// 首先定义一个值为 undefined 或 null 的 ref，并随意命名结果变量
const divEl = ref();
</script>

<template>
<!-- 然后在模板中的某个地方使用与 `ref` 属性值相同的名称
 -->
<div ref="divEl" ></div>
</template>

这种方法存在两个问题：

有时会令人困惑。divEl是响应式数据还是一个 DOM 元素？如果有命名模板引用的约定，那还不算太差，但最终你还必须查看模板中匹配的ref=才能确定。
此外，这限制了你只能在组件的 script 里定义模版的 refs。这意味着自定义 composables 想要访问 DOM 元素的话，必须接受一个 template 引用作为参数。

现在有了useTemplateRef，这两个问题都得到了解决。

// MyComposable
export const useMyComposable = (options = {
  templateRef: 'el'
})=>{
  // 由于函数名称的关系，很明显这是一个模板引用👇
  const theEl = useTemplateRef(options.templateRef);
}

// MyComponent
<script setup>
// 无需在组件中定义模板引用，这可以是组合函数的工作
useMyComposable()
useMyComposable({ templateRef: 'el2' })
</script>
<template>
<div ref="el"></div>
<div ref="el2"></div>
</template>

useId

新的useId工具组合函数返回一个在服务器渲染和客户端渲染中都稳定的唯一 ID。和表单元素属性（如for和id）以及 accessibility 属性一起使用非常完美。

<!--MyCustomInput-->
<script setup>
defineProps({
  label: String
  help: String
  //...
})

const inputId = uesId();
const helpTextId = useId();
</setup>
<template>

<label :for="inputId">{{label}}</label>
<input :id="inputId" :aria-describedby="helpTextId"/>
<p :id="helpTextId">{{ help }}</p>

</template>