学习vue3-先抄写文档

  当 style 标签带有 scoped attribute 的时候，它的 css 只会影响当前组件的元素。它的实现方式是通过 PostCSS 将当前组件添加属性，css 选择器都添加对应属性选择器。子组件的根元素，使用 scoped 后，父组件的样式将不会渗透到子组件中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

  通过 v-html 创建的 Dom 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。:deep()

  插槽选择器。使用:slotted 伪类以明确地将插槽内容作为选择器的目标。全局选择器。如果想让其中一个样式规则应用到全局，比起另外创建一个 style，可以使用:global 伪类来实现。:global(.red){color:red}

  一个 style module 标签会被编译为 CSS Modules 并将生成的 CSS class 作为$style 对象暴露给组件。

<p :class="$style.red">This should be red</p>

<style module>
  .red {
    color: red;
  }
</style>

<!--
  可以通过给module attribute一个值来自定义注入class对象的属性名
-->

<p :class="classes.red">This should be red</p>

<style module="classes">
  .red {
    color: red;
  }
</style>

  单文件组件的 style 标签支持使用 v-bind css 函数将 css 的值链接到动态的组件状态。这个语法也适用于 script setup，且支持 js 表达式（需要引号包裹起来）.实际值会被编译成哈希化的 css 自定义属性，因此 css 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。

<style>
  .text {
    color: v-bind(color);
  }
</style>

<script setup>
  const theme = {
    color: 'red'
  }
</script>

<style scoped>
  p {
    color: v-bind('theme.color');
  }
</style>

  script setup 是在单文件组件（SFC)中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 script 语法，它具有更多优势：更少的样板内容，更简洁的代码。能够使用纯 ts 声明 props 和自定义事件。更好的运行时性能（其模版会被编译成同以作用域内的渲染函数，避免了渲染上下文代理对象）。更好的 IDE 类型推导性能。

  要启用该语法，需要在 script 代码块上添加 setup attribute。里面的代码会被编译成组件 setup()函数的内容。这意味着与普通的 script 只在组件被首次引入的时候执行一次不同，script setup 中的代码会在每次组件实例被创建的时候执行。

<script setup>
  console.log('hello setup')
  import { capitalize } from './helpers'
  import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
  <div>{{capitalize('hello')}}</div>
</template>

  当使用 script setup 的时候，任何在 script setup 声明的顶层的绑定（包括变量，函数声明，以及 import 导入的内容）都能在模版中直接使用。import 导入的内容也会同样的方式暴露。这意味着我们可以在模板表达式中直接使用导入的 helper 函数，而不需要通过 methods 选项来暴露它。

  响应式状态需要明确使用响应式 API 来创建。和 setup()函数的返回值一样，ref 在模版中使用的时候会自动解包。setup 范围里的值也能被直接作为自定义组件的标签名使用。

  由于组件是通过变量引用而不是基于字符串组件名注册的，在setup中要使用动态组件的时候，应该使用动态的:is来绑定。

  响应式API:核心。ref()接受一个内部值，返回一个响应式的，可更改的ref对象，此对象只有一个指向内部值的属性.value。ref对象是可更改的，也就是说你可以为.value赋予新的值。computed()接受一个getter函数，返回一个只读的响应式ref对象。reactive()返回一个对象的响应式代理。readonly()接受一个对象（不论是响应式还是普通的）或是一个ref,返回一个原值的只读代理。watchEffect()立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。