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>

效果:

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

相关文章
|
4天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
14 0
|
4天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
4天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
20 0
|
4天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
26 0
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
8 1
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
10 0
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
8 0
|
4天前
|
JavaScript 前端开发 API
Vue3 系列:从0开始学习vue3.0
Vue3 系列:从0开始学习vue3.0
10 1
|
4天前
|
网络架构
Vue3 系列:vue-router
Vue3 系列:vue-router
9 2
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
9 1