### Install Dependencies and Run Dev Server with Bun

Source: https://cn.vuejs.org/guide/quick-start

After creating a Vue project, navigate into the project directory, install dependencies using Bun, and start the development server.

```bash
$ cd <your-project-name>
$ bun install
$ bun run dev
```

--------------------------------

### Install Dependencies and Run Dev Server with npm

Source: https://cn.vuejs.org/guide/quick-start

After creating a Vue project, navigate into the project directory, install dependencies using npm, and start the development server.

```bash
$ cd <your-project-name>
$ npm install
$ npm run dev
```

--------------------------------

### Install Dependencies and Run Dev Server with pnpm

Source: https://cn.vuejs.org/guide/quick-start

After creating a Vue project, navigate into the project directory, install dependencies using pnpm, and start the development server.

```bash
$ cd <your-project-name>
$ pnpm install
$ pnpm run dev
```

--------------------------------

### Install Dependencies and Run Dev Server with Yarn

Source: https://cn.vuejs.org/guide/quick-start

After creating a Vue project, navigate into the project directory, install dependencies using Yarn, and start the development server.

```bash
$ cd <your-project-name>
$ yarn
$ yarn dev
```

--------------------------------

### 在 setup 函数中访问 attrs

Source: https://cn.vuejs.org/guide/components/attrs

在非 script setup 的 setup 函数中通过上下文访问 attrs。

```js
export default {
  setup(props, ctx) {
    // 透传 attribute 被暴露为 ctx.attrs
    console.log(ctx.attrs)
  }
}
```

--------------------------------

### Basic Composition API Component with <script setup>

Source: https://cn.vuejs.org/guide/extras/composition-api-faq

Example of a Vue component using Composition API with the `<script setup>` syntax. It demonstrates reactive state, functions to modify state, and a lifecycle hook.

```vue
<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 更改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

--------------------------------

### Component Logic with Composition API and <script setup>

Source: https://cn.vuejs.org/guide/introduction.html

This example showcases the Composition API with the `<script setup>` syntax for writing Vue components. It defines reactive state using `ref` and uses imported functions directly in the template.

```vue
<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

--------------------------------

### Basic Vue 3 App Initialization (Composition API)

Source: https://cn.vuejs.org/guide/introduction.html

This example demonstrates creating a Vue application instance using the Composition API with the `setup` function. It uses `ref` to create a reactive 'count' state.

```js
import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')
```

--------------------------------

### Install a Vue.js Plugin

Source: https://cn.vuejs.org/guide/reusability/plugins

Demonstrates how to install a plugin using `app.use()`. Optional configuration options can be passed as a second argument.

```javascript
import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可选的选项 */
})
```

--------------------------------

### 使用 <script setup> 进行局部注册

Source: https://cn.vuejs.org/guide/components/registration

在使用 <script setup> 的单文件组件中，导入的组件无需显式注册即可直接使用。

```vue
<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>
```

--------------------------------

### Vue.js App Initialization with Global Build (Composition API)

Source: https://cn.vuejs.org/guide/quick-start

Initialize a Vue application using the global build version with the Composition API and `<script setup>` syntax. This example demonstrates using `ref`.

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
```

--------------------------------

### Counter Component using Single-File Component (Composition API with <script setup>)

Source: https://cn.vuejs.org/guide/introduction.html

This example demonstrates a Vue component using the Composition API within a Single-File Component (SFC) and the `<script setup>` syntax for conciseness. It uses `ref` for reactive state and `onMounted` for lifecycle hooks.

```vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>
```

--------------------------------

### Reactive Props Destructuring with Defaults

Source: https://cn.vuejs.org/guide/extras/reactivity-transform

This example shows how to destructure props in `<script setup>` while maintaining reactivity and easily setting default values. The compiler transforms this into a standard props definition.

```html
<script setup lang="ts">
  interface Props {
    msg: string
    count?: number
    foo?: string
  }

  const {
    msg,
    // 默认值正常可用
    count = 1,
    // 解构时命别名也可用
    // 这里我们就将 `props.foo` 命别名为 `bar`
    foo: bar
  } = defineProps<Props>()

  watchEffect(() => {
    // 会在 props 变化时打印
    console.log(msg, count, bar)
  })
