笔记、经验、日常分享

Vue Router 在 Vue3 中被重写，使用了 Vue3 的 Composition API。使用上跟Vue2 相比有些不同，需要注意。Vue Router 在 Vue3 中被重写，使用了 Vue3 的 Composition API。这意味着你可以在任何组件中使用。Vue3 中的 Vue Router 对 Vue2 的 API 进行了一些更改，例如，Vue3 支持异步组件，这意味着你可以在路由配置中直接使用动态。来分别获取 router 实例和当前路由。

在 Vue 3 中，使用 reactive 函数可以创建一个响应式对象，从而实现组件间的通信和状态管理。遵循这些规则可以确保状态管理的正确性和可维护性。这样，就可以在多个组件中共享和复用。

在 Vue3 中，`props` 和 `emit` 的用法有所改变，主要的变化在于它们现在都通过 `setup` 函数来访问和使用。

setup函数是一个新的组件选项，它作为在组件内使用 Composition API 的入口。是 Vue 3.2 引入的一项新特性，它提供了一种更简洁的方式来编写 Vue 组件。是两种新引入的编写组件的方式，它们都是 Composition API 的一部分。标签并不兼容，你不能在同一个组件中同时使用两者。script setup我们可以直接定义和导出组件选项，无需包装在。被解析后立即调用，但在 DOM 渲染之前。同时script setup还有一些其他的规则和限制。

Vue3引入了许多新特性和改进,包括新增指令、内置组件以及Composition API、响应式系统的改进和更好的TypeScript支持等。通过学习和运用这些新特性,可以更高效、更灵活地构建现代Web应用。本文提供了这些新特性的概述和示例代码,帮助开发者快速上手Vue3。Vue.js是一款流行的JavaScript框架,用于构建现代Web应用。Vue3是Vue.js的最新版本,引入了许多新特性和改进。

在 Vue3 中，你也可以使用新的生命周期函数 onRenderTracked 和 onRenderTriggered，它们可以帮助你跟踪和调试组件的渲染。Vue3 继续保留了 Vue2 的生命周期钩子，但在 Composition API（setup 函数）中，它们被改为了一组导入函数。与 Vue2 相比，Vue3 的生命周期函数提供了更好的类型支持和复用性。它们更加灵活，可以在组件之间共享和复用代码，这是在 Vue2 中无法做到的。在 Vue3 中，所有的生命周期函数都应在 setup 函数中使用。

Vue3 中提供了一系列的生命周期钩子，如 onMounted、onUpdated 和 onUnmounted，这些钩子在 setup 函数内部使用。Vue3 和 Vue2 的主要区别在于 Vue3 引入了 Composition API，这是一种新的组织和复用代码的方式。Vue3 使用 ref 和 reactive 来创建响应式数据，而 Vue2 中则是在 data 函数中返回一个对象。Vue3 的方法可以直接返回，而不需要像 Vue2 那样放在 methods 对象中。

在vue3.x版本中，setup函数就是vue3 组合式API的入口，换句话说就是在setup中的写的代码，就是组合式API 的写法。下面总结常用的与响应式相关的api, 帮助您在 Vue 3 中创建响应式应用程序。更多Vue3 API请参考官网：https://cn.vuejs.org/api/

Vue 3 的 setup 函数是 Vue 3 Composition API 的核心部分，它使得代码的复用和组织变得更加简单。

函数是 Vue 3 中的两个非常有用的函数，它们可以帮助我们更好地管理组件中的响应式数据，并且可以提高组件的性能和用户体验。在使用这两个函数时，我们需要注意的是，它们只能将一个响应式对象的属性转换为引用，而不能将一个普通对象的属性转换为引用。但是，当我们直接在模板中使用这些属性时，会有一个问题：当这些属性的值发生变化时，组件将会重新渲染，即使其他属性的值没有发生变化。函数用于将一个响应式对象的属性转换为引用。函数的应用场景是在组件中使用响应式对象的属性时，尤其是在一个组件中需要使用多个响应式对象的属性时。

Vue.js 和 React 虽然都是流行的前端框架,但在设计哲学上有一些显著差异。这些差异源自它们不同的设计目标和出发点。

在实际应用中，通常建议在创建路由器时就定义所有路由，以保持代码的清晰和可维护性。动态添加路由应该只在特殊情况下使用，比如在用户登录后根据其权限动态加载内容。确保使用HTTPS来保护用户的认证信息，并且在后端验证Token时，应该使用强密码策略，避免潜在的安全威胁，如注入攻击、跨站请求伪造（CSRF）等。在上面的代码中，checkAuthentication 和 checkRole 是需要你根据实际情况实现的函数，用于检查用户是否登录以及用户的角色。