vue3.2新增指令v-memo的基本使用教程

<template>
  <div class="home">
    <input type="text" v-model="jiaoSheng">
    <!-- v-memo中值若不发生变化，则不会进行更新 -->
    <ul v-memo="[shouldUpdate]">
        <li class="liCSS" v-for="item in arr" :key="item"> 
          {{ jiaoSheng }} -- {{ animalType[jiaoSheng] }} 
        </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "@Vue/Reactivity"
import { watch } from "@vue/runtime-core"
const arr=new Array(10000)
const animalType={
  'mie':'?',
  'mo':'?',
  'miao':'?',
}
const jiaoSheng=ref('mie')
const shouldUpdate=ref(0)
// 监听jiaoSheng(输入框中的值)。
// 如果数据发生变化，并且在animalType对象中存在。试图进行更新。否则试图不进行更新。
watch(()=>jiaoSheng.value,()=>{
  if(Object.keys(animalType).includes(jiaoSheng.value)){
    shouldUpdate.value++
  }
})
</script>