Vue3学习

第一个vue 项目

首先，我们需要安装node.js自行选择自己需要的版本。推荐使用node.js 16.0

打开你的目标文件夹

1	npm init vue@latest //或者指定版本号

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

1
2
3

> cd <your-project-name>
> npm install
> npm run dev

你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和 <script setup>，而非选项式 API。下面是一些补充提示：

推荐的 IDE 配置是 Visual Studio Code + Volar 扩展。如果使用其他编辑器，参考 IDE 支持章节。
更多工具细节，包括与后端框架的整合，我们会在工具链指南进行讨论。
要了解构建工具 Vite 更多背后的细节，请查看 Vite 文档。
如果你选择使用 TypeScript，请阅读 TypeScript 使用指南。

当你准备将应用发布到生产环境时，请运行：

1	> npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。关于将应用上线生产环境的更多内容，请阅读生产环境部署指南。

通过 CDN 使用 Vue

你可以借助 script 标签直接通过 CDN 来使用 Vue：

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

这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，你也可以下载此文件并自行提供服务。

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

使用全局构建版本

上面的例子使用了全局构建版本的 Vue，该版本的所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上。这里有一个使用全局构建版本的例子：

<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>

使用 ES 模块构建版本

在本文档的其余部分我们使用的主要是 ES 模块语法。现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 Vue：

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

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

注意我们使用了 <script type="module">，且导入的 CDN URL 指向的是 Vue 的 ES 模块构建版本。

启用 Import maps

在上面的示例中，我们使用了完整的 CDN URL 来导入，但在文档的其余部分中，你将看到如下代码：

1	import { createApp } from 'vue'

我们可以使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

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

<script type="module">
  import { createApp } from 'vue'

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

JSFiddle 中的示例

你也可以在映射表中添加其他的依赖——但请务必确保你使用的是该库的 ES 模块版本。

导入映射表的浏览器支持情况

目前只有基于 Chromium 的浏览器支持导入映射表，所以我们推荐你在学习过程中使用 Chrome 或 Edge。

如果你使用的是 Firefox 浏览器，则该功能默认在 108+ 版本或通过启用 about:config 中的 dom.importMaps.enabled 选项支持。

如果你更喜欢那些还不支持导入映射表的浏览器，你可以使用 es-module-shims 来进行 polyfill.

生产环境中的注意事项

到目前为止示例中使用的都是 Vue 的开发构建版本——如果你打算在生产中通过 CDN 使用 Vue，请务必查看生产环境部署指南。

拆分模块

随着对这份指南的逐步深入，我们可能需要将代码分割成单独的 JavaScript 文件，以便更容易管理。例如：

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

如果直接在浏览器中打开了上面的 index.html，你会发现它抛出了一个错误，因为 ES 模块不能通过 file:// 协议工作。为了使其工作，你需要使用本地 HTTP 服务器通过 http:// 协议提供 index.html。

要启动一个本地的 HTTP 服务器，请先安装 Node.js，然后通过命令行在 HTML 文件所在文件夹下运行 npx serve。你也可以使用其他任何可以基于正确的 MIME 类型服务静态文件的 HTTP 服务器。

可能你也注意到了，这里导入的组件模板是内联的 JavaScript 字符串。如果你正在使用 VSCode，你可以安装 es6-string-html 扩展，然后在字符串前加上一个前缀注释 /*html*/ 以高亮语法。

无需构建的组合式 API 用法

组合式 API 的许多示例将使用 <script setup> 语法。如果你想在无需构建的情况下使用组合式 API，请参阅 setup() 选项。

进入vue启动页面

http://127.0.0.1:端口号/

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({  //定义不可变的路由
  history: createWebHistory(import.meta.env.BASE_URL),
//创建路由对象，json的形式
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
	  component: () => import('../views/AboutView.vue')
    },
    {
      path: '/learn1',  //url路径指向
      name: 'learn1',  
    	  //路由，指向目标页面
      component: () => import('../views/Learn1.vue') 
    }

  ]
})

export default router

声明式渲染

你在编辑器中看到的是一个 Vue 单文件组件 (Single-File Component，缩写为 SFC)。SFC 是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。

Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

能在改变时触发更新的状态被称作是响应式的。我们可以使用 Vue 的 reactive() API 来声明响应式状态。由 reactive() 创建的对象都是 JavaScript Proxy，其行为与普通对象一样：

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

reactive() 和 ref() 的细节在指南 - 响应式基础一节中有进一步讨论。

在组件的 <script setup> 块中声明的响应式状态，可以直接在模板中使用。下面展示了我们如何使用双花括号语法，根据 counter 对象和 message ref 的值渲染动态文本：

