v-memo指令

v-memo作用：

给一个元素或组件打上一个标识，在下次渲染的时候如和标识一样则跳过更新（包括组件的子节点），即使是虚拟 DOM 节点的 创建也将被跳过。

举个栗子

   <div id="app">
      <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
        <p>ID: {
    
    {
    
     item.id }} - selected: {
    
    {
    
     item.id === selected }}</p>
        <p>{
    
    {
    
    item.name}}</p>
      </div>
      <button @click="add">123</button>
    </div>
    <script>
      const app = Vue.createApp({
    
    
        setup(props) {
    
    
          const list = Vue.reactive([
            {
    
    
              id: 0,
              name: '小明'
            },
            {
    
    
              id: 1,
              name: '小红'
            },
            {
    
    
              id: 2,
              name: '小花'
            },
            {
    
    
              id: 3,
              name: 'LUCY'
            }
          ])
          let selected = Vue.ref(2)
          const add = () => {
    
    
            selected.value = 0
            list[0].name = '1'   //修改结果  1
            list[2].name = '2'	 // 修改结果 2
          }  
          return {
    
    
            list,
            selected,
            add
          }
        }
      })

      app.mount('#app')
    </script>
  </body>

注意带有空依赖数组的 v-memo (v-memo=“[]”) 在功能上等效于 v-once