Vue面试题34：v-once的使用场景有哪些？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 分析

  • v-once是Vue中内置指令，很有用的API，在优化方面经常会用到，不过小伙伴们平时可能容易忽略它；

• 体验

  • 仅渲染元素和组件一次，并且跳过未来更新，直接从缓存中获取保存的状态：

  • <!-- single element -->
    <span v-once>This will never change:{{msg}}</span>
    
    <!-- the element have children -->
    <div v-once>
      <h1>Comment</h1>
      <p>{{msg}}</p>
    </div>
    
    <!-- component -->
    <my-component v-once :comment="msg"></my-component>
    
    <!-- 'v-for' directive -->
    <ul>
      <li v-for="i in list" v-once>{{}}</li>
    </ul>
    

• 思路

  • 1.v-once是什么；
  • 2.什么时候使用；
  • 3.如何使用；
  • 4.扩展v-memo；
  • 5.探索原理；

• 回答范例

  • 1.v-once是vue的内置指令，作用是仅渲染指定组件或元素一次，并跳过未来对其的更新；
  • 2.如果我们有一些元素或者组件在初始化渲染之后不再需要变化，这种情况下适合使用v-once，这样哪怕这些数据变化，vue也会跳过更新，是一种代码优化手段；
  • 3.我们只需要作用的组件或元素上加上v-once指令即可；
  • 4.vue3.2之后，又增加了v-memo指令，可以有条件缓存部分模板并控制它们的更新，可以说控制力更强了；
  • 5.其原理是编译器发现元素上面有v-once时，会将首次计算结果存入缓存对象，组件再次渲染时就会从缓存获取，从而避免再次计算；

• 原理

  • <template>
      <h1>{{msg}}</h1>
    </template>
    <script setup>
    import { ref } from "vue"
    const msg = ref("Hello,world!")
    </script>
    
    //编译
    return (_ctx, _cache) => {
      return (_openBlock(), _createElementBlock(_Fragment, null, [
        //从缓存获取vnode
        _cache[0] || (
          _setBLockTracking(-1),
          _cache[0] = _createElementVNode("h1", null, [
            createTextVNode(_toDispLaystring(msg.value), 1/*TEXT*/)
          ]),
          -setBLockTracking(1),
          _cache[0]
        ),
        // ...
      ])
      )
    }