vue3 语法糖setup使用keep-alive注意事项

动态组件使用keep-alive

  1. 使用setup语法糖,定义组件TestCom2
// TestCom2





  1. 不使用setup语法糖,定义组件TestCom1
// TestCom1





  1. 不使用setup语法糖引入组件


结论:不使用setup语法糖引入组件, 不使用include 都可以实现缓存, 使用include 后 TestCom1(没有用语法糖) 有缓存,TestCom2(用语法糖)没有缓存

  1. 使用setup语法糖引入组件


结论:使用setup语法糖引入组件, 不使用include 都可以实现缓存,使用include 后 TestCom1(没有用语法糖) 有缓存,TestCom2(用语法糖)没有缓存

总结: keepalive的include匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配,所以使用setup语法糖就无法使用使用include,需要进行取舍

你可能感兴趣的:(vue3 语法糖setup使用keep-alive注意事项)