Vue3只渲染一次 v-once

简介: Vue3只渲染一次 v-once

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>

效果:

:数据更新后,页面就不会再重新渲染了。

相关文章
|
2天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
16 2
|
2天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
10 2
|
2天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
12 1
|
2天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
13 1
|
2天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
8 1
|
3天前
|
JavaScript API
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
13 1
|
2天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
11 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
2天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
12 0
|
2天前
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
14 0
|
3天前
手写 vue3 的 ref,reactive 和 watchEffect
手写 vue3 的 ref,reactive 和 watchEffect
9 0