</script>
```

```js
export default {
  props: {
    msg: { type: String, required: true },
    count: { type: Number, default: 1 },
    foo: String
  },
  setup(props) {
    watchEffect(() => {
      console.log(props.msg, props.count, props.foo)
    })
  }
}
```

--------------------------------

### Using `<script setup>` for Simplicity

Source: https://cn.vuejs.org/guide/essentials/reactivity-fundamentals

The `<script setup>` syntax in Single File Components (SFCs) simplifies Composition API code by automatically exposing top-level imports, variables, and functions to the template.

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>
```

--------------------------------

### Vue.js App Initialization with ES Module Build (Composition API)

Source: https://cn.vuejs.org/guide/quick-start

Initialize a Vue application using the ES module build with the Composition API and `<script setup>` syntax. This example demonstrates using `ref` and importing from the ES module CDN.

```html
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
```

--------------------------------

### 使用 components 选项进行局部注册

Source: https://cn.vuejs.org/guide/components/registration

在不使用 <script setup> 时，通过 components 选项显式注册组件。

```javascript
import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}
```

```vue
<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>
```

```javascript
export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}
```

--------------------------------

### Plugin with install Method

Source: https://cn.vuejs.org/guide/reusability/plugins

Defines a plugin as an object with an `install` method. The `install` method receives the app instance and any additional options passed to `app.use()`.

```javascript
const myPlugin = {
  install(app, options) {
    // 配置此应用
  }
}
```

--------------------------------

### Emitting Events with `emit` from Setup Context

Source: https://cn.vuejs.org/guide/essentials/component-basics

Access the `emit` function from the setup context object in the `setup()` function to trigger custom events when not using `<script setup>`.

```javascript
export default {
  emits: ['enlarge-text'],
  setup(props, ctx) {
    ctx.emit('enlarge-text')
  }
}
```

--------------------------------

### Use Component with <script setup> (SFC)

Source: https://cn.vuejs.org/guide/essentials/component-basics

Import and use a child component directly in the template when using `<script setup>`. No explicit registration is needed.

```vue
<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>
```

--------------------------------

### 声明渲染函数

Source: https://cn.vuejs.org/guide/extras/render-function

在 setup() 或组件选项中声明渲染函数以替代模板。

```javascript
import { ref, h } from 'vue'

export default {
  props: {
    /* ... */
  },
  setup(props) {
    const count = ref(1)

    // 返回渲染函数
    return () => h('div', props.msg + count.value)
  }
}
```

```javascript
export default {
  setup() {
    return () => 'hello world!'
  }
}
```

```javascript
import { h } from 'vue'

export default {
  setup() {
    // 使用数组返回多个根节点
    return () => [
      h('div'),
      h('div'),
      h('div')
    ]
  }
}
```

```javascript
import { h } from 'vue'

export default {
  data() {
    return {
      msg: 'hello'
    }
  },
  render() {
    return h('div', this.msg)
  }
}
```

```javascript
export default {
  render() {
    return 'hello world!'
  }
}
```

```javascript
import { h } from 'vue'

export default {
  render() {
    // 用数组来返回多个根节点
    return [
      h('div'),
      h('div'),
      h('div')
    ]
  }
}
```

```javascript
function Hello() {
  return 'hello world!'
}
```

--------------------------------

### Provide Data in Options API Setup Function

Source: https://cn.vuejs.org/guide/components/provide-inject

When not using `<script setup>`, call `provide()` synchronously within the `setup()` function of the Options API. This allows providing data to descendants.

```js
import { provide } from 'vue'

export default {
  setup() {
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
  }
}
```

--------------------------------

### Declare Props with props option in setup()

Source: https://cn.vuejs.org/guide/components/props

In components without <script setup>, declare props using the 'props' option. The setup function receives props as its first argument.

```js
export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}
```

--------------------------------

### Inject Provided Options in Setup Script

Source: https://cn.vuejs.org/guide/reusability/plugins

Demonstrates how to inject the provided 'i18n' object into a component using `inject` within the `<script setup>` block.

```vue
<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>
```

--------------------------------

