vue3知识点备忘（二）

1.内置组件

1.transition

2.transition-group

用于对v-for列表中的元素或组件的插入、移除和顺序改变添加动画效果，举个栗子

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

稍微修改下丝滑版本，重点是.v-move

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除 以便能够正确地计算移动的动画 */
.list-leave-active {
  position: absolute;
}

3.keep-alive：保留组件的状态

1.可以设置：最大缓存实例数，如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

2.缓存实例的生命周期

<script setup>
import { onActivated, onDeactivated } from 'vue';

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
});

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
});
</script>

4.teleport远距离传送

2.应用和实践

1.路由还是vue-router，状态管理vuex处于维护状态（仍然可以使用但是不会添加新的功能），官方建议使用pinia

2.父组件传递给子组件的props尽量要保持稳定，举个栗子

<ListItem
  v-for="item in list"
  :id="item.id"
  :active-id="activeId"
/>

<ListItem
  v-for="item in list"
  :id="item.id"
  :active="item.id === activeId"
/>

3.针对大型列表只渲染用户可视区域内的内容，可以使用现有的库

4.js渲染函数和jsx(在js里面书写模板)

vue提供的h()是hyperscript（能生成html的javascript）的简写，确切的说可以叫做createVnode

3.一些APIS

toRef

1.基于响应式对象上的一个属性，创建一个对应的ref。这样创建的ref与其源属性保持同步：改变源属性的值将更新ref的值，反之亦然

2.如果解构了props对象，解构出的变量将会丢失响应性。推荐通过props.xxx的形式来使用其中的props，或者使用toRef/toRefs

3.toRef在把一个prop的ref传递给一个组合式函数时会很有用：

<script setup>
import { toRef } from 'vue';

const props = defineProps(/* ... */);

// 将 `props.foo` 转换为 ref，然后传入
// 一个组合式函数
useSomeFeature(toRef(props, 'foo'));
</script>

4.当toRef与组件props结合使用时，关于禁止对props做出更改的限制依然有效

toRefs

1.将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的ref。每个单独的ref都是使用toRef()创建的

2.当从组合式函数中返回响应式对象时，toRefs相当有用，消费者组件可以解构/展开返回的对象而不会失去响应性：

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2,
  });

  // ...基于状态的操作逻辑

  // 在返回时都转为 ref
  return toRefs(state);
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX();