尚硅谷Vue学习——v-once指令

最新推荐文章于 2025-06-14 18:46:40 发布

原创最新推荐文章于 2025-06-14 18:46:40 发布 · 165 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#学习

Vue学习专栏收录该内容

45 篇文章

订阅专栏

本文介绍了 Vue 的 v-once 指令，该指令用于将元素及其子元素标记为一次性渲染，避免后续数据变化时这部分内容的更新。通过示例代码展示了如何在页面中使用 v-once，以及它如何帮助优化性能，特别是在处理大量静态内容时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：

可以将一个会被改变的值变为在页面上不变的，实现初始数据与改变之后数据的比较。

特点：

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once指令的使用</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h3>欢迎和{{name}}一起学习</h3><hr>
        <h3 v-once>初始化的值{{n}}</h3>
        <h3>当前n的值是{{n}}</h3>
        <button @click="n++">点我让n+1</button>
    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip =  false // 阻止 vue 在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            name:'才疏学浅的小缘同学',
            n:0
        }
    })
</script>
</html>