目录
一、模板语法与结构
1.1.组合式api
1.通过setup函数组织逻辑
2.响应式API
ref/reactive/shallowReactive
readonly/shallowReadonly
toRaw/markRaw
toRef/toRefs
3.计算属性
4.侦听变化：
5.生命周期钩子：
6.依赖注入：
案例:跨组件的依赖注入
1.2.新增内置组件
Fragment：
Teleport：
Suspense：
1.3.内置函数判断类型
isRef()
isReactive()
isReadonly
isProxy()
二、数据绑定与响应式系统
三、生命周期
3.1.生命周期阶段
1.创建阶段
2.挂载阶段
3.更新阶段
4.销毁阶段
3.2.其他生命周期钩子
3.3.Options API与Composition API中的生命周期钩子
3.4.生命周期钩子的使用场景
四、类型支持
五、状态管理与路由
5.1.Pinia的特点
5.2.Pinia的基本使用
1.安装Pinia
2.创建Pinia实例并挂载到Vue应用：
3.定义Store：
状态更新过程
组件响应
5.3.Pinia的持久化
Pinia与Vuex的区别
本文讲解vue3不同于vue2的基础知识。
一、模板语法与结构
Vue2
<template>中必须只有一个根标签。使用选项式API（Options API）组织代码，如data、computed、methods等属性被分割在不同的部分。
Vue3
<template>中支持Fragments，即可以有多个根标签，Vue3会默认把这些标签包裹在一个虚拟标签中，减少内存占用。
引入了组合式API（Composition API），允许使用函数来组织代码，使得代码更加灵活和可复用。
1.1.组合式api
1.通过setup函数组织逻辑
所有的组合式api 都在setup函数中使用，该函数在组件实例创建之前调用
在setup函数中，可以定义响应式状态。计算属性、方法、生命周期钩子等
2.响应式API
ref/reactive/shallowReactive
通过
ref和reactive创建响应式状态。
ref用于定义基本类型的响应式数据，而reactive用于定义复杂类型的响应式数据。
ref 主要用于定义基本类型的响应式数据，比如数字、字符串、布尔值等。当这些数据发生变化时，Vue会检测到并更新视图。
<template><div><p>Message: {{ message }}</p><button @click="updateMessage">Update Message</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 使用 ref 创建响应式状态const message = ref('Hello, Vue 3!');// 定义一个更新消息的方法function updateMessage() {message.value = 'Hello, Composition API!';}// 返回响应式状态和方法return {message,updateMessage};}
};
</script>reactive 主要用于定义复杂类型的响应式数据，比如对象、数组等。和ref一样，当这些数据发生变化时，Vue也会检测到并更新视图。
<template><div><p>User: {{ user.name }}</p><p>Age: {{ user.age }}</p><button @click="incrementAge">Increment Age</button></div>
</template><script>
import { reactive } from 'vue';export default {setup() {// 使用 reactive 创建响应式状态const user = reactive({name: 'John Doe',age: 30});// 定义一个增加年龄的方法function incrementAge() {user.age++;}// 返回响应式状态和方法return {user,incrementAge};}
};
</script>shallowReactive
用于创建一个响应式对象，但与
reactive()不同的是，它只将对象的顶层属性转换为响应式，而不会递归地转换对象内部的嵌套对象。这意味着，如果你修改了一个顶层属性的值（比如将其替换为一个新的对象），这个修改将是响应式的，但如果修改了一个嵌套对象的属性，则不会触发视图更新。
使用场景：适用于只需要对象的直接属性是响应式的，而嵌套对象可以保持非响应式的场景
<script setup>
import { shallowReactive } from 'vue';const state = shallowReactive({items: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' }]
});function addItem() {state.items.push({ id: 3, name: 'Item 3' });
}
</script><template><div><ul><li v-for="item in state.items" :key="item.id">{{ item.name }}</li></ul><button @click="addItem">Add Item</button></div>
</template>readonly/shallowReadonly
readonly函数用于创建一个只读的响应式对象。这个对象的所有属性都是只读的，即不能修改。尝试修改这些属性将会导致运行时警告，但对象的响应性仍然存在：如果原始响应式对象（用于创建只读对象的对象）的属性发生变化，这些变化将反映在读写对象上，但你不能通过读写对象来修改它们。
<script setup>
import { reactive, readonly } from 'vue';const state = reactive({count: 0
});const readOnlyState = readonly(state);
</script><template><div><p>Read-only Count: {{ readOnlyState.count }}</p><!-- 尝试修改readOnlyState.count将不会生效 --><button @click="readOnlyState.count++">Increment (will not work)</button></div>
</template>shallowReadonly函数创建一个浅层的只读响应式对象。与 readonly 类似，它创建的对象也是只读的，但只作用于对象的顶层属性。如果对象的某个顶层属性是一个对象或数组，你可以修改这个嵌套对象或数组的内部状态，但这种修改不会触发视图更新，因为嵌套对象本身不是响应式的。
<script setup>
import { shallowReadonly } from 'vue';const state = {user: {name: 'Alice',age: 30}
};const readOnlyUser = shallowReadonly(state.user);
</script><template><div><p>Read-only User Name: {{ readOnlyUser.name }}</p><!-- 尝试修改readOnlyUser.name将不会生效 --><button @click="readOnlyUser.name = 'Bob'">Change Name (will not work)</button><!-- 但可以修改嵌套对象的属性（尽管不会触发视图更新） --><button @click="state.user.age++">Increment Age (will work but not reactive)</button></div>
</template>toRaw/markRaw
toRaw
功能：将响应式对象转为普通对象,当修改这个普通对象时，页面不会发生响应式变化
使用场景：适用于需要访问响应式对象的原始数据（非Proxy对象）的场景。
// 注意：生成出来的原始对象 是会和 响应式对象保持连接，当响应式对象发生修改时，那么该原始对象也会发生修改
<script setup>
import { reactive, toRaw } from 'vue';const state = reactive({count: 0
});const rawState = toRaw(state);
console.log(rawState === state); // false，因为state是Proxy对象，而rawState是原始对象
</script>markRaw
功能：标记一个对象，使其永远不会成为响应式对象。
使用场景：适用于希望一个对象永远保持非响应式的场景。
<script setup>
import { reactive, markRaw } from 'vue';const nonReactiveObject = markRaw({name: 'Non-reactive Object'
});const state = reactive({obj: nonReactiveObject
});// 尝试修改state.obj的属性，但不会触发视图更新（因为nonReactiveObject是非响应式的）
state.obj.name = 'Changed Name';
</script>toRef/toRefs
toRef
功能：创建一个ref 对象 将其中的value 指向另一个对象中的某个属性值
使用场景： 常用于 将响应式对象中的某一个属性 ，单独提供给外部使用
<script setup>
import { reactive, toRef } from 'vue';const state = reactive({count: 0
});const countRef = toRef(state, 'count');function increment() {countRef.value++;
}
</script><template><div><p>Count: {{ countRef.value }}</p><button @click="increment">Increment</button></div>
</template>toRefs
功能：将对象中的所有属性值都转为 ref 对象
使用场景：适用于需要将一个对象的所有属性都转换为响应式引用，并希望以解构的方式使用的场景。
<script setup>
import { reactive, toRefs } from 'vue';const state = reactive({count: 0,name: 'Alice'
});const { count, name } = toRefs(state);function increment() {count.value++;
}
</script><template><div><p>Count: {{ count.value }}</p><p>Name: {{ name.value }}</p><button @click="increment">Increment</button></div>
</template>3.计算属性
使用computed函数定义计算属性，计算属性依赖于其他响应式数据，并且只有在依赖发生变化时才会重新计算值。
4.侦听变化：
使用watch和watchEffect函数观察响应式数据的变化，并相应地做出反应。
watch用于监视特定数据的变化，并在数据变化时执行回调函数。
watchEffect则会自动追踪在其函数体中使用的任何响应式数据，并在这些数据发生变化时触发回调函数。
5.生命周期钩子：
使用onMounted、onUpdated、onUnmounted等函数来管理组件的生命周期。
6.依赖注入：
通过provide和inject实现依赖注入，使得顶层组件可以向任意的底层组件传递数据和方法。
1.在祖先组件中使用provide
import { provide } from 'vue';export default {setup() {const someData = 'Hello from Provider!';const someMethod = () => {console.log('Method called!');};// 提供数据和方法provide('sharedData', someData);provide('sharedMethod', someMethod);// ... 其他逻辑}
};2.在后代组件中使用inject
import { inject } from 'vue';export default {setup() {// 从祖先组件中获取提供的数据和方法const sharedData = inject('sharedData');const sharedMethod = inject('sharedMethod');// 使用获取到的数据和方法console.log(sharedData); // 输出: Hello from Provider!sharedMethod(); // 输出: Method called!// ... 其他逻辑}
};案例:跨组件的依赖注入
<!-- App.vue -->
<template><div><ThemeSwitcher /><ChildComponent /></div>
</template><script>
import { provide, ref } from 'vue';
import ThemeSwitcher from './ThemeSwitcher.vue';
import ChildComponent from './ChildComponent.vue';export default {components: { ThemeSwitcher, ChildComponent },setup() {const theme = ref('light');const toggleTheme = () => {theme.value = theme.value === 'light' ? 'dark' : 'light';};provide('theme', theme);provide('toggleTheme', toggleTheme);}
};
</script><!-- ThemeSwitcher.vue -->
<template><button @click="toggleTheme">Toggle Theme</button>
</template><script>
import { inject } from 'vue';export default {setup() {const toggleTheme = inject('toggleTheme');return { toggleTheme };}
};
</script><!-- ChildComponent.vue -->
<template><div :class="currentTheme">Child Component</div>
</template><script>
import { inject, computed } from 'vue';export default {setup() {const theme = inject('theme');const currentTheme = computed(() => theme.value === 'light' ? 'light-theme' : 'dark-theme');return { currentTheme };}
};
</script><style>
.light-theme {background-color: white;color: black;
}.dark-theme {background-color: black;color: white;
}
</style>1.2.新增内置组件
Fragment：
功能：允许在模板中书写多个根元素，而不需要将它们包裹在一个单独的父元素中。这解决了Vue 2中必须有一个单一根节点的限制。
应用场景：在现代前端开发中，减少无用DOM结构对于提升性能和简化样式管理都至关重要。Fragment组件的引入顺应了这一需求。
示例代码：
<template><><header>Header Content</header><main>Main Content</main><footer>Footer Content</footer></>Teleport：
功能：来控制Dom节点渲染到哪个父级节点下；
通过to 属性来实现 to 可以写标签名 或 id 名 class 名等
应用场景：当需要在页面的顶层显示某些内容时，比如模态框、通知、悬浮菜单等，可以使用Teleport将这些内容移动到body标签下。这样可以更方便地管理和控制全局样式和布局。
<template><div><button @click="showModal = true">Show Modal</button><teleport to="body"><div v-if="showModal" class="modal"><p>This is a modal</p><button @click="showModal = false">Close</button></div></teleport></div>
</template><script>
export default {data() {return {showModal: false};}
};
</script>Suspense：
功能：用于处理异步组件的加载状态。在加载异步组件时，可以展示一个等待状态或备用内容。
应用场景：在加载大型组件或从服务器获取数据时，可以使用Suspense来显示加载状态，提升用户体验。通过显示加载动画或占位符来减少用户在等待数据加载时的焦虑。
default属性：用于显示异步组件内容
fallback属性：用于在组件加载过程中 要显示等待内容，从而使用该内置组件可以
<template><div>
<!-- 提高用户体验 -->
<!-- 注意：只有你的父级使用了 suspense 你子组件才可以使用 async 和await --><Suspense>
<!-- 要加载的组件 --><template #default><AsyncComponent /></template>
<!-- 组件未加载完毕时 要显示内容 --><template #fallback><p>Loading...</p></template></suspense></div>
</template><script>
const AsyncComponent = () => ({component: import('./AsyncComponent.vue'),delay: 200,timeout: 3000,error: () => import('./ErrorComponent.vue')
});export default {components: {AsyncComponent}
};
</script>1.3.内置函数判断类型
isRef()
这个函数用于检查一个值是否是一个 ref 对象。ref 是 Vue 3 中用于创建响应式基本类型（如字符串、数字、布尔值等）的函数。
import { ref } from 'vue';
import { isRef } from 'vue';const count = ref(0);
console.log(isRef(count)); // true
console.log(isRef(123)); // falseisReactive()
这个函数用于检查一个值是否是由 reactive 函数创建的响应式对象。reactive 用于将普通对象转换为响应式对象。
import { reactive } from 'vue';
import { isReactive } from 'vue';const state = reactive({ count: 0 });
console.log(isReactive(state)); // true
console.log(isReactive({})); // falseisReadonly
这个函数用于检查一个值是否是由 readonly 函数创建的只读对象。readonly 用于创建一个响应式对象的只读版本，即该对象的内容不能被修改。
import { reactive, readonly } from 'vue';
import { isReadonly } from 'vue';const state = reactive({ count: 0 });
const readonlyState = readonly(state);
console.log(isReadonly(readonlyState)); // true
console.log(isReadonly(state)); // falseisProxy()
这个函数用于检查一个值是否是一个代理对象（Proxy）。在 Vue 3 的响应式系统中，reactive 和 readonly 都会返回代理对象，因此 isProxy 可以用来检查这些值。
import { reactive, readonly } from 'vue';
import { isProxy } from 'vue';const state = reactive({ count: 0 });
const readonlyState = readonly(state);
console.log(isProxy(state)); // true
console.log(isProxy(readonlyState)); // true
console.log(isProxy({})); // false二、数据绑定与响应式系统
Vue2
双向数据绑定是利用ES5的
Object.defineProperty()对数据进行劫持，结合发布订阅模式实现的。这种方式只能监听某个属性，不能对全对象进行监听。在组件中，数据通常被放在
data属性中。
Vue3
使用了ES6的Proxy API对数据代理，可以监听整个对象，包括数组的变化，提升了效率和灵活性。
在Vue3中，需要使用setup()方法来建立响应式数据。这个方法在组件初始化时触发，并返回一个对象，该对象中的属性和方法可以在模板中使用。
三、生命周期
Vue2生命周期钩子
生命周期钩子包括
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。
Vue3生命周期钩子
生命周期钩子进行了重命名和增加，如beforeCreate和created被setup()替代（注意setup()在beforeCreate和created之前执行），beforeMount变为onBeforeMount，mounted变为onMounted，以此类推。
Vue3还增加了onActivated和onDeactivated等钩子，用于处理被包含组件的激活和停用状态。
3.1.生命周期阶段
Vue 3的生命周期是指一个组件从创建到销毁的整个过程。在这个过程中，Vue提供了一系列的生命周期钩子函数（也称为生命周期函数或生命周期事件），允许开发者在组件的特定阶段执行自定义的逻辑。这些钩子函数对于管理组件的状态、执行异步操作、订阅和清理事件等非常重要。
Vue 3的生命周期主要分为以下四个阶段：创建阶段、挂载阶段、更新阶段、销毁阶段
1.创建阶段
创建阶段（Initialization）：组件实例被创建，初始化数据和事件等。这个阶段包含beforeCreate和created两个主要的生命周期钩子。
此外，在使用Composition API时，setup()函数在beforeCreate和created之间被调用，用于初始化组件的逻辑，如设置响应式数据、方法等。但需要注意的是，setup()函数中无法访问this，因为它在组件实例初始化之前执行。
beforeCreate：在组件实例刚刚被创建，但还没有初始化数据、事件和侦听器时调用。此时，组件实例的属性还没有被添加，不能访问data、computed或methods等选项。
created：在组件实例创建完成后调用，此时可以访问并操作组件的属性和方法，但无法访问组件的DOM元素。
2.挂载阶段
挂载阶段（Mounting）：组件被挂载到DOM，相关的渲染完成。这个阶段包含beforeMount和mounted两个主要的生命周期钩子。
beforeMount：在挂载开始之前被调用，即将要把模板渲染成最终的DOM结构。此时，模板中的v-if、v-for等指令还没有执行。
mounted：在挂载完成后调用，此时组件的DOM已经被渲染完成，可以进行DOM操作，如发送异步请求等。
3.更新阶段
更新阶段（Updating）：响应式数据发生变化，组件重新渲染。这个阶段包含beforeUpdate和updated两个主要的生命周期钩子。
beforeUpdate：在数据变化导致的重新渲染开始之前调用。可以在此阶段访问最新的DOM状态，但此时DOM还未更新。
updated：在重新渲染并更新DOM完成后调用。此时可以进行DOM操作，但应避免在此阶段修改数据，以防止无限更新循环。
4.销毁阶段
销毁阶段（Unmounting）：组件从DOM中移除，进行清理工作。这个阶段包含beforeUnmount和unmounted两个主要的生命周期钩子。
beforeUnmount：在组件实例卸载之前调用。此时组件仍然是活跃的，可以进行清理操作，如清除定时器或取消事件监听。
unmounted：在组件实例卸载并移除DOM后调用。此时组件已经被销毁，不能再访问组件的属性和方法。
3.2.其他生命周期钩子
除了上述主要的生命周期钩子外，Vue 3还提供了一些其他的生命周期钩子，用于捕获错误和调试：
errorCaptured、renderTracked和renderTriggered
errorCaptured：用于捕获子组件内部发生的错误，防止错误向上传播。这个钩子主要在Options API中使用。
renderTracked和renderTriggered：这两个钩子用于调试和性能分析，跟踪响应式数据的依赖和触发。它们可以帮助开发者了解组件的渲染过程和性能瓶颈。
3.3.Options API与Composition API中的生命周期钩子
在Vue 3中，开发者可以选择使用Options API或Composition API来定义组件的生命周期钩子。
Options API：在Vue 2和Vue 3中都可以使用。在Options API中，生命周期钩子是组件选项中的方法，如beforeCreate、created等。
Composition API：这是Vue 3引入的新API，它提供了更灵活和可复用的方式来组织组件逻辑。在Composition API中，生命周期钩子需要从vue包中导入，并在setup()函数中使用，如onBeforeMount、onMounted等。
3.4.生命周期钩子的使用场景
数据初始化：在created或setup()钩子中进行异步数据请求或初始化组件的状态。
DOM操作：在mounted钩子中进行DOM操作，如添加事件监听器或初始化第三方库。
清理工作：在beforeUnmount或unmounted钩子中清除定时器、取消事件监听器等资源。
错误捕获：在errorCaptured钩子中捕获子组件的错误并进行处理。
四、类型支持
Vue2
虽然可以使用TypeScript，但支持不够完善，类型推断和类型检查较弱。
Vue3
从设计之初就考虑了TypeScript，提供了更好的类型推断，允许更安全的开发体验。
关于TypeScript的相关基础知识本文作者将在前端基础中。TypeScript基础
https://blog.csdn.net/m0_64455070/article/details/144187763
五、状态管理与路由
Vue2
使用Vuex进行状态管理，通过state、getters、mutations和actions组织状态，采用单一的全局状态树。
路由通过VueRouter插件进行管理，并在Vue实例中进行注册。
Vue3
使用Pinia进行状态管理，允许多个store模块，支持模块化的状态管理，更加灵活。
仍然使用Vue Router进行路由管理，但通过createRouter函数来创建路由实例，API更加现代化。
5.1.Pinia的特点
简单直观的API：Pinia去掉了Vuex中的mutation概念，提供了更加简单的API。同时，它提供了符合Vue 3组合式风格的API，使得状态管理逻辑更加清晰和灵活。
模块独立性：在Pinia中，每一个store都是一个独立的模块，去掉了Vuex中modules的概念，简化了状态管理的结构。
类型安全：Pinia配合TypeScript使用更加友好，提供了可靠的类型推断，使得在开发过程中能够减少类型错误。
插件化：Pinia提供了丰富的插件生态，可以轻松地扩展其功能。例如，可以使用pinia-plugin-persistedstate插件来实现状态的持久化。
服务端渲染支持：Pinia提供了对服务端渲染的支持，使得在服务端渲染的Vue应用中也能够方便地使用状态管理。
5.2.Pinia的基本使用
1.安装Pinia
在Vue项目中，可以通过npm或yarn来安装Pinia。例如，使用npm安装Pinia的命令为npm install pinia。
2.创建Pinia实例并挂载到Vue应用：
在main.js或main.ts文件中，首先需要导入Pinia和Vue应用。然后，创建一个Pinia实例，并使用app.use(pinia)将其挂载到Vue应用上。
3.定义Store：
使用defineStore函数来定义一个store。这个函数接受两个参数：store的唯一标识符和一个配置对象（或函数）。在配置对象中，可以定义state、getters和actions等。
State相当于Vue组件中的data，用于存储状态数据。
Getters相当于Vue组件中的computed，用于定义基于state的计算属性。
Actions相当于Vue组件中的methods，用于定义修改state的方法。
State（状态）：用于存储应用程序的状态数据
在Pinia中，state是一个响应式的对象，当state中的数据发生变化时，依赖于该数据的组件会自动更新。
Gettters（计算属性）；用于定义一些给予state的派生状态。可以接受state作为参数，并返回一个计算结果。
在组件中，可以通过store实例直接访问getters
Actions（方法）：用于修改state的方法。可以通过this关键字访问store的state和getters
Actions可以使同步的，也可以是异步的
状态更新过程
状态更新：当需要更新state中的数据时，可以直接修改state对象的属性，或者使用Pinia提供的$patch（）方法来批量更新状态
$patch方法可以接受一个对象或一个回调函数作为参数，用于指定要更新的状态
组件响应
组件响应：当state中的数据发生变化时，依赖于该数据的组件会自动重新渲染，以反映最新的状态。在组件中，可以使用computed属性或watch函数来监听state的变化，并执行相应的逻辑。
在组件中使用Store：
在Vue组件中，可以通过useXXXStore（XXX为store的唯一标识符）来引入并使用store。然后，就可以像使用Vue组件的data和methods一样来使用store中的state和actions了。
5.3.Pinia的持久化
为了保持用户在页面刷新或关闭后仍能记住之前的状态，可以使用Pinia的持久化插件。例如，pinia-plugin-persistedstate插件可以帮助实现这一功能。
安装插件：通过npm或yarn安装pinia-plugin-persistedstate插件。
在main.js中使用插件：在创建Pinia实例后，使用pinia.use(piniaPluginPersistedstate)来应用插件。
在Store中配置持久化：在定义Store时，可以通过添加persist配置项来开启持久化功能，并配置需要持久化的state路径和本地存储的唯一标识等。
Pinia与Vuex的区别
API简洁性：Pinia提供了更加简洁的API，去掉了Vuex中的mutation和modules等概念。
类型安全性：Pinia配合TypeScript使用更加友好，提供了可靠的类型推断。
组合式API：Pinia鼓励使用Vue 3的组合式API来定义和操作状态，使得状态管理逻辑更加清晰和灵活。
插件生态：Pinia提供了丰富的插件生态，可以轻松地扩展其功能。而Vuex的插件生态相对较少。
码字不易，各位友友们点点赞