什么是作用域插槽

作用域插槽是子组件向父组件传递数据，也就是子组件会把子组件的一些数据，传递给父组件进行使用。

那么什么样子的场景需要使用作用域插槽呢？

比如在渲染列表的时候，如果列表的每项都渲染成不同的样式，就可以把数据通过子组件传递到父组件进行渲染。

<FancyList :api-url="url" :per-page="10">
 <template #item="{ body, username, likes }">
   <div class="item">
     <p>{{ body }}</p>
     <p>by {{ username }} | {{ likes }} likes</p>
   </div>
 </template>
</FancyList>

<ul>
  <li v-for="item in items">
    <slot name="item" v-bind="item"></slot>
  </li>
</ul>

计算属性

计算属性是可以自动检测依赖的，所以当依赖不变的时候，可以不需要重新计算结果，而是直接使用缓存。

如果不使用计算属性，而使用方法的话，方法是每次都需要执行一次的，所以会造成性能的浪费。

条件渲染

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

计算属性和watch的区别是什么？

计算属性和watch都可以监听某些属性是否变化，但是在某些场景下，需要当监听到某些属性变化的时候

watch和watchEffect

watchEffect自动追踪callback里边的依赖，并且会立即执行

defineModel

defineModel就是双向绑定，能够让你更好的在组件上进行双向数据绑定，同时也可以添加不同的v-model的修饰符

vue子组件

vue的子组件可以自动继承父组件传递的class、style、click等。可以使用useAttrs获取父组件传递过来的attrs，根据不同的情况进行绑定和使用。

slots

可以把插槽理解为函数的参数，在子组件里边，你可以把插槽传递过来的内容，放在任何一个地方。

命名插槽就是有个名字，告诉子组件把传递过来的参数放在什么地方。作用域插槽就是子组件把数据传递给父组件，让父组件进行使用，然后把渲染的结果再传递回子组件

组合式函数

组合式函数你可以理解react的自定义hooks，主要作用就是为了在不同的组件之间进行逻辑复用。组合式函数可以传入一个不会变的参数，比如url，也可以传入一个响应式的参数，比如参数通过ref或者reactive包围的。

最佳实践: 1、组合式函数的命名需要以use开头 2、组合式函数的参数最好是响应式数据或者是一个getter函数，在组合式函数里边使用toValue和watchEffect进行追踪 3、组合式函数里边使用ref对每个状态进行跟踪，尽量不使用reactive进行跟踪

插件

const myPlugin = {
  install(app, options) {
    // configure the app
  }
}

插件没什么特殊的，就是把一些通用的方法和函数注册到全局进行使用。

重读vue3文档