### Provide Data with <script setup>

Source: https://cn.vuejs.org/guide/components/provide-inject

Use the `provide` function within `<script setup>` to make data available to descendant components. The first argument is the injection key (string or Symbol), and the second is the value.

```vue
<script setup>
import { provide } from 'vue'

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>
```

--------------------------------

### 渲染插槽

Source: https://cn.vuejs.org/guide/extras/render-function

展示如何在 setup 或 render 函数中访问并渲染插槽内容。

```javascript
export default {
  props: ['message'],
  setup(props, { slots }) {
    return () => [
      // 默认插槽：
      // <div><slot /></div>
      h('div', slots.default()),

      // 具名插槽：
      // <div><slot name="footer" :text="message" /></div>
      h(
        'div',
        slots.footer({
          text: props.message
        })
      )
    ]
  }
}
```

```jsx
// 默认插槽
<div>{slots.default()}</div>

// 具名插槽
<div>{slots.footer({ text: props.message })}</div>
```

```javascript
export default {
  props: ['message'],
  render() {
    return [
      // <div><slot /></div>
      h('div', this.$slots.default()),

      // <div><slot name="footer" :text="message" /></div>
      h(
        'div',
        this.$slots.footer({
          text: this.message
        })
      )
    ]
  }
}
```

```jsx
// <div><slot /></div>
<div>{this.$slots.default()}</div>

// <div><slot name="footer" :text="message" /></div>
<div>{this.$slots.footer({ text: this.message })}</div>
```

--------------------------------

### Access Props in setup() (Options API)

Source: https://cn.vuejs.org/guide/essentials/component-basics

When not using `<script setup>`, props are passed as the first argument to the `setup()` function and can be accessed via the `props` object.

```js
export default {
  props: ['title'],
  setup(props) {
    console.log(props.title)
  }
}
```

--------------------------------

### Create a Basic i18n Plugin

Source: https://cn.vuejs.org/guide/reusability/plugins

Sets up a plugin object with an `install` function. This is a common pattern for organizing plugin logic in a separate file.

```javascript
export default {
  install: (app, options) => {
    // 在这里编写插件代码
  }
}
```

--------------------------------

### Declare Props with Object Syntax in <script setup>

Source: https://cn.vuejs.org/guide/components/props

The object syntax for prop declaration is also supported within the defineProps() macro in <script setup>.

```js
defineProps({
  title: String,
  likes: Number
})
```

--------------------------------

### Declare Props with defineProps() in <script setup>

Source: https://cn.vuejs.org/guide/components/props

Use the defineProps() macro within <script setup> to declare props. Access them directly as properties of the returned props object.

```vue
<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>
```

--------------------------------

### Inject Data in Options API Setup Function

Source: https://cn.vuejs.org/guide/components/provide-inject

When not using `<script setup>`, call `inject()` synchronously within the `setup()` function of the Options API to retrieve provided data. The return value makes the injected data available to the template.

```js
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
```

--------------------------------

### 禁用 Attributes 继承

Source: https://cn.vuejs.org/guide/components/attrs

在 script setup 中使用 defineOptions 禁用自动继承。

```vue
<script setup>
defineOptions({
  inheritAttrs: false
})
// ...setup 逻辑
</script>
```

--------------------------------

### Async setup() hook in Vue.js

Source: https://cn.vuejs.org/guide/built-ins/suspense

Use an asynchronous setup() hook to handle asynchronous operations within a component. This allows the component to fetch data or perform other async tasks before rendering.

```javascript
export default {
  async setup() {
    const res = await fetch(...)
    const posts = await res.json()
    return {
      posts
    }
  }
}
```

--------------------------------

### Declaring Emitted Events with Script Setup

Source: https://cn.vuejs.org/guide/essentials/component-basics

Use the `defineEmits` macro within `<script setup>` to declare custom events and obtain an `emit` function.

```vue
<script setup>
defineProps(['title'])
defineEmits(['enlarge-text'])
</script>
```

--------------------------------

### Create Vue App with npm

Source: https://cn.vuejs.org/guide/quick-start

Use npm to create a new Vue project with the official scaffolding tool. This command initiates the project setup process.

