Vue的 v-once 指令（只在首次加载时更新一次内容）

最新推荐文章于 2023-12-20 23:07:23 发布

zbw00￥

最新推荐文章于 2023-12-20 23:07:23 发布

阅读量1k

点赞数

文章标签： javascript vue

本文链接：https://blog.csdn.net/qq_44277696/article/details/120475958

版权

v-once

作用：专门标记一个元素只在首次加载时更新一次内容，之后，即使变量发生变化，元素内容也不更新。
原理：new Vue（）扫描到 v-once 后，只更新一次v-once所在元素的内容，并且不会将v-once加入虚拟DOM树,今后,即使变量值发生变化,也无法通知到v-once所在的元素,自然不会更新元素的内容
优化: 如果今后发现个别元素只需要在首次页面加载更新一次,之后不会在更新,都可以用v-once标记,进一步减少虚拟DOM树种元素的个数,进一步提高虚拟DOM树的效率
代码:

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <div v-once>上线时间:{{time}}</div>
      <div>当前系统时间:{{time}}</div>
    </div>
    <script>
      setTimeout(() => {
        var vm = new Vue({
          el: "#app",
          data: {
            time: new Date().toLocaleString(),
          },
          mounted(){
            this.getTime();
          },
          methods:{
            getTime(){
                setInterval(() => {
                    this.time = new Date().toLocaleString();
                }, 1000);
            }
          }
        });
      }, 1000);
    </script>
  </body>
</html>

zbw00￥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的 v-once 指令（只在首次加载时更新一次内容）

v-once作用：专门标记一个元素只在首次加载时更新一次内容，之后，即使变量发生变化，元素内容也不更新。原理：new Vue（）扫描到 v-once 后，只更新一次v-once所在元素的内容，并且不会将v-once加入虚拟DOM树,今后,即使变量值发生变化,也无法通知到v-once所在的元素,自然不会更新元素的内容优化: 如果今后发现个别元素只需要在首次页面加载更新一次,之后不会在更新,都可以用v-once标记,进一步减少虚拟DOM树种元素的个数,进一步提高虚拟DOM树的效率代码:<!D
复制链接

扫一扫