永无止境

Vue Router 是 Vue.js 的官方路由管理器，它允许你通过不同的 URL 显示不同的组件，从而实现单页面应用（SPA）。Vue Router 是构建单页面应用的核心工具，通过路由管理不同的页面组件，实现页面的切换而无需重新加载整个页面，从而提高用户体验和性能。路由（Route）：路由是Vue Router中的基本单元，它定义了路径与组件之间的映射关系。例如，当用户访问/home路径时，路由会将对应的Home组件渲染到页面上。路由可以包含路径参数、查询参数等，用于传递动态数据。

Vuex 是 Vue.js 的官方状态管理库，用于构建大型、复杂且需要跨组件共享状态的应用。它通过一个全局的 store 来集中管理应用的状态，使得状态管理更加清晰、可维护。//从 store 的 state 中取出 count 属性的值。vuex运行机制，独立于vue组件。在 vue 组件中使用vuex。

/ h 是 createElement 的简写，它是 Vue 的渲染函数，用于创建虚拟 DOM 节点。// ctx 是上下文，包含了 props, data, children 等信息。temlplate 和 jsx 最终渲染时都是创建 dom 节点。template 和 JSX 混合使用。// 用于描述真实 DOM 的结构。// 渲染的 html。// 渲染的 html。

在 Vue 2.x 中，可以通过设置组件选项的来定义函数式组件。在 Vue 3.x 中，函数式组件通常使用setup函数来定义。将属性返回给调用方</</使用<template><div><a-tabs><a-tab-pane key="Functional" tab="函数式组件">// 定义临时变量： var1、var2// TempVar 将属性返回给调用方<TempVar// 接受变量并使用临时变量，可以写复杂的逻辑{{ var1 }}{{ var2 }}

跨组件通讯图本质：父组件通过属性向子组件传递数据。特点：单向数据流，子组件不能直接修改 props。exportdefault'title'// 接收父组件数据</本质：子组件通过事件向父组件传递数据。</

show " > 销毁 </ button > <!--自定义指令 v-append-text --> < button v-if = " show " v-append-text = " `hello ${number}` " @click = " number++ " > 按钮 </ button > </ div > </ template > < script > export default {bind() {return {} };

此时，data 和 methods 已经初始化完成，但 DOM 还未挂载，不能访问到 DOM 元素。在挂载开始之前被调用，此时模板已经被编译，但尚未挂载到 DOM 上。在数据更新之前被调用，此时组件的 DOM 还未更新，但数据已经发生变化。在挂载完成后被调用，此时组件已经挂载到 DOM 上，可以访问到。在数据更新完成后被调用，此时组件的 DOM 已经更新。在销毁完成后被调用，此时组件已经完全销毁，无法再访问。在销毁之前被调用，此时组件仍然可用，但即将被销毁。应用场景：适合在挂载之前对模板进行最后的调整。

计算属性通过 computed 选项定义，它是一个对象，对象的每个属性对应一个计算逻辑。计算属性可以是一个函数，也可以是一个包含 get 和 set 方法的对象new Vue({data: {},return `${thisnew Vue({} } });fullName 是一个计算属性，它基于 firstName 和 lastName 的值动态计算出完整的姓名。

当子组件调用 notifyParent 方法时，会触发 update-event，父组件的 handleUpdate 方法会被调用，从而更新父组件的数据，进而触发父组件的更新。例如，当一个组件中的某个数据发生变化时，只有依赖这个数据的视图部分会被更新，而不会影响到其他无关的视图部分。当路由参数 id 发生变化时，watch 会触发 fetchData 方法，从而更新组件的数据，进而触发组件的更新。当你通过 data 函数返回的数据对象中的属性值发生变化时，Vue 会自动检测到这一变化，并触发组件的更新.

单文件组件API使用文件扩展名为 .vue 的来构建组件。

默认插槽值：0

创建一个 todo-item 组件的实例