youhebuke225的博客

vue基础知识目录

调用方式在组件中，可以通过直接调用action，或者使用mapActions辅助函数将action映射到组件的方法中，然后通过调用。传递参数可以向dispatch方法传递第二个参数，这个参数会作为payload传递给action函数，在action中可以接收这个payload进行后续操作。异步操作dispatch通常用于触发包含异步操作的action，比如发送网络请求，在请求成功或失败后可以调用mutation来修改state。使用dispatch。

exportdefaultcomputed...mapState'count'methods...mapActionscreated// 可以在这里调用 actionOne 来触发整个流程thisactionOne;;</

/ 假设子组件有一个名为childMethod的方法。// 通过$parent访问父组件方法。'子组件的方法被调用了'// 将方法暴露给父组件。'父组件的方法被调用了'

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。：在实例创建完成后被立即调用。在这一步，实例已完成所有的数据观测、计算属性和方法的配置，但是还没有挂载到DOM，：在挂载开始之前被调用：相关的 render 函数首次被调用。如果你需要在Vue实例创建后立即执行某些操作，比如发送请求获取数据并更新到组件的状态中，那么。因此，如果你需要在Vue实例创建后尽早地访问其属性或方法，但又不需要直接操作DOM，那么。替换，并挂载到实例上去之后调用该钩子。

遵循以上规范和建议，可以使你的Vue项目更加整洁、易于理解和维护。记住，这些规范并不是强制性的，但它们是基于社区广泛接受的最佳实践。根据项目或团队的具体需求，你可以适当调整这些规范。

对于自定义组件，Vue 2.2.0+允许你使用.sync修饰符来实现类似v-model的双向绑定效果，但Vue 3推荐使用自定义v-model的方式。v-model在Vue 3中，.sync修饰符被移除了，推荐使用自定义v-model的方式来实现双向绑定。你可以通过指定modelValue作为prop名，并监听事件来实现。

在 Vue 中，判断组件是否接收到了传入的属性值（props），你可以直接在组件内部检查这些属性是否已定义和是否具有有效的值。提供一个默认值，这样即使父组件没有传递该属性，子组件也能有一个可用的值。首先，假设你有一个父组件，它向子组件传递了一个名为。的变化，并在其值改变时执行特定的逻辑。的值来显示不同的内容。然后，在子组件中，你可以通过。钩子函数中，你可以检查。指令用于在模板中根据。

如果你确实需要在全局范围内使用类似过滤器的功能，并且这些功能不依赖于特定的 Vue 实例或组件，那么你可以考虑在 Vue 原型上添加方法或使用 JavaScript 的模块系统来导出和导入这些函数。如果你确实需要在多个地方重复使用相同的格式化逻辑，并且不想在模板中直接调用方法，那么计算属性是一个很好的选择。计算属性是基于它们的依赖进行缓存的，只有当依赖项发生变化时，它们才会重新求值。在上面的示例中，我们并没有使用 Vue 的过滤器，而是使用了一个名为。中调用了这个方法，并将结果用于模板中的显示。

最好的实践是避免在全局作用域中定义变量，因为这可能会导致不可预测的行为和难以调试的问题。尽可能使用模块导出或 Vuex 来管理你的状态。如果你确实需要全局变量，确保它们被适当地命名和文档化，以减少潜在的冲突和误解。

请注意，这些规范并不是硬性的规定，它们更多是最佳实践。不同的项目或团队可能会有自己的命名规范，重要的是保持项目内部的一致性。同时，在遵循命名规范的同时，也要考虑到代码的可读性和维护性。在Vue 2中，文件命名规范是保持项目一致性和可读性的重要部分。

在 Vue 2 中，没有直接内置的方式来使用外部 HTML 文件作为组件的模板。你通常需要结合前端工程化工具（如 Webpack）或使用 AJAX 等技术来实现。每种方法都有其适用场景和限制，你需要根据你的项目需求来选择最合适的方法。同时，无论使用哪种方法，都要确保外部 HTML 内容的安全性，避免潜在的安全风险。

在 Vue 2 中，mixin 是一种分发 Vue 组件中可复用功能的非常灵活的方式。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。mixin 在 Vue 中是一个非常强大的功能，它允许你创建可重用的代码片段，并在多个组件之间共享这些代码片段，从而提高了代码的可维护性和复用性。对于大多数值，如对象或数组，将使用深层次的合并。等选项将自动合并到组件中。你可以在组件的模板或方法中直接使用这些属性和方法。当你在组件中使用 mixin 后，mixin 中的。

您实际上是在告诉 Vue：“这个组件可以触发一个事件来更新与。与此组件绑定时，父组件的数据将会随着输入框的值的变化而更新。的 prop，并在输入框的值发生变化时触发。是 Vue 3 中用于自定义组件与。在这个例子中，自定义组件接收一个名为。选项用于声明组件可以触发的事件。这样，当您在父组件中使用。内部的输入框的值的变化而更新。所以，当您在自定义组件中声明。指令配合工作的特殊事件名。在 Vue.js 中，

Vue 的计算属性（computed properties）本身是不能直接传参的。计算属性是基于它们的依赖进行缓存的，它们返回的值会根据其依赖属性的变化而自动更新。计算属性通常用于对复杂的数据进行处理，并返回处理后的值。如果你需要根据不同的参数来计算不同的值，你可能需要使用方法（methods）而不是计算属性。方法可以接受参数，并返回基于这些参数的计算结果。然而，方法不会像计算属性那样进行缓存，每次调用都会重新计算。是一个计算属性，它不能接受参数，并返回。是一个方法，它接受一个。

把属性结构按照层级进行分解，只比较同级元素他包括虚拟dom的对比，以及对比之后更新真实dom。

众所周知，vue内部构建的其实是虚拟DOM，而虚拟DOM是由虚拟节点生成的，实质上虚拟节点也就是一个js对象事实上，我们在vue中写的template,最终也是经过渲染函数生成对应的VNode而h函数就是用来生成VNode的一个函数，他的全名叫做createVNode。

我们新建一个对象，建完对象后给对象赋值属性，我们一般进行如下的操作除此之外，我们还可以使用来对对象添加属性，如下我们可以看到，她也是为对象obj添加了age属性。

vue响应式原理的大致图像如下当然我们现在看有点晕，不过，让我们一点一点的深入。

专栏目录请。

一般路由分两种形式一种是哈希路由，最明显的特征就是路由中有一个#还有一种就是history路由，路由中不带#

vue响应式原理之reactive与shallowReactive

vue3 Proxy代理

访问第一种方法路由可能匹配到多个路由记录，比如，会匹配到和，这两个路由组件这个时候我们需要遍历的数组，来寻找路由记录中的字段第二种方法,他记录着所有的信息TS可以通过扩展 接口来输入 字段......

我们在setup函数中我们用来访问，使用来访问其中 是一个响应式的对象，所以我们可以对他的任何属性进行监听，但是应该尽量避免监听整个对象，应该直接监听希望改变的参数导航守卫在组合式api中只有离开守卫和更新守卫......

参数即将要进入的目标当前导航正要离开的路由表示路由是否要放行，他是一个函数，里面可以跟一个对象，对象中是重定向的路由，每次导航需要注意的是，next只能调用一次返回值 表示取消导航，不跳转一个路由地址，效果和相同或者，直接导航到所在的路由错误抓取当路由跳转出现任何错误的时候，都会调用事件 点击调用时机:导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。后置钩子后置钩子不会接受函数，也不会改变到行本身一般用于它们对于分析、更改页面标题、声明页

他后面可以跟 字符串、对象或者函数字符串这里的可以完全不用写，因为重定向到了不会渲染对应的对象这里我们使用了命名路由函数相对重定向别名当我们访问的时候，他其实是访问的多个别名需要我们提供一个数组...

跳转or命名视图如果路由没有设置名字，则默认为 官网添加上了属性路由配置注意加上了s子路由的页面嵌套的定义

例子目录index.jsAboutChildA.vueAboutChildB.vueAbout.vue效果

这里我们需要明白一些正则表达式 点击语法在参数后面直接加一个括号，括号中写正则表达式，表示当前参数值匹配什么类型可重复的参数传参的时候我们要提供一个数组sensitive 与 strict默认情况下，路由不区分大小写，并且能匹配尾部是否有斜线的路由...

replace他最终调用的是此外，还有属性，点击所有的导航方法都会返回一个params参数需要注意的是如果提供了属性又提供了属性，那么属性会自动失效params参数一般只提供和的数据类型，其他类型如、会被自动字符串化router.replace他不会向history中添加新纪录router.go接收一个整数为参数，前进或者后退多少步...

传参定义路由跳转的时候传参展示的页面我们这里使用了两种传参的方式定义传参使用所有的参数都保存在下定义我们会发现query传参的时候，我们对于参数没有什么特殊的定义传参使用所有的参数都保存在下.........

或者项目中的使用我们在src下新建的目录，并在下面新建的文件，专门用于管理路由并在src下新建来专门存放路由组件,这里我们新建了两个路路由文件和目录如下展示位置使用标签进行路由的展示使用进行路由的跳转路由注册路由文件路由挂载效果当我们点击不同的路由导航的时候，在路由的显示位置，就会展示不同的页面......

对于大型项目，官方推荐的项目结构如下实例具体的例子可以看官方给的一个github上的例子，点击

访问mutation 和 action注意在我们使用组合式api的时候，也可以使用ES6的接口语法

vuex的module

但是遇到异步请求怎么办？

注册事件触发带参数的注册参数为基本类型注册触发参数为对象注册触发第一种方式第二种方式mapMutations在组件中的使用

效果当我们点击增加人数的时候，我们会发现所有的属性都跟着动了

在模板中直接使用这些变量