Vue3只渲染一次 v-once

最新推荐文章于 2024-07-04 10:41:11 发布

小吴吴吴呀

最新推荐文章于 2024-07-04 10:41:11 发布

阅读量578

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/xiaowude_boke/article/details/136486935

版权

本文介绍了Vue中的v-once指令，它用于确保元素或组件在初次渲染后不会因数据变化而重复渲染，适用于不需要频繁更新展示的内容。通过实例展示了如何在模板和组件中使用v-once并保持其效果。

摘要由CSDN通过智能技术生成

v-once 指令：用于只渲染一次，首次渲染后，就不会再重新渲染了。

v-once 指令：也可以用在组件上，使组件只加载一次。

语法格式：

// 在标签中使用
<div v-once> {{ 数据 }} </div>

// 在组件中使用
<组件名 v-once></组件名>

基础使用：

<template>
  <h3>只渲染一次 v-once</h3>
  <p v-once>当前的num值是：{{ num }}</p>
  <button @click="add">点击num加1</button>
</template>

<script setup>
import { ref } from "vue";
let num = ref(1);
const add = () => {
  num.value++;
  console.log(num.value);
}
</script>

效果：