```bash
$ npm create vue@latest
```

--------------------------------

### Create Vue App with Bun

Source: https://cn.vuejs.org/guide/quick-start

Use Bun to create a new Vue project with the official scaffolding tool. This command initiates the project setup process.

```bash
$ bun create vue@latest
```

--------------------------------

### Exposing Properties from `<script setup>` Components

Source: https://cn.vuejs.org/guide/essentials/template-refs

Components using `<script setup>` are private by default. Use `defineExpose` to explicitly expose properties and methods that should be accessible via template refs from a parent component.

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

const a = 1
const b = ref(2)

// 像 defineExpose 这样的编译器宏不需要导入
defineExpose({
  a,
  b
})
</script>
```

--------------------------------

### 局部注册异步组件

Source: https://cn.vuejs.org/guide/components/async

在组件选项或 script setup 中局部注册异步组件。

```vue
<script>
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    AdminPage: defineAsyncComponent(() =>
      import('./components/AdminPageComponent.vue')
    )
  }
}
</script>

<template>
  <AdminPage />
</template>
```

```vue
<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>
```

--------------------------------

### Emitting Events with `emit` Function in Script Setup

Source: https://cn.vuejs.org/guide/essentials/component-basics

Use the `emit` function returned by `defineEmits` to trigger custom events from within the `<script setup>` block.

```vue
<script setup>
const emit = defineEmits(['enlarge-text'])

emit('enlarge-text')
</script>
```

--------------------------------

### Expose Increment Function (Composition API)

Source: https://cn.vuejs.org/guide/essentials/reactivity-fundamentals

Declare functions within `setup()` to modify refs and return them along with the refs to be used in the template.

```javascript
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // 在 JavaScript 中需要 .value
      count.value++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      count,
      increment
    }
  }
}
```

```html
<button @click="increment">
  {{ count }}
</button>
```

--------------------------------

### Expose `ref` to Template (Composition API)

Source: https://cn.vuejs.org/guide/essentials/reactivity-fundamentals

Return refs from the `setup()` function to make them available in the component's template. Refs are automatically unwrapped in templates.

```javascript
import { ref } from 'vue'

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}
```

```html
<div>{{ count }}</div>
```

--------------------------------

### Single-File Component with Composition API

Source: https://cn.vuejs.org/guide/scaling-up/sfc

An SFC utilizing the Composition API with `<script setup>`. This offers a more concise syntax for component logic.

```vue
<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
```

--------------------------------

### Using composables in Options API

Source: https://cn.vuejs.org/guide/reusability/composables

Call composables within the `setup()` function of the Options API. Return the bindings from `setup()` to make them accessible via `this` and in the template.

```javascript
import { useMouse } from './mouse.js'
import { useFetch } from './fetch.js'

export default {
  setup() {
    const { x, y } = useMouse()
    const { data, error } = useFetch('...')
    return { x, y, data, error }
  },
  mounted() {
    // Properties exposed by setup() can be accessed via `this`
    console.log(this.x)
  }
  // ...other options
}
```

--------------------------------

### Create Vue App with pnpm

Source: https://cn.vuejs.org/guide/quick-start

Use pnpm to create a new Vue project with the official scaffolding tool. This command initiates the project setup process.

```bash
$ pnpm create vue@latest
```

--------------------------------

### Basic Single-File Component Structure

Source: https://cn.vuejs.org/guide/scaling-up/sfc

A standard SFC with template, script, and style blocks. This example uses the options API for component logic.

```vue
<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
```

--------------------------------

### Basic watch example

Source: https://cn.vuejs.org/guide/essentials/watchers

Use `watch` to react to changes in a specific reactive source. The callback is only triggered when the source value changes.

```js
const todoId = ref(1)
const data = ref(null)

watch(
  todoId,
  async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )
    data.value = await response.json()
  },
  { immediate: true }
)
```

--------------------------------

### Define Component with <script setup> (SFC)

Source: https://cn.vuejs.org/guide/essentials/component-basics

Use this syntax for defining a Vue component within a .vue file when using a build step. It simplifies component logic and template integration.

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

const count = ref(0)
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>
```

--------------------------------

### Inject Data with <script setup>

