本文详细介绍了Vue中父子组件的通信机制（props和事件），以及链表（包括单向链表、双向链表和循环链表）与数组的区别，二叉树（如二叉搜索树和平衡二叉树）的概念及其应用场景，以及Vue动态路由的创建和动态添加。还概述了Vue2组件的生命周期阶段。
35、vue中父子组件是怎么通信的
-
父传子（使用props）：父组件可以通过props向子组件传递数据。在子组件中，可以通过props选项来声明接收父组件传递的数据。这样子组件就可以直接使用父组件传递的数据了。
vue2：
-
父组件中使用：
<template> <ChildComponent :message="parentMessage"></ChildComponent> </template> <script> export default { data() { return { parentMessage: 'Hello from parent component' }; } }; </script> -
子组件中使用：
<template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] }; </script>
vue3：
-
父组件中使用：
<template> <ChildComponent :message="parentMessage"></ChildComponent> </template> <script> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, setup() { const parentMessage = ref('Hello from parent component'); return { parentMessage }; } }; </script> -
子组件中使用：
<template> <div>{{ message }}</div> </template> <script> import { defineProps } from 'vue'; export default { setup(props) { return { message: props.message }; } }; </script>
-
-
子传父（使用事件）：子组件可以通过
$emit方法触发一个自定义事件，父组件可以使用v-on或@来监听这个事件并接收数据。vue2：
-
父组件中使用：
<template> <ChildComponent @customEvent="handleCustomEvent"></ChildComponent> </template> <script> export default { methods: { handleCustomEvent(data) { console.log('Received data from child component:', data); } } }; </script> -
子组件中使用：
<template> <button @click="emitCustomEvent">Click me</button> </template> <script> export default { methods: { emitCustomEvent() { this.$emit('customEvent', 'Data from child component'); } } }; </script>
vue3：
-
父组件中使用：
<template> <ChildComponent @customEvent="handleCustomEvent"></ChildComponent> </template> <script> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, setup() { const handleCustomEvent = (data) => { console.log('Received data from child component:', data); }; return { handleCustomEvent }; } }; </script> -
子组件中使用：
<template> <button @click="emitCustomEvent">Click me</button> </template> <script> import { defineEmits } from 'vue'; export default { emits: ['customEvent'], setup(_, { emit }) { const emitCustomEvent = () => { emit('customEvent', 'Data from child component'); }; return { emitCustomEvent }; } }; </script>
-
36、什么是链表
链表（Linked List）是一种常见的数据结构，用于存储一系列元素。它由一组节点（Node）组成，每个节点包含两个部分：数据（也称为元素）和指向下一个节点的引用（也称为指针或链接）。 链表的特点是节点之间通过指针相互连接，形成一个链式结构。与数组不同，链表中的节点可以在内存中的任意位置，而不必连续存储。因此，链表可以动态地分配和释放内存，具有灵活性。 链表有多种类型，常见的有单向链表、双向链表和循环链表。其中，单向链表中的每个节点只有指向下一个节点的引用；双向链表中的每个节点同时拥有指向下一个节点和上一个节点的引用；循环链表是一种特殊的链表形式，它的尾节点指向头节点，形成一个循环。 链表的操作包括插入、删除、查找等。由于链表的特性，插入和删除节点的时间复杂度可以是O(1)，而查找节点的时间复杂度则是O(n)。 链表在实际应用中有广泛的用途，例如实现栈、队列，处理大量数据时的分页和缓存，以及各种算法和数据结构的实现。
37、链表和数组的区别
- 存储方式：数组是一块连续的内存空间，元素在内存中的存储位置是连续的，可以通过索引直接访问元素。而链表中的元素（节点）存储在不同的内存块中，每个节点通过指针链接到下一个节点，不能直接通过索引访问元素。
- 插入和删除操作：由于数组的元素在内存中是连续存储的，插入和删除元素时需要移动其他元素的位置，时间复杂度为O(n)。而链表的插入和删除操作相对较为简单，只需要修改节点的指针，时间复杂度为O(1)。
- 访问操作：由于数组的元素在内存中连续存储，可以通过索引直接访问元素，时间复杂度为O(1)。而链表需要从头节点开始遍历，直到找到目标节点，时间复杂度为O(n)。
- 动态性：数组的大小是固定的，需要在创建时指定长度，而且在插入和删除元素时需要进行内存的重新分配。而链表的大小是动态的，可以根据需要动态增加或减少节点。
- 空间复杂度：数组的空间复杂度为O(n)，因为它需要一块连续的内存空间来存储元素。而链表的空间复杂度取决于节点的数量，通常比数组的空间复杂度要高，因为每个节点需要额外的指针来存储链接信息。
综上所述，数组适用于需要频繁访问元素的场景，而链表适用于频繁插入和删除元素的场景。在选择使用数组还是链表时，需要根据具体的需求和操作的复杂度来进行权衡。
38、什么是二叉树
二叉树（Binary Tree）是一种常见的树形数据结构。它由一组节点（Node）组成，每个节点最多有两个子节点，分别称为左子节点和右子节点。二叉树的特点是每个节点最多有两个子节点，且子节点的位置是明确的，左子节点在父节点的左侧，右子节点在父节点的右侧。 二叉树可以为空（即没有节点），或者是由一个根节点和若干子树构成。每个子树也是一个二叉树，可以递归地定义。在二叉树中，每个节点可以存储一个值，这个值可以是任意类型的数据，具体根据应用场景来决定。 二叉树有多种类型，常见的有满二叉树、完全二叉树和平衡二叉树。满二叉树是一种特殊的二叉树，每个节点都有两个子节点，除了叶子节点外没有其他空缺。完全二叉树是指除了最后一层外，其他层的节点都是满的，并且最后一层的节点都靠左排列。平衡二叉树是指左右子树的高度差不超过1的二叉树。 二叉树的操作包括遍历、插入、删除等。常见的遍历方式有前序遍历、中序遍历和后序遍历。前序遍历先访问根节点，然后递归地访问左子树和右子树；中序遍历先递归地访问左子树，然后访问根节点，最后访问右子树；后序遍历先递归地访问左子树和右子树，最后访问根节点。 二叉树在实际应用中有广泛的用途，例如在数据结构和算法中用于实现二叉搜索树、堆和哈夫曼树等。它们提供了高效的数据存储和查找能力，使得许多常见问题的解决变得更加高效和简单。
39、二叉树的使用场景
- 搜索和排序：二叉搜索树是一种基于二叉树的数据结构，它具有快速的查找、插入和删除操作。它常被用于实现搜索和排序算法，如二叉查找算法和快速排序。
- 表达式求值：二叉树可以用于表示和求解数学表达式。每个节点表示一个操作符或操作数，左右子树分别表示操作符的操作数。通过遍历二叉树可以进行表达式的求值和转换。
- 文件系统：文件系统中的目录结构可以用二叉树来表示。每个目录节点表示一个目录，左右子节点表示子目录或文件。通过遍历二叉树可以进行文件的搜索和操作。
- 数据压缩：哈夫曼树是一种基于二叉树的数据压缩算法。它根据字符出现的频率构建一棵最优的二叉树，使得频率较高的字符在树的高层，从而实现对数据的高效压缩和解压缩。
- 网络路由：在计算机网络中，路由表常用二叉树来表示。每个节点表示一个网络地址和相应的路由信息，左子节点表示更小的网络地址，右子节点表示更大的网络地址。通过遍历二叉树可以进行网络路由的选择和转发。
- 二叉堆：二叉堆是一种基于二叉树的数据结构，常用于实现优先队列。它具有快速的插入和删除最大或最小元素的操作，常被用于任务调度、事件处理等场景。
- 解析树：解析树是用于解析语法结构的树形结构，常用于编译器、解释器和语法分析器等领域。通过遍历解析树可以进行语法分析和语义分析。
总之，二叉树是一种灵活且高效的数据结构，可以应用于各种领域，如算法、数据处理、网络通信等。它可以提供高效的数据存储和查找能力，使得问题的解决更加简单和高效。
40、在Vue中创建动态路由的一般步骤：
-
在路由配置文件（通常是router/index.js）中引入Vue和Vue Router：
import Vue from 'vue'; import VueRouter from 'vue-router'; -
使用Vue.use()方法来安装Vue Router插件：
Vue.use(VueRouter); -
创建一个路由实例，并定义路由规则：
const router = new VueRouter({ routes: [ { path: '/user/:id', // 动态参数:id name: 'User', component: UserComponent // 对应的组件 } ] });上述代码中，使用"/user/:id"来定义了一个动态参数:id的路由规则，通过冒号":"来表示参数。
-
在Vue实例中使用该路由实例：
new Vue({ router, render: h => h(App) }).$mount('#app');将路由实例添加到Vue实例的配置中。
-
在组件中使用动态路由：
<router-link :to="'/user/' + userId">User</router-link>在组件中使用组件来创建动态路由链接。通过使用冒号":"来绑定动态参数。
-
获取动态路由参数：
在组件中可以通过$route对象获取动态路由的参数。例如，在User组件中：
export default { created() { const id = this.$route.params.id; // 获取动态路由参数id // 其他逻辑处理 } }可以通过this.$route.params.id来获取动态路由参数id。
通过以上步骤，就可以在Vue中创建和使用动态路由了。动态路由可以根据不同的参数来加载不同的组件，实现更灵活和动态的路由控制。
41、在Vue中动态添加路由的一般步骤：
-
在路由配置文件（通常是router/index.js）中引入Vue和Vue Router：
import Vue from 'vue'; import VueRouter from 'vue-router'; -
使用Vue.use()方法来安装Vue Router插件：
Vue.use(VueRouter); -
创建一个空的路由实例：
const router = new VueRouter({ routes: [] }); -
定义需要动态添加的路由配置对象，通常是一个包含路径、组件等信息的对象：
const dynamicRoute = { path: "/dynamic", name: "Dynamic", component: DynamicComponent }; -
在需要的时候，通过调用
router.addRoutes()方法来动态添加路由：router.addRoutes([dynamicRoute]); -
在Vue实例中使用该路由实例：
new Vue({ router, render: h => h(App) }).$mount('#app'); -
在组件中通过
<router-link>或者this.$router.push()方法来访问动态添加的路由。
以上步骤中，通过调用router.addRoutes()方法来动态添加路由，可以传入一个包含路由配置对象的数组，实现一次性添加多个路由。
通过以上步骤，就可以在Vue中动态添加路由了。这样可以根据需要在运行时添加新的路由，实现更灵活和动态的路由控制。
42、Vue2中组件的生命周期
- beforeCreate：组件实例刚被创建，此时组件的数据和方法还未初始化，无法访问data、computed、methods等属性。
- created：组件实例已经创建完成，此时可以访问到data、computed、methods等属性，但是还未挂载到DOM上。
- beforeMount：在挂载之前被调用，此时组件已经编译完成，但尚未生成真实的DOM节点。
- mounted：组件已经挂载到DOM上，此时可以进行DOM操作，可以访问到真实的DOM节点。
- beforeUpdate：在数据更新之前被调用，此时可以对数据进行操作。
- updated：数据更新完成并且DOM重新渲染之后被调用，此时可以进行DOM操作。
- beforeDestroy：在组件销毁之前被调用，此时组件仍然可用，可以进行一些清理操作。
- destroyed：组件销毁之后调用，此时组件已经被销毁，所有的事件监听和定时器都应该被清除。
在每个生命周期阶段，Vue提供了一些钩子函数（如：beforeCreate、created、beforeMount等），可以在这些钩子函数中执行一些逻辑操作，如数据初始化、异步请求、DOM操作等。
需要注意的是，Vue 3中引入了一些新的生命周期钩子函数，例如：setup、onBeforeUnmount、onUnmounted等。这些新的钩子函数用于支持Vue 3中的Composition API，与Vue 2.x版本的生命周期钩子函数有所不同。 通过理解和使用组件的生命周期，可以更好地控制组件的行为和实现一些复杂的逻辑操作。
扫一扫
22万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
