邯郸市住房和城建设局网站,旅游网页设计说明,wordpress发表的文章点不开,光明网你好同学#xff0c;我是沐爸#xff0c;欢迎点赞、收藏、评论和关注。
在 Vue 3.5 中#xff0c;响应式 Props 解构已经稳定并默认启用。这意味着在 script setup 中从 defineProps 调用解构的变量现在是响应式的。这一改进大大简化了声明带有默认值的 props 的方…你好同学我是沐爸欢迎点赞、收藏、评论和关注。
在 Vue 3.5 中响应式 Props 解构已经稳定并默认启用。这意味着在 script setup 中从 defineProps 调用解构的变量现在是响应式的。这一改进大大简化了声明带有默认值的 props 的方式并使得在子组件中直接使用解构后的 props 变量时能够保持响应性。
最新语法
Vue 的响应系统基于属性访问跟踪状态的使用情况。例如在计算属性或侦听器中访问 props.foo 时foo 属性将被跟踪为依赖项。
因此在以下代码的情况下
const { foo } defineProps([foo]);
watchEffect(() {// 在 3.5之前只运行一次// 在 3.5 中在 foo prop 变化时重新执行console.log(foo);
});在 3.5 之前的版本中 foo是一个实际的常量永远不会改变。在 3.5 及以上版本当在同一个 script setup 代码块中访问由 defineProps 解构的变量时Vue 编译器会自动在前面添加 props.。因此上面的代码等同于以下代码
const props defineProps([foo]);
watchEffect(() {// foo 由编译器转换为props.fooconsole.log(props.foo);
});此外你可以使用 JavaScript 原生的默认值语法声明 props 默认值。这在使用基于类型的 props 声明时特别有用。
const { foo hello } defineProps{ foo?: string }()watch 监听解构的 props
const { foo } defineProps([foo]);watch(foo, /_ ... _/);这并不会按预期工作因为它等价于 watch(props.foo, ...)——我们给 watch 传递的是一个值而不是响应式数据源。实际上Vue 的编译器会捕捉这种情况并发出警告。
与使用 watch(() props.foo, ...) 来侦听普通 prop 类似我们也可以通过将其包装在 getter 中来侦听解构的 prop
watch(() foo/* ... */
);此外当我们需要传递解构的 prop 到外部函数中并保持响应性时这是推荐做法
useComposable(() foo);外部函数可以调用 getter (或使用 toValue 进行规范化) 来追踪提供的 prop 变更。例如在计算属性或侦听器的 getter 中。
示例一 watchEffect 3.5 版本
templatediv{{ content }}/div
/templatescript setupimport { defineProps, watchEffect } from vue;// 解构 props注意这里的变量是响应式的const { content } defineProps([content]);watchEffect(() {// 在 3.5 之前只运行一次// 在 3.5 中在 content prop 变化时重新执行console.log(content);});
/script3.5 前的版本
templatediv{{ content }}/div
/templatescript setupimport { defineProps, watchEffect } from vue;const props defineProps([content]);watchEffect(() {console.log(props.content);});
/script示例二 watch 3.5 版本
templatediv{{ content }}/div
/templatescript setupimport { defineProps, watch } from vueconst { content } defineProps([content])watch(() content,(newValue) {console.log(newValue))
/script3.5 前的版本
templatediv{{ content }}/div
/templatescript setupimport { defineProps, watch } from vueconst props defineProps([content])watch(() props.content,(newValue) {console.log(newValue))
/script示例三 computed 3.5 版本
templatediv{{ content }}br /{{ formatContent }}/div
/templatescript setupimport { defineProps, computed } from vue;const { content } defineProps([content]);const formatContent computed(() content.toUpperCase());
/script3.5 前的版本
templatediv{{ content }}br /{{ formatContent }}/div
/templatescript setupimport { defineProps, computed } from vue;const props defineProps([content]);const formatStr computed(() props.content.toUpperCase());
/script好了分享结束谢谢点赞下期再见。