Source: https://cn.vuejs.org/guide/components/provide-inject

Use the `inject` function within `<script setup>` to retrieve data provided by an ancestor. If multiple ancestors provide the same key, the closest one is used. Injected refs are not automatically unwrapped.

```vue
<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>
```

--------------------------------

### Composition API: Basic Watcher Example

Source: https://cn.vuejs.org/guide/essentials/watchers

Use the `watch` function in the Composition API to trigger a callback when a reactive state changes. This example watches a ref named 'question' and performs an API call.

```vue
<script setup>
import { ref, watch } from 'vue'

const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
const loading = ref(false)

// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    loading.value = true
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    } finally {
      loading.value = false
    }
  }
})
</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" :disabled="loading" />
  </p>
  <p>{{ answer }}</p>
</template>
```

--------------------------------

### Access Props in <script setup>

Source: https://cn.vuejs.org/guide/essentials/component-basics

The `defineProps` macro returns an object containing all declared props, which can be accessed programmatically.

```js
const props = defineProps(['title'])
console.log(props.title)
```

--------------------------------

### 使用 useAttrs API

Source: https://cn.vuejs.org/guide/components/attrs

在 script setup 中使用 useAttrs 获取透传属性。

```vue
<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
</script>
```

--------------------------------

### Boolean Prop Usage Examples

Source: https://cn.vuejs.org/guide/components/props

Demonstrates how Boolean props behave when passed without values.

```html
<!-- 等同于传入 :disabled="true" -->
<MyComponent disabled />

<!-- 等同于传入 :disabled="false" -->
<MyComponent />
```

--------------------------------

### Options API: Basic Watcher Example

Source: https://cn.vuejs.org/guide/essentials/watchers

Use the `watch` option in the Options API to trigger a function whenever a reactive property changes. This example watches the 'question' property and calls 'getAnswer' if it contains a question mark.

```javascript
export default {
  data() {
    return {
      question: '',
      answer: 'Questions usually contain a question mark. ;-)',
      loading: false
    }
  },
  watch: {
    // 每当 question 改变时，这个函数就会执行
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer()
      }
    }
  },
  methods: {
    async getAnswer() {
      this.loading = true
      this.answer = 'Thinking...'
      try {
        const res = await fetch('https://yesno.wtf/api')
        this.answer = (await res.json()).answer
      } catch (error) {
        this.answer = 'Error! Could not reach the API. ' + error
      } finally {
        this.loading = false
      }
    }
  }
}
```

```html
<p>
  Ask a yes/no question:
  <input v-model="question" :disabled="loading" />
</p>
<p>{{ answer }}</p>
```

--------------------------------

### Vue.js App Initialization with Global Build

Source: https://cn.vuejs.org/guide/quick-start

Initialize a Vue application using the global build version. All top-level APIs are available on the global `Vue` object. This example uses the Options API.

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
```

--------------------------------

### Calling Store Method from Template

Source: https://cn.vuejs.org/guide/scaling-up/state-management

Example of calling the `store.increment()` method from a template's event handler.

```template
<template>
  <button @click="store.increment()">
    From B: {{ store.count }}
  </button>
</template>
```

--------------------------------

### Create Vue App with Yarn

Source: https://cn.vuejs.org/guide/quick-start

Use Yarn (v1+ or Modern) to create a new Vue project with the official scaffolding tool. This command initiates the project setup process.

```bash
# For Yarn (v1+)
$ yarn create vue

# For Yarn Modern (v2+)
$ yarn create vue@latest
  
# For Yarn ^v4.11
$ yarn dlx create-vue@latest
```

--------------------------------

### Initial HTML structure for modal

Source: https://cn.vuejs.org/guide/built-ins/teleport

Example of a nested modal structure that may face CSS layout issues.

```html
<div class="outer">
  <h3>Tooltips with Vue 3 Teleport</h3>
  <div>
    <MyModal />
  </div>
</div>
```

--------------------------------

### Provide Translation Dictionary

Source: https://cn.vuejs.org/guide/reusability/plugins

Installs the i18n plugin and passes a translation dictionary as an option. This dictionary is used by the `$translate` method.

```javascript
import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})
```

--------------------------------

### Component Logic with Options API

Source: https://cn.vuejs.org/guide/introduction.html

This example illustrates the Options API for defining a Vue component. It uses `data` for state, `methods` for actions, and `mounted` for lifecycle hooks, with all properties accessible via `this`.

```vue
<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

--------------------------------

### Template with Static and Dynamic Content

Source: https://cn.vuejs.org/guide/extras/rendering-mechanism

A template example showcasing static div elements ('foo', 'bar') that can be cached and a dynamic div with a {{ dynamic }} binding. The compiler can optimize the static parts.

```html
<div>
  <div>foo</div> <!-- To be cached -->
  <div>bar</div> <!-- To be cached -->
  <div>{{ dynamic }}</div>
</div>
```

--------------------------------

### Provide Options Object in Plugin

Source: https://cn.vuejs.org/guide/reusability/plugins

Uses `app.provide` within a plugin's install method to make the plugin's options accessible throughout the application via injection.

```javascript
export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}
```

--------------------------------

### Integrating SSR with Express Server

Source: https://cn.vuejs.org/guide/scaling-up/ssr

This example shows how to integrate Vue SSR into an Express.js server. It renders the Vue app and embeds the resulting HTML into a full HTML page response. Ensure `express` is installed.

```javascript
import express from 'express'
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

const server = express()

server.get('/', (req, res) => {
  const app = createSSRApp({
    data: () => ({ count: 1 }),
    template: `<button @click="count++">{{ count }}</button>`
  })

  renderToString(app).then((html) => {
    res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue SSR Example</title>
      </head>
      <body>
        <div id="app">${html}</div>
      </body>
    </html>
    `)
  })
})

server.listen(3000, () => {
  console.log('ready')
})
```

--------------------------------

### Automatic Watcher Stopping in <script setup>

Source: https://cn.vuejs.org/guide/essentials/watchers

Watchers created with synchronous statements in `setup()` or `<script setup>` are automatically bound to the host component and stopped on unmount. Asynchronous callbacks, however, require manual stopping.

```vue
<script setup>
import { watchEffect } from 'vue'

// It will be stopped automatically
watchEffect(() => {})

// ...this one will not!
setTimeout(() => {
  watchEffect(() => {})
}, 100)
</script>
```

--------------------------------

### Basic Vue 3 App Initialization (Options API)

Source: https://cn.vuejs.org/guide/introduction.html

This is a fundamental example showing how to create a Vue application instance and mount it to an HTML element using the Options API. It initializes a reactive 'count' data property.

```js
import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')
```

--------------------------------

### Declare Props with TypeScript Types in <script setup>

Source: https://cn.vuejs.org/guide/components/props

When using TypeScript with <script setup>, you can use type annotations directly within defineProps() for robust type checking.

```vue
<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>
```

--------------------------------

### Reactive Destructuring of Props in <script setup>

Source: https://cn.vuejs.org/guide/components/props

In Vue 3.5+, variables destructured from defineProps() within the same <script setup> block are automatically made reactive, equivalent to accessing props.foo.

```js
const { foo } = defineProps(['foo'])

watchEffect(() => {
  // 在 3.5 之前只运行一次
  // 在 3.5+ 中在 "foo" prop 变化时重新执行
  console.log(foo)
})
```

--------------------------------

### Vue Render Function Example

Source: https://cn.vuejs.org/guide/extras/rendering-mechanism

An example of a render function that creates a VNode for a div with a class binding. The last argument '2' is a patch flag indicating a CLASS update.

```javascript
createElementVNode("div", {
  class: _normalizeClass({ active: _ctx.active })
}, null, 2 /* CLASS */)
```

--------------------------------

### Basic Transition Usage

Source: https://cn.vuejs.org/guide/built-ins/transition

Demonstrates the fundamental usage of the `<Transition>` component with a simple conditional rendering. CSS classes are applied automatically.

```html
<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>
```

```css
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
```

--------------------------------

### KeepAlive Lifecycle Hooks with setup

Source: https://cn.vuejs.org/guide/built-ins/keep-alive

Use `onActivated` and `onDeactivated` hooks within `<script setup>` to react to a component entering or leaving the KeepAlive cache. These hooks also fire on initial mount and unmount.

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

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

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

--------------------------------

### Importing and Using a Single-File Component

Source: https://cn.vuejs.org/guide/scaling-up/sfc

Demonstrates how to import a Single-File Component as a standard ES module. Ensure your build tool is configured to handle `.vue` files.

```javascript
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
```

--------------------------------

### Accessing Template Refs without useTemplateRef (Options API / Pre-3.5)

Source: https://cn.vuejs.org/guide/essentials/template-refs

Before `useTemplateRef`, declare a `ref` with the same name as the template's `ref` attribute. Access the element via `.value` after the component is mounted. If not using `<script setup>`, return the ref from `setup()`.

```vue
<script setup>
import { ref, onMounted } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>
```

```js
export default {
  setup() {
    const input = ref(null)
    // ...
    return {
      input
    }
  }
}
```

```vue
<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

<template>
  <input ref="input" />
</template>
```

--------------------------------

### Initialize Local State from Prop (Composition API)

Source: https://cn.vuejs.org/guide/components/props

Demonstrates how to use a prop as an initial value for a local reactive state (`ref`). The local state can then be mutated independently of the prop.

```javascript
const props = defineProps(['initialCounter'])

// 计数器只是将 props.initialCounter 作为初始值
// 像下面这样做就使 prop 和后续更新无关了
const counter = ref(props.initialCounter)
```

--------------------------------

### Server Entry Point Using Shared App Logic

Source: https://cn.vuejs.org/guide/scaling-up/ssr

This server-side JavaScript file uses the shared `createApp` function to create a Vue application instance for rendering on the server. It's part of the Express server setup for SSR.

```javascript
// (Irrelevant code omitted)
import { createApp } from './app.js'

server.get('/', (req, res) => {
  const app = createApp()
  renderToString(app).then(html => {
    // ...
  })
})
```

--------------------------------

### Use useFetch with a ref

Source: https://cn.vuejs.org/guide/reusability/composables

Pass a ref to `useFetch` to re-trigger fetches when the URL changes. The composable will automatically set up a listener.

```javascript
const url = ref('/initial-url')

const { data, error } = useFetch(url)

// This will re-trigger the fetch
url.value = '/new-url'
```

--------------------------------

### Build Vue App for Production with Bun

Source: https://cn.vuejs.org/guide/quick-start

Generate a production-ready build of your Vue application using Bun. This command optimizes assets for deployment.

```bash
$ bun run build
```

--------------------------------

### 动态组件过渡

Source: https://cn.vuejs.org/guide/built-ins/transition

在动态组件切换时使用 Transition 组件，并配合 mode 属性控制过渡时序。

```template
<Transition name="fade" mode="out-in">
  <component :is="activeComponent"></component>
</Transition>
```

--------------------------------

### Exporting Custom Element Constructors from a Library

Source: https://cn.vuejs.org/guide/extras/web-components

This example demonstrates creating an entry file for a Vue custom element library. It defines and exports individual custom element constructors and provides a `register` function for convenient global registration of all elements with their respective tag names.

```javascript
import { defineCustomElement } from 'vue'
import Foo from './MyFoo.ce.vue'
import Bar from './MyBar.ce.vue'

const MyFoo = defineCustomElement(Foo)
const MyBar = defineCustomElement(Bar)

// 分别导出元素
export { MyFoo, MyBar }

export function register() {
  customElements.define('my-foo', MyFoo)
  customElements.define('my-bar', MyBar)
}
```

--------------------------------

### Typing Named Functional Components

Source: https://cn.vuejs.org/guide/extras/render-function

This example demonstrates how to type a named functional component in TypeScript, including props and events.

```tsx
import type { SetupContext } from 'vue'
type FComponentProps = {
  message: string
}

type Events = {
  sendMessage(message: string): void
}

function FComponent(
  props: FComponentProps,
  context: SetupContext<Events>
) {
  return (
    <button onClick={() => context.emit('sendMessage', props.message)}>
        {props.message} {' '}
    </button>
  )
}

FComponent.props = {
  message: {
    type: String,
    required: true
  }
}

