记录每日学习的知识&技术

Vue2默认无法检测到对象属性的新增或删除，但如果是在实例创建之初就已经存在的属性，则可以通过直接赋值进行更新。若要动态添加或删除属性，需使用。不过，在Vue3中，由于引入了Proxy，对对象属性的添加和删除不再需要手动调用这些方法。但在Vue2中，为了保证响应性，上述方法是必要的。，而在非组件上下文或其他需要设置全局响应式数据的地方，可以使用。请注意，在组件内部通常使用。

子组件可以将数据作为插槽 props 提供给父组件，然后父组件在渲染插槽内容时可以使用这些数据。实际上在Vue中，默认插槽就是匿名插槽，即没有指定名称的插槽。Vue.js 中的插槽（Slots）是Vue组件间进行内容传递的重要机制，用于在父组件中向子组件插入内容。（Default Slot）: 默认插槽是没有明确命名的插槽，它用于接收父组件传递的所有未指定插槽名的内容。（Named Slots）: 具名插槽允许开发者为插槽赋予特定的名字，从而在子组件中精确放置内容。，它就是一个匿名插槽，也就是默认插槽。

Vue.js 中的路由导航守卫是 Vue Router 提供的一套机制，用于在路由切换的过程中执行自定义代码逻辑，包括但不限于权限验证、页面滚动位置保存、加载数据等。beforeRouteEnter: 组件实例还未创建时就已存在的守卫，不能直接访问组件实例，可以通过 next(vm => {}) 访问组件实例并传递给回调函数。beforeRouteUpdate: 当路由的 params 或 query 发生变化（即当前路由路径不变，只有参数变化）时触发，此时可以直接访问组件实例。

在Vue中，Methods、Watch和Computed是三种用于处理数据和响应数据变化的不同方式。Watch：主动监控，每次监控，没有缓存，支持异步，深度监控，立即监控。Computed：被动计算，一次计算，拥有缓存，不可异步。Methods：主动调用，每次调用，没有缓冲，支持异步。

这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。

是 Vue 3 中定义异步组件的新方法。它返回一个 Promise 对象，该 Promise 对象在组件被请求之前解析为一个组件选项对象，从而实现异步组件的加载。在 Vue 3 中，处理懒加载的方式与 Vue 2 中有所不同。Vue 3 推荐使用。组件是 Vue 3 中新增的组件，用于处理异步组件的加载状态。属性指定一个加载中的占位符，直到异步组件加载完成后再显示真正的内容。来实现组件的懒加载。

需要注意的是，Vue的订阅发布模式主要用于组件之间的通信，而不是全局事件的发布和订阅。如果你需要在整个应用程序范围内进行全局事件管理，可以考虑使用Vue的事件总线或其他状态管理工具（如Vuex）来实现。Vue.js是一个流行的JavaScript框架，它提供了一种名为"观察者模式"的订阅发布模式（也称为发布-订阅模式或事件模型）来管理组件之间的通信。通过这种方式，你可以在Vue组件之间进行松耦合的通信，实现数据的传递和操作。这个机制允许你在一个组件中定义自定义事件，并在其他组件中监听并响应这些事件。

当 URL 发生变化时，浏览器会向服务器发送请求，服务器需要配置来确保对任何 URL 请求都返回相同的 HTML 页面，然后由前端路由来处理 URL 的变化。当路由切换时，Vue Router 会根据新的 hash 值匹配对应的路由组件，并将组件渲染到页面中。在使用 history 模式时，需要在服务器配置中添加一个规则，将所有的 URL 请求重定向到前端的入口页面，例如。这样，在刷新页面或直接访问某个路由时，服务器会返回入口页面，并由前端路由来处理路由的切换。符号，更符合正常的 URL 地址格式。

Vuex是Vue.js官方推荐的状态管理库，用于在Vue应用程序中管理和共享状态。它基于Flux架构和单向数据流的概念，将应用程序的状态集中管理，使得状态的变化更可追踪、更易于管理。Vuex提供了一个全局的状态树，以及一些用于修改状态的方法。创建Vuex Store： 在你的项目中创建一个Vuex Store。在Vue应用中使用Vuex： 在Vue应用程序中使用Vuex的方式有多种，常见的方式是在Vue实例中通过。来访问Vuex Store中的状态和方法，从而进行状态的读取和修改。

API 是建立在新的 Composition API 之上的。如果你需要在 Vue2 中实现类似的功能，你需要使用 Vue2 的。是两个用于处理响应式数据的 API。它们的目的都是使数据具有响应性，但它们之间存在一些重要的区别。但当处理复杂的数据类型（如对象或数组）时，是用来创建一个响应式的响应式对象或原始值数组。也就是说，当你想创建一个响应式的。时，可以直接修改对象或数组的属性或元素，因为。是用来创建一个响应式的引用对象或原始值，而。适用于简单的原始值或单个对象，而。只会对引用的值进行响应式处理。

Vue2是把数据放入data中，在vue2中定义数据变量是data(){}；创建方法需要在methods:{}中进行创建。Vue3需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：从vue引入reactive；使用reactive() 方法来声明数据为响应性数据；使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。