vue的生命周期
Vue.js 是一种流行的 JavaScript 框架，提供了一套丰富的生命周期钩子函数来控制组件的创建、更新和销毁过程。下面是 Vue 组件的生命周期钩子函数：
- beforeCreate： 在实例初始化之后，数据观测 (data observation) 和事件配置 (event/watcher setup) 之前被调用。在这个阶段，实例的属性和方法都还未初始化。
- created： 在实例创建完成后被立即调用。在这个阶段，实例已经完成数据观测、属性和方法的配置，但还未开始 DOM 的挂载。可以在这个钩子函数中执行一些异步操作。
- beforeMount： 在挂载开始之前被调用。在这个阶段，模板已经编译完成，但还未将编译结果替换到 DOM 中。
- mounted： 在挂载完成后被调用。在这个阶段，实例的根 DOM 元素已经被创建，并且编译结果已经成功地替换了挂载的元素。可以执行一些依赖于 DOM 的操作。
- beforeUpdate： 在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在此钩子中进行状态的更新或计算。
- updated： 在数据更新完成后被调用，发生在虚拟 DOM 重新渲染和打补丁之后。在这个阶段，组件已经更新，可以执行一些操作来更新 DOM。
- beforeUnmount： 在实例销毁之前调用。在这个阶段，实例仍然完全可用，可以执行一些清理操作。
- unmounted： 在实例被销毁后调用。在这个阶段，实例的所有指令和事件监听器都已被移除，DOM 也被完全解绑和销毁。
除了上述生命周期钩子函数，Vue 还提供了错误处理钩子函数：
- errorCaptured： 在子组件的任意生命周期钩子函数中发生错误时被调用。可以用于捕获并处理组件内部的错误。
需要注意的是，Vue 3 的生命周期钩子函数名称有所改变，beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed 不再被推荐使用。取而代之的是，使用 setup 函数和一些新的生命周期钩子函数，例如 beforeUnmount 和 unmounted。
这些生命周期钩子函数使得我们能够在组件各个阶段执行自定义的逻辑，实现对组件的精细控制和操作。
v-if和v-show的区别
v-if 和 v-show 是 Vue.js 中常用的条件渲染指令，它们的作用都是根据条件来控制元素的显示和隐藏，但它们有一些区别：
- 编译时机：
v-if：在渲染时，只有当条件为真时才会渲染对应的元素及其子组件，当条件为假时，不会进行渲染。每次条件状态改变时，该元素及其子组件都会被销毁或重新创建。v-show：在渲染时，无论条件是真还是假，都会对元素进行渲染。通过 CSS 控制元素的显示和隐藏。在条件状态改变时，元素不会被销毁，只是通过修改 CSS 的display属性来显示或隐藏元素。
- 切换开销：
v-if：由于v-if在条件为假时会销毁元素及其子组件，再次满足条件时会重新创建，因此切换时的开销较高。v-show：由于v-show只是控制元素的显示和隐藏，不涉及销毁和重新创建，因此切换时的开销较小。
- 初始渲染开销：
v-if：在初始渲染时，如果条件为假，那么该元素及其子组件不会进行渲染。v-show：在初始渲染时，无论条件是真还是假，都会渲染该元素。
- 适用场景：
v-if：适用于在条件很少改变或需要在条件改变时执行一些额外操作的情况。由于v-if可以控制是否渲染整个组件树，因此适用于需要进行大量切换的情况。v-show：适用于需要频繁切换显示和隐藏的情况，因为v-show的切换开销较小。
总体来说，如果需要频繁切换显示和隐藏，并且初始渲染时大部分元素都是需要显示的，那么 v-show 更合适。如果条件改变较少或需要在条件改变时执行一些额外操作，或者需要在条件为假时节约渲染开销，那么 v-if 更合适。
vue操作dom的方式
在 Vue.js 中，你可以通过以下几种方式来操作 DOM：
- 使用指令： 使用内置的指令，如
v-bind、v-on、v-model等，可以直接在模板中操作 DOM。例如，v-bind可以用来动态地绑定 HTML 属性，v-on可以用来添加事件监听器，v-model可以用来实现双向数据绑定。 - 使用计算属性： 计算属性是 Vue 中一种特殊的属性，可以根据需要的逻辑动态计算并返回一个结果。你可以在计算属性中通过 JavaScript 操作 DOM 元素，然后在模板中使用计算属性的值。这样可以将 DOM 操作的逻辑从模板中抽离出来。
- 使用方法： 在 Vue 实例中定义方法，然后在模板中通过事件绑定调用这些方法。方法可以直接操作 DOM 元素，可以在方法中使用
$refs访问组件或 DOM 元素的引用。 - 使用生命周期钩子函数： 在 Vue 组件的生命周期钩子函数中，你可以访问和操作组件的 DOM 元素。例如，在
mounted钩子函数中，组件的根 DOM 元素已经挂载完成，你可以在这个阶段进行一些需要访问 DOM 的操作。 - 使用自定义指令（Custom Directives）： 自定义指令可以让你在 Vue 中定义自己的指令，并在指令的钩子函数中操作 DOM。通过自定义指令，你可以封装特定的 DOM 操作，使其可重用并能在多个地方使用。
需要注意的是，在 Vue 中，推荐以数据驱动的方式来操作 DOM，即通过修改数据，然后利用 Vue 的响应式机制来更新 DOM。直接操作 DOM 是一种低级别的技术，通常在 Vue 中是不推荐的，因为这样可能导致状态不一致或丢失 Vue 的响应性能力。在大部分情况下，应该通过修改数据来驱动视图的更新。
js数组常见的方法
JavaScript 中的数组有许多常见的方法，可以对数组进行各种操作。以下是一些常见的数组方法：
- push()： 在数组末尾添加一个或多个元素，并返回修改后的数组的新长度。
- pop()： 删除并返回数组的最后一个元素。
- shift()： 删除并返回数组的第一个元素。
- unshift()： 在数组开头添加一个或多个元素，并返回修改后的数组的新长度。
- concat()： 将多个数组或值合并为一个新数组，并返回新数组。
- slice()： 返回选定数组的一部分，不会改变原数组。
- splice()： 从数组中添加/删除元素，可以在指定位置添加或删除元素，并返回被删除的元素组成的新数组。
- join()： 将数组中的所有元素转化为一个字符串，并使用指定的分隔符连接。
- indexOf()： 返回数组中第一个与指定值相等的元素的索引位置，如果找不到，则返回 -1。
- lastIndexOf()： 返回数组中最后一个与指定值相等的元素的索引位置，如果找不到，则返回 -1。
- forEach()： 对数组中的每个元素执行提供的函数。
- map()： 创建一个新数组，其中包含对原数组中的每个元素应用提供的函数的结果。
- filter()： 使用提供的函数对数组中的每个元素进行测试，然后返回一个新数组，其中包含测试为真的元素。
- reduce()： 使用提供的函数对数组中的所有元素进行累积计算，并将结果返回。
- sort()： 对数组进行原地排序，默认按照字符串的 Unicode 码点进行排序。
- reverse()： 颠倒数组中元素的顺序，第一个元素变为最后一个，最后一个变为第一个。
这只是一些常用的数组方法，JavaScript 还提供了很多其他强大的方法来操作数组。你可以参考 JavaScript 的文档或教程来了解更多数组方法及其用法。