1 2	<h1>{{ message }}</h1> <p>count is: {{ counter.count }}</p>

注意我们在模板中访问的 message ref 时不需要使用 .value：它会被自动解包，让使用更简单。

在双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式。

1	<h1>{{ message.split('').reverse().join('') }}</h1>

现在，试着自己创建一些响应式状态，用它来为模板中的 <h1> 渲染动态的文本内容。

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

const counter = reactive({ count: 0 })
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

app.vue页面

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/learn1">学习1</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView />
</template>

learn1.vue

Attribute 绑定

在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令：

实例

1	<div v-bind:id="dynamicId"></div>

指令是由 v- 开头的一种特殊 attribute。它们是 Vue 模板语法的一部分。和文本插值类似，指令的值是可以访问组件状态的 JavaScript 表达式。关于 v-bind 和指令语法的完整细节请详阅指南 - 模板语法。

冒号后面的部分 (:id) 是指令的“参数”。此处，元素的 id attribute 将与组件状态里的 dynamicId 属性保持同步。

由于 v-bind 使用地非常频繁，它有一个专门的简写语法：

1	<div :id="dynamicId"></div>

现在，试着把一个动态的 class 绑定添加到这个 <h1> 上，并使用 titleClass 的 ref 作为它的值。如果绑定正确，文字将会变为红色。

<script setup>
import { reactive, ref } from 'vue'
const counter = reactive({ count: 0 })
const message = ref('Hello World!')

const titleClass = ref('title')  //定死titleClass 的 ref 作为它的值。如果绑定正确，文字将会变为红色。
</script>
<template>
  <div class="learn1">
    <h1>你好世界</h1>
    <h1>{{ message }}</h1>
    <br>
    <p>Count is: {{ counter.count }}</p>
    <h1 :class="titleClass">让我变红</h1>
  </div>
</template>
<style>
@media (min-width: 1024px) {
  .learn {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
.title{
  color: brown;
}
</style>

实例二

事件监听

我们可以使用 v-on 指令监听 DOM 事件：

1	<button v-on:click="increment">{{ count }}</button>

因为其经常使用，v-on 也有一个简写语法：

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

此处，increment 引用了一个在 <script setup> 中声明的函数：

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

const count = ref(0)

function increment() {
  // 更新组件状态
  count.value++
}
</script>

在函数中，我们可以通过修改 ref 来更新组件状态。

事件处理函数也可以使用内置表达式，并且可以使用修饰符简化常见任务。这些细节包含在指南 - 事件处理。

现在，尝试自行实现 increment 函数并通过使用 v-on 将其绑定到按钮上。

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

const count = ref(0)

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

<template>
  <!-- 使此按钮生效 -->
  <button @click="increment()">count is: {{ count }}</button>
</template>

表单绑定

我们可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定：

1	<input :value="text" @input="onInput">

function onInput(e) {
  // v-on 处理函数会接收原生 DOM 事件
  // 作为其参数。
  text.value = e.target.value
}

试着在文本框里输入——你会看到 <p> 里的文本也随着你的输入更新了。

为了简化双向绑定，Vue 提供了一个 v-model 指令，它实际上是上述操作的语法糖：

1	<input v-model="text">

v-model 会将被绑定的值与 <input> 的值自动同步，这样我们就不必再使用事件处理函数了。

v-model 不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型。我们在指南 - 表单绑定中讨论了更多的细节。

现在，试着用 v-model 把代码重构一下吧。

实例：

<script setup>
import { ref } from 'vue'
const text = ref('')
function onInput(e) {
  text.value = e.target.value
}
</script>
<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

变化为：

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

条件渲染

我们可以使用 v-if 指令来有条件地渲染元素：

1	<h1 v-if="awesome">Vue is awesome!</h1>

这个 <h1> 标签只会在 awesome 的值为真值 (Truthy) 时渲染。若 awesome 更改为假值 (Falsy)，它将被从 DOM 中移除。

我们也可以使用 v-else 和 v-else-if 来表示其他的条件分支：

1 2	<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>

现在，示例程序同时展示了两个 <h1> 标签，并且按钮不执行任何操作。尝试给它们添加 v-if 和 v-else 指令，并实现 toggle() 方法，让我们可以使用按钮在它们之间切换。

更多细节请查阅 v-if：指南 - 条件渲染

实例代码：

<script setup>
import { ref } from 'vue'
const awesome = ref(true)
function toggle() {
  // ...
}
</script>
<template>
  <button @click="toggle">toggle</button>
  <h1>Vue is awesome!</h1>
  <h1>Oh no 😢</h1>
</template>

答案：

<script setup>
import { ref } from 'vue'
const awesome = ref(true)
function toggle() {
  awesome.value = !awesome.value;//如果点击通过触发函数改变值
}
</script>
<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1> <!-- 值之前那没有改变的值-->
  <h1 v-else>Oh no 😢</h1>
</template>

列表渲染

我们可以使用 v-for 指令来渲染一个基于源数组的列表：

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

这里的 todo 是一个局部变量，表示当前正在迭代的数组元素。它只能在 v-for 所绑定的元素上或是其内部访问，就像函数的作用域一样。

注意，我们还给每个 todo 对象设置了唯一的 id，并且将它作为特殊的 key attribute 绑定到每个 <li>。key 使得 Vue 能够精确的移动每个 <li>，以匹配对应的对象在数组中的位置。

更新列表有两种方式：

在源数组上调用变更方法：
1
todos.value.push(newTodo)

使用新的数组替代原数组：

1	todos.value = todos.value.filter(/* ... */)

这里有一个简单的 todo 列表——试着实现一下 addTodo() 和 removeTodo() 这两个方法的逻辑，使列表能够正常工作！

关于 v-for 的更多细节：指南 - 列表渲染

vue实例：

<script setup>
import { ref } from 'vue'
// 给每个 todo 对象一个唯一的 id
let id = 0  //初始id为0
const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  // ...
  newTodo.value = ''
}

function removeTodo(todo) {
  // ...
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
      <!--循环变量-->
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

答案：

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

// 给每个 todo 对象一个唯一的 id
let id = 0
//定义新的数组newTodo
//这行代码使用了 Vue 3 中的响应式（reactive）功能，创建了一个名为 newTodo 的变量，并将其初始化为空字符串。其中 const 关键字表示这是一个常量，而 ref 则表示这个变量是可响应的（reactive）。
const newTodo = ref('')
//初始化todos的数据，作为数组
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

//选择添加新的数据进入数组
function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>
<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

计算属性

让我们在上一步的 todo 列表基础上继续。现在，我们已经给每一个 todo 添加了切换功能。这是通过给每一个 todo 对象添加 done 属性来实现的，并且使用了 v-model 将其绑定到复选框上：

<li v-for="todo in todos">
  <input type="checkbox" v-model="todo.done">
  ...
</li>

下一个可以添加的改进是隐藏已经完成的 todo。我们已经有了一个能够切换 hideCompleted 状态的按钮。但是应该如何基于状态渲染不同的列表项呢？

介绍一个新 API：computed()。它可以让我们创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value：

import { ref, computed } from 'vue'

const hideCompleted = ref(false)
const todos = ref([
  /* ... */
])

const filteredTodos = computed(() => {
  // 根据 `todos.value` & `hideCompleted.value`
  // 返回过滤后的 todo 项目
})

1 2	- <li v-for="todo in todos"> + <li v-for="todo in filteredTodos">

计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。

现在，试着添加 filteredTodos 计算属性并实现计算逻辑！如果实现正确，在隐藏已完成项目的状态下勾选一个 todo，它也应当被立即隐藏。

实例：

<script setup>
import { ref } from 'vue'
let id = 0
const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])
function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}
function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>
<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>
<style>
.done {
  text-decoration: line-through;
}
</style>

答案：

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

let id = 0

const newTodo = ref('')
//设置hideCompleyted为false
const hideCompleted = ref(false)
//仍旧是定义一个数组
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])

const filteredTodos = computed(() => {
    //这段代码的作用是返回一个根据hideCompleted.value来筛选的todos数组。如果hideCompleted.value为true，则返回未完成的任务数组（即done属性为false），否则返回所有任务数组。
  return hideCompleted.value
    ? todos.value.filter((t) => !t.done)
    : todos.value
})
function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}
function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

生命周期和模版引用

目前为止，Vue 为我们处理了所有的 DOM 更新，这要归功于响应性和声明式渲染。然而，有时我们也会不可避免地需要手动操作 DOM。

“var”、”let”和”const”在JavaScript中是用于声明变量的关键字。”var”声明的变量是函数级作用域，它的作用范围在整个函数中；

而”let”和”const”声明的变量是块级作用域，它们的作用范围在声明的代码块内。

不同之处在于，”let”声明的变量可以被重新赋值，而”const”声明的变量是常量，不能被更改。在面试中常常涉及到这些关键字的使用及其区别。

这时我们需要使用模板引用——也就是指向模板中一个 DOM 元素的 ref。我们需要通过这个特殊的 ref attribute 来实现模板引用：

1	<p ref="p">hello</p>

要访问该引用，我们需要声明一个同名的 ref：

1	const p = ref(null)

注意这个 ref 使用 null 值来初始化。这是因为当 <script setup> 执行时，DOM 元素还不存在。模板引用 ref 只能在组件挂载后访问。

要在挂载之后执行代码，我们可以使用 onMounted() 函数：

import { onMounted } from 'vue'
onMounted(() => {
  // 此时组件已经挂载。
})

这被称为生命周期钩子——它允许我们注册一个在组件的特定生命周期调用的回调函数。还有一些其他的钩子如 onUpdated 和 onUnmounted。更多细节请查阅生命周期图示。

现在，尝试添加一个 onMounted 钩子，然后通过 p.value 访问 <p>，并直接对其执行一些 DOM 操作。(例如修改它的 textContent)。

实例：

<script setup>
import { ref } from 'vue'
const p = ref(null)
</script>
<template>
  <p ref="p">hello</p>
</template>

答案：

<script setup>
import { ref, onMounted } from 'vue'
const p = ref(null)
onMounted(() => {
  p.value.textContent = 'mounted!'
})
</script>
<template>
  <p ref="p">hello</p>
</template>

侦听器

有时我们需要响应性地执行一些“副作用”——例如，当一个数字改变时将其输出到控制台。我们可以通过侦听器来实现它：

import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newCount) => {
  // 没错，console.log() 是一个副作用
  console.log(`new count is: ${newCount}`)
})

watch() 可以直接侦听一个 ref，并且只要 count 的值改变就会触发回调。watch() 也可以侦听其他类型的数据源——更多详情请参阅指南 - 侦听器。

一个比在控制台输出更加实际的例子是当 ID 改变时抓取新的数据。在右边的例子中就是这样一个组件。该组件被挂载时，会从模拟 API 中抓取 todo 数据，同时还有一个按钮可以改变要抓取的 todo 的 ID。现在，尝试实现一个侦听器，使得组件能够在按钮被点击时抓取新的 todo 项目。

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

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()
</script>

<template>
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

答案：

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

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()

watch(todoId, fetchData)
</script>

<template>
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

组件

目前为止，我们只使用了单个组件。真正的 Vue 应用往往是由嵌套组件创建的。

父组件可以在模板中渲染另一个组件作为子组件。要使用子组件，我们需要先导入它：

1	import ChildComp from './ChildComp.vue'

然后我们就可以在模板中使用组件，就像这样：

1	<ChildComp />

现在自己尝试一下——导入子组件并在模板中渲染它。

<script setup>
	import ChildComp from './ChildComp.vue';
</script>

<template>
  <!-- render child component -->
	<ChildComp></ChildComp>
</template>

Props

子组件可以通过 props 从父组件接受动态数据。首先，需要声明它所接受的 props：

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

注意 defineProps() 是一个编译时宏，并不需要导入。一旦声明，msg prop 就可以在子组件的模板中使用。它也可以通过 defineProps() 所返回的对象在 JavaScript 中访问。

父组件可以像声明 HTML attributes 一样传递 props。若要传递动态值，也可以使用 v-bind 语法：

1	<ChildComp :msg="greeting" />

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

  const props = defineProps({
    msg:String
  })
  //问候变量
const greeting = ref('Hello from parent')
</script>
<template>
<!--:msg导向-->
  <ChildComp :msg="greeting"/>
</template>

Emits

除了接受props，子组件还可以向父组件触发事件：

<script setup>
// 声明触发的事件
const emit = defineEmits(['response'])

// 带参数触发
emit('response', 'hello from child')
</script>

emit() 的第一个参数是事件的名称。其他所有参数都将传递给事件监听器。

父组件可以使用 v-on 监听子组件触发的事件——这里的处理函数接收了子组件触发事件时的额外参数并将它赋值给了本地状态：

1	<ChildComp @response="(msg) => childMsg = msg" />

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'
const childMsg = ref('No child msg yet')
</script>
<template>
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

插槽

除了通过 props 传递数据外，父组件还可以通过插槽 (slots) 将模板片段传递给子组件：

<ChildComp>
  This is some slot content!
</ChildComp>

在子组件中，可以使用 <slot> 元素作为插槽出口 (slot outlet) 渲染父组件中的插槽内容 (slot content)：

1 2	<!-- 在子组件的模板中 --> <slot/>

<slot> 插口中的内容将被当作“默认”内容：它会在父组件没有传递任何插槽内容时显示：

1	<slot>Fallback content</slot>

现在我们没有给 <ChildComp> 传递任何插槽内容，所以你将看到默认内容。让我们利用父组件的 msg 状态为子组件提供一些插槽内容吧。