FComponent.emits = {
  sendMessage: (value: unknown) => typeof value === 'string'
}
```

--------------------------------

### Modifying Shared State Directly (Template)

Source: https://cn.vuejs.org/guide/scaling-up/state-management

Example of directly modifying the shared state `store.count` from a template using an event handler.

```template
<template>
  <button @click="store.count++">
    From B: {{ store.count }}
  </button>
</template>
```

--------------------------------

### Build Vue App for Production with npm

Source: https://cn.vuejs.org/guide/quick-start

Generate a production-ready build of your Vue application using npm. This command optimizes assets for deployment.

```bash
$ npm run build
```

--------------------------------

### Create a Vue Application Instance

Source: https://cn.vuejs.org/guide/essentials/application

Use `createApp` to instantiate a new Vue application. This function takes root component options as an argument.

```javascript
import { createApp } from 'vue'

const app = createApp({
  /* root component options */
})
```

--------------------------------

### Typing Anonymous Functional Components

Source: https://cn.vuejs.org/guide/extras/render-function

This example shows how to type an anonymous functional component using `FunctionalComponent` in TypeScript, including props and events.

```tsx
import type { FunctionalComponent } from 'vue'

type FComponentProps = {
  message: string
}

type Events = {
  sendMessage(message: string): void
}

const FComponent: FunctionalComponent<FComponentProps, Events> = (
  props,
  context
) => {
  return (
    <button onClick={() => context.emit('sendMessage', props.message)}>
        {props.message} {' '}
    </button>
  )
}

FComponent.props = {
  message: {
    type: String,
    required: true
  }
}

FComponent.emits = {
  sendMessage: (value) => typeof value === 'string'
}
```

--------------------------------

### Render Filtered List in Template

Source: https://cn.vuejs.org/guide/essentials/list

Use `v-for` with a computed property to render a list of filtered items. This example shows rendering even numbers.

```html
<li v-for="n in evenNumbers">{{ n }}</li>
```

--------------------------------

### Register Global Component

Source: https://cn.vuejs.org/guide/essentials/application

Register a component globally using `app.component()` so it can be used anywhere within the application. This should be done before mounting.

```javascript
app.component('TodoDeleteButton', TodoDeleteButton)
```

--------------------------------

### Parent Component Data for Dynamic Props

Source: https://cn.vuejs.org/guide/essentials/component-basics

Example of parent component data structure (an array of posts) that can be used with `v-for` to pass dynamic props.

```js
export default {
  // ...
  data() {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}
```

--------------------------------

### 使用 v-for 渲染范围值

Source: https://cn.vuejs.org/guide/essentials/list

 `v-for` 可接受整数值，将模板重复多次，从 1 开始计数。

```html
<span v-for="n in 10">{{ n }}</span>
```

--------------------------------

### 创建可复用的鼠标跟踪组合式函数 (useMouse)

Source: https://cn.vuejs.org/guide/reusability/composables

将鼠标跟踪逻辑封装成一个名为 useMouse 的组合式函数。该函数管理 x 和 y 状态，并利用 onMounted 和 onUnmounted 钩子来添加和移除事件监听器。按照惯例，组合式函数名以 'use' 开头。

```javascript
import { ref, onMounted, onUnmounted } from 'vue'

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 通过返回值暴露所管理的状态
  return { x, y }
}
```

--------------------------------

### Appear Transition

Source: https://cn.vuejs.org/guide/built-ins/transition

Apply a transition effect when a node is initially rendered.

```template
<Transition appear>
  ...
</Transition>
```

--------------------------------

### Prop Naming Convention (CamelCase - Non-<script setup>)

Source: https://cn.vuejs.org/guide/components/props

CamelCase prop names are also declared using the 'props' option in standard component definitions.

```js
export default {
  props: {
    greetingMessage: String
  }
}
```

--------------------------------

### Client Entry Point for Shared App Logic

Source: https://cn.vuejs.org/guide/scaling-up/ssr

This client-side JavaScript file imports the shared `createApp` function and mounts the Vue application to the DOM. This is the entry point for the client-side part of your SSR application.

```javascript
import { createApp } from './app.js'

createApp().mount('#app')
```