vue3.5新功能之响应式props支持解构

前端大波

于 2024-11-13 10:32:17 发布

阅读量291

点赞数 3

文章标签： vue.js javascript 前端

版权

响应式props支持解构

在vue3.5正式版本中终于对响应式props支持了解构。在以前的版本中我们想要访问props中的内容，必须这样写：props.data，否则data将会丢失响应式。

但是在3.5版本中我们可以这样写：

<script setup lang="ts">
const { data } = defineProps({
  data: Object,
});

console.log(data);
</script>

问题来了，他内部是怎么处理的呢，跟随大波一起来看一下它编译后的代码：

setup(__props) {
  console.log(__props.data);
  const __returned__ = {};
  return __returned__;
}

我们可以看到console.log(data)编译后居然变成了console.log(__props.name)了，经过这样处理之后响应式当然不会丢失啦。