【vue3】vue3.5

vue3.5是9.1发布的,还挺热乎的,赶快学习起来!!!

组件属性结构解析赋值

组件属性结构解析赋值,高度提高开发体验,这个特性曾经在vue3.3提出过,然后3.4废弃,终于3.5稳定了。下面一起来看看怎么用的吧。

html 复制代码
<script setup lang="ts">
  import { watch } from 'vue';

  // 自定义属性结构解析,可在结构解析时赋默认值
  const { count = 0, name = '张三' } = defineProps<{
    count: number;
    name: string;
  }>();

  // 监听自定义属性改变
  watch(
    () => count,
    (value) => {
      console.log('count', value);
    }
  );
</script>

<template>
  <div>{{ count }}</div>
  <div>{{ name }}</div>
</template>

内置组件teleport优化

Teleport 可以将一个组件内部的一部分模板"传送"到该组件的 DOM 结构外层的位置去,但有一个局限,传送元素只能在目标元素后面,vue3.5给 Teleport 加了一个defer属性,可以忽略这个顺序。

html 复制代码
<template>
  // 这里'传送'成功
  <div id="box1"></div>
  <teleport to="#box1">
    <div>我系渣渣辉box1</div>
  </teleport>
  <teleport to="#box2">
    <div>我系渣渣辉box2</div>
  </teleport>
  // 这里'传送'失败
  <div id="box2"></div>
  <Teleport defer to="#box3">
    <div>我系渣渣辉box3</div>
  </Teleport>
  // 这里'传送'成功
  <div id="box3"></div>
</template>

useTemplateRef

返回一个浅层 ref,其值将与模板中的具有匹配 ref attribute 的元素或组件同步。

html 复制代码
<script setup lang="ts">
  import { ref, useTemplateRef } from 'vue';
  import Comp from './Comp.vue';

  // before
  const domDiv = ref<HTMLDivElement>();
  // after
  const div = useTemplateRef('domDiv');
  const divInnerText = () => {
    div.value!.innerText = '张三6666';
  };

  // before
  // const comp = ref<HTMLDivElement>();
  // after
  const useTComp = useTemplateRef<{
    addNum: () => void;
  }>('comp');

  const addCompNum = () => {
    useTComp.value!.addNum();
    // comp.value.addNum();
  };
</script>

<template>
  <div ref="domDiv"></div>
  <button @click="divInnerText">innerText</button>
  <Comp ref="comp"></Comp>
  <button @click="addCompNum">comp num++</button>
</template>

onWatcherCleanup

注册一个清理函数,在当前侦听器即将重新运行时执行。只能在 watchEffect 作用函数或 watch 回调函数的同步执行期间调用 (即不能在异步函数的 await 语句之后调用)。这个让我想起了防抖,当然可以作为防抖来使用。

html 复制代码
<script setup lang="ts">
  import { ref, watch, onWatcherCleanup } from 'vue';
  const num = ref(0);
  watch(
    () => num.value,
    (value) => {
      const timer = setTimeout(() => {
      	// 按钮被点击停下后1秒后打印,一直点击则不触发,输入框同理
        console.log(value, '改变发生请求');
      }, 1000);
      onWatcherCleanup(() => {
        clearTimeout(timer);
      });
    }
  );
</script>

<template>
  <button @click="num++">num++</button>
</template>
相关推荐
知识分享小能手3 小时前
Vue3 学习教程,从入门到精通,Axios 在 Vue 3 中的使用指南(37)
前端·javascript·vue.js·学习·typescript·vue·vue3
伍哥的传说3 小时前
Mitt 事件发射器完全指南:200字节的轻量级解决方案
vue.js·react.js·vue3·mitt·组件通信·事件管理·事件发射器
程序员码歌5 小时前
【零代码AI编程实战】AI灯塔导航-总结篇
android·前端·后端
用户21411832636026 小时前
免费玩转 AI 编程!Claude Code Router + Qwen3-Code 实战教程
前端
一枚小小程序员哈6 小时前
基于Vue + Node能源采购系统的设计与实现/基于express的能源管理系统#node.js
vue.js·node.js·express
小小愿望7 小时前
前端无法获取响应头(如 Content-Disposition)的原因与解决方案
前端·后端
小小愿望7 小时前
项目启功需要添加SKIP_PREFLIGHT_CHECK=true该怎么办?
前端
烛阴7 小时前
精简之道:TypeScript 参数属性 (Parameter Properties) 详解
前端·javascript·typescript
海上彼尚8 小时前
使用 npm-run-all2 简化你的 npm 脚本工作流
前端·npm·node.js
开发者小天9 小时前
为什么 /deep/ 现在不推荐使用?
前端·javascript·node.js