Vue3.5正式上线,父传子props用法更丝滑简洁

摘要

Vue3.52024-09-03正式上线,目前在Vue官网显最新版本已经是Vue3.5,其中主要包含了几个小改动,我留意到日常最常用的改动就是props了,肯定是用Vue3的人必用的,所以针对性说一下props两个小改动使我们日常使用更加灵活。

一、带响应式Props解构赋值

简述: 以前我们对Props直接进行解构赋值是会失去响应式的,需要配合使用toRefs或者toRef解构才会有响应式,那么就多了toRefs或者toRef这工序,而最新Vue3.5版本已经不需要了。

这样直接解构,testCount能直接渲染显示,但会失去响应式,当我们修改testCount时页面不更新。

javascript 复制代码
<template>
  <div>
    {{ testCount }}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  const props = defineProps({
    testCount: {
      type: Number,
      default: 0,
    },
  });

  const { testCount } = props;
</script>

保留响应式的老写法,使用toRefs或者toRef解构

javascript 复制代码
<template>
  <div>
    {{ testCount }}
  </div>
</template>

<script setup>
  import { defineProps, toRef, toRefs } from 'vue';
  const props = defineProps({
    testCount: {
      type: Number,
      default: 0,
    },
  });

  const { testCount } = toRefs(props);
  // 或者
  const testCount = toRef(props, 'testCount');
</script>

最新Vue3.5写法,不借助"外力"直接解构,依然保持响应式

javascript 复制代码
<template>
  <div>
    {{ testCount }}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  const { testCount } = defineProps({
    testCount: {
      type: Number,
    },
  });

</script>

相比以前简洁了真的太多,直接解构使用省去了toRefs或者toRef

二、Props默认值新写法

简述:以前默认值都是用default: ***去设置,现在不用了,现在只需要解构的时候直接设置默认值,不需要额外处理。

如下第12就是旧写法,其它以前Vue2也是这样设置默认值

javascript 复制代码
<template>
  <div>
    {{ props.testCount }}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  const props = defineProps({
    testCount: {
      type: Number,
      default: 1
    },
  });
</script>

最新优化的写法 如下第9行,解构的时候直接一步到位设置默认值,更接近js语法的写法。

javascript 复制代码
<template>
  <div>
    {{ testCount }}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  const { testCount=18 } = defineProps({
    testCount: {
      type: Number,
    },
  });
</script>

总结

这次更新其实props的本质功能并没有改变,但写法确实变的更加丝滑好用了,props使用非常高频感觉还是有必要跟进这种更简洁的写法。

相关推荐
Senar20 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴37 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言42 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml