基于组件渲染

以下代码，在input框输入时，函数c会执行

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
const c = ()=>{
  console.log(1)
}
</script>

<template>
  <h1>{{ msg }}</h1>
  {{c()}}
  <input v-model="msg" />
</template>

将c函数放入另一个封装的组件，则不会

keep-alive

缓存组件实例，这里的实例包含vnode，不包含dom

keepa-live这样用,a和b能都缓存吗？

<keep-alive>
  <component :is="a">
    <compoennt :is="b">
    </compoennt>
  </component>
</keep-alive>

• 不能, <keep-alive> 只能缓存它直接包裹的第一个子组件

• 嵌套的 <component :is="b"> 不会被 <keep-alive> 缓存，因为它不在 <keep-alive> 的直接作用范围内。