面试总结 vue（2024）

v-model相关

关于Vue中的v-model指令，它是Vue中用于实现表单元素和组件的数据双向绑定的重要指令。通过v-model，我们可以方便地将表单元素的值与Vue实例的数据进行绑定，从而实现数据的自动更新和同步。

具体来说，v-model在表单元素上使用时，它会根据不同类型的表单元素生成不同的语法糖。例如，在input标签中，如果type属性为text或textarea，那么v-model会绑定到元素的value属性上，并监听input事件；如果type为checkbox或radio，那么v-model会绑定到一个数组或布尔值上，并监听change事件。

除了基础的表单元素，v-model也可以用于自定义组件。在自定义组件中，我们需要使用v-model来创建一个名为value的prop和一个名为input的事件，以实现组件的双向数据绑定。这样，当组件的值发生变化时，可以通过触发input事件来更新父组件的数据；反之，当父组件的数据发生变化时，也会自动更新到组件中。

使用v-model的好处在于它简化了表单数据的处理流程，使我们能够更专注于业务逻辑的实现，而不是手动处理数据的绑定和更新。同时，它也提高了代码的可读性和可维护性，使得前端开发的效率得到了提升。

在实际项目中，我经常使用v-model来绑定表单元素的值，并通过计算属性或方法来对表单数据进行处理。同时，我也会在自定义组件中使用v-model来实现数据的双向绑定，以满足更复杂的业务需求。

总之，v-model是Vue中非常实用且重要的一个指令，它能够帮助我们更高效地处理表单数据和组件间的数据交互。

vue的响应式原理

Vue.js的响应式原理主要基于以下几个方面：

1. 数据初始化：在Vue组件的data选项中定义的数据会被初始化为响应式数据。Vue会遍历data对象的属性，并使用Object.defineProperty或Proxy将其转换为getter和setter。
2. 依赖收集：当组件渲染时，模板中使用的响应式数据会触发getter函数。在getter函数中，Vue会将当前的Watcher（观察者）对象记录为该响应式数据的依赖。
3. 触发更新：当响应式数据发生变化时，setter函数会被调用。在setter函数中，Vue会通知相关的Watcher对象进行更新操作。
4. 重新渲染：当触发更新时，Vue会执行Watcher对象的更新函数，进而触发组件的重新渲染。Vue使用虚拟DOM（Virtual DOM）来高效地比对变化，并更新真实的DOM。

具体来说，Vue.js的响应式系统实现数据的双向绑定的方式是通过使用Object.defineProperty()方法或Proxy对象来劫持数据对象的属性。当数据对象的属性被读取或修改时，Vue.js能够捕获这些操作并触发相应的更新。同时，Vue还提供了一些辅助函数和指令来简化数据绑定的操作，如v-model指令可以实现表单元素和Vue实例数据之间的双向绑定。

在Vue 3.4及以后的版本中，响应式系统进行了实质性的重构，以提高计算属性的重新计算效率。这意味着在计算结果保持不变的情况下，每次变更不再触发回调，只有在计算结果实际更改时才会触发回调。此外，Vue 3.4还对虚拟DOM的实现进行了重写，并对模板编译进行了优化，这大幅提升了组件初始化的速度，并在更新速度和内存占用方面也有显著的性能提升。

总的来说，Vue.js的响应式原理使得我们能够轻松地在应用程序中实现动态数据的更新和同步。

Vue 的事件响应原理

Vue 事件处理是通过绑定特定的事件监听器来实现的，当事件触发时，Vue 会确保响应的函数被正确调用。

在 Vue 中绑定事件监听器有两种方式：

1. 直接在模板中使用 v-on:event 或 @event 指令。
2. 在 JavaScript 代码中使用 $on 方法监听事件。

Vue 事件处理的核心原理是它利用了原生 DOM 的事件监听机制，并在此之上提供了一层抽象，使得开发者可以更方便地绑定和处理事件。这样的抽象使得开发者不需要直接操作原生的 DOM 事件，可以更专注于业务逻辑的开发。

Vue router的模式以及其区别

hash模式和history模式

Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。

1.hash 就是指 url 后面的 # 号以及后面的字符，history没有带#，外观上比hash 模式好看些

2.原理的区别

1. 1.hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则
2. 2.history原理：利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

 history模式URL就要和后端进行一致，所以要改为history也需要后端的配合，否则会报错。

3. hash 能兼容到IE8， history 只能兼容到 IE10；

4.由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。

所以hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404！。history的好处是可以进行修改历史记录，并且不会立刻像后端发起请求。不过如果对于项目没有硬性标准要求，我们可以直接使用hash模式开发。

Vue nextTick(()=>{})原理

在 Vue 中，当我们修改数据时，Vue 会将这个修改添加到一个队列中，然后在下一个事件循环中执行这个队列中的所有修改。这个队列就是 Vue 的更新队列。

当我们调用 nextTick 时，Vue 会将回调函数添加到一个微任务队列中，在更新队列执行完成后，会执行微任务队列中的所有回调函数。这样就可以保证回调函数在更新队列执行完成后执行，获取更新后的 DOM 状态。

在实际应用中，nextTick 有很多应用场景，例如：

1. 在更新 DOM 后获取 DOM 状态

在更新 DOM 后，我们可以使用 nextTick 获取更新后的 DOM 状态，例如获取更新后的元素尺寸、位置等。

2. 在更新 DOM 后执行依赖于 DOM 的操作

在更新 DOM 后，我们可以使用 nextTick 执行依赖于 DOM 的操作，例如滚动到某个位置、聚焦到某个元素等。

3. 在更新 DOM 后执行第三方库

在更新 DOM 后，我们可以使用 nextTick 执行依赖于 DOM 的第三方库，例如 ECharts、Three.js 等。

替代方案：做异步处理定时器或者promise

vue常用指令

Vue.js 提供了一套丰富的内置指令，用于在模板中动态地绑定数据、操作DOM等。以下是 Vue 中常用的一些指令：

v-bind：

用于动态地绑定一个或多个属性，或一个组件 prop 到表达式。

简写为 :。

示例：<img v-bind:src="imageSrc" alt="Vue Logo"> 或简写为 <img :src="imageSrc" alt="Vue Logo">

v-on：

用于监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

简写为 @。

示例：<button v-on:click="increment">Click me</button> 或简写为 <button @click="increment">Click me</button>

v-if：

根据表达式的真假值来有条件地渲染一个元素。

如果条件为真，则渲染该元素及其内容；如果为假，则不渲染该元素。

示例：<p v-if="seen">Now you see me</p>

v-else：

与 v-if 或 v-else-if 一起使用，表示条件不满足时渲染的内容。

示例：<p v-if="Math.random() > 0.5">Now you see me</p><p v-else>Now you don't</p>

v-else-if：

与 v-if 一起使用，表示另一个条件判断。

示例：<div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else>Not A/B</div>

v-show：

根据表达式之真假值，切换元素的 display CSS 属性。

与 v-if 不同，v-show 只是简单地基于 CSS 进行切换。

示例：<p v-show="showMessage">Hello!</p>

v-for：

基于源数据多次渲染元素或模板块。

示例：<div v-for="(item, index) in items" :key="index">{{ item.text }}</div>

v-model：

创建在 input、textarea 及 select 元素和 Vue 实例的数据之间的双向绑定。

示例：<input v-model="message" placeholder="edit me">

v-text：

更新元素的 textContent。

示例：<span v-text="message"></span>

v-html：

更新元素的 innerHTML。

注意：你应该避免使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。

示例：<div v-html="rawHtml"></div>

v-once：

元素和组件只渲染一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

示例：<span v-once>This will never change: {{ msg }}</span>

v-pre：

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。

示例：<div v-pre>{{ this will not be compiled }}</div>

v-cloak：

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例：<div v-cloak>{{ message }}</div>，配合 CSS 规则 [v-cloak] { display: none }

这些指令为 Vue.js 提供了强大的模板功能，使得开发者可以更加灵活地操作 DOM 和数据。

vue事件修饰符

在Vue.js中，事件修饰符是特殊的前缀，用于修改事件监听器的默认行为。这些修饰符提供了方便的方式来处理DOM事件，而无需编写大量的事件处理逻辑。以下是Vue提供的一些常用的事件修饰符：

.stop：调用 event.stopPropagation()。阻止事件冒泡到父元素。

.prevent：调用 event.preventDefault()。阻止默认行为（如表单的自动提交）。

.capture：使用事件捕获模式添加事件监听器。

.self：当事件是从事件监听器绑定的元素本身触发时才触发回调。

.once：事件将只会触发一次。

.passive：标记事件监听器为 passive。它告诉浏览器你不打算调用 preventDefault。这改善了移动端的滚动性能。

.native：在组件的根元素上监听一个原生事件。

.{keyCode | keyAlias}：只在指定按键上触发事件监听器。

下面是如何在模板中使用这些修饰符的示例：

html复制代码

	<!-- 阻止点击事件冒泡 -->
	<button @click.stop="doThis"></button>
	<!-- 提交事件不再重载页面 -->
	<form @submit.prevent="onSubmit"></form>
	<!-- 修饰符可以串联 -->
	<a @click.stop.prevent="doThat"></a>
	<!-- 只有在event.target是当前元素自身时触发处理函数 -->
	<div @click.self="doSomething"></div>
	<!-- 滚动事件的默认行为（即滚动行为）将会被阻止 -->
	<div @scroll.passive="onScroll"></div>
	<!-- 监听原生事件 -->
	<my-component @click.native="myMethod"></my-component>
	<!-- 只有在按下回车键时才触发 -->
	<input @keyup.enter="submit" />
	<!-- 只有在按下按键码为13的键时才触发（等同于@keyup.enter） -->
	<input @keyup.13="submit" />

注意：.native 修饰符是专门用于组件的，因为它允许你监听组件根元素上的原生事件。对于普通的DOM元素，不需要使用 .native。

在Vue 3中，事件修饰符的行为与Vue 2相同，但.passive修饰符在移动端浏览器上对于改善滚动性能仍然很重要。此外，Vue 3引入了Composition API，但这并不影响事件修饰符在模板中的使用方式。

vue组件传值

在Vue中，组件之间传值有多种方式。以下是几种常见的传值方法：

Props 和 Data Down

父组件通过props向子组件传递数据。

子组件通过props选项来声明它预期从父组件接收的数据。

vue复制代码

	<!-- 父组件 -->
	<template>
	<child-component :message="parentMessage"></child-component>
	</template>
	<script>
	import ChildComponent from './ChildComponent.vue';
	export default {
	components: {
	ChildComponent
	},
	data() {
	return {
	parentMessage: 'Hello from parent'
	};
	}
	};
	</script>
	<!-- 子组件 -->
	<template>
	<div>{{ message }}</div>
	</template>
	<script>
	export default {
	props: ['message']
	};
	</script>

Events Up

子组件通过触发自定义事件向父组件传递数据。

父组件通过监听子组件触发的事件来获取数据。

vue复制代码

	<!-- 子组件 -->
	<template>
	<button @click="notifyParent">Notify Parent</button>
	</template>
	<script>
	export default {
	methods: {
	notifyParent() {
	this.$emit('child-event', 'Hello from child');
	}
	}
	};
	</script>
	<!-- 父组件 -->
	<template>
	<child-component @child-event="handleChildEvent"></child-component>
	</template>
	<script>
	import ChildComponent from './ChildComponent.vue';
	export default {
	components: {
	ChildComponent
	},
	methods: {
	handleChildEvent(message) {
	console.log(message); // 'Hello from child'
	}
	}
	};
	</script>

v-model

v-model 是一种语法糖，用于在父组件和子组件之间创建双向数据绑定。

通常用于表单输入元素，但也可以用于自定义组件。

vue复制代码

	<!-- 自定义组件 -->
	<template>
	<input
	:value="value"
	@input="$emit('update:value', $event.target.value)"
	/>
	</template>
	<script>
	export default {
	props: ['value']
	};
	</script>
	<!-- 父组件 -->
	<template>
	<custom-input v-model="parentMessage"></custom-input>
	</template>
	<script>
	import CustomInput from './CustomInput.vue';
	export default {
	components: {
	CustomInput
	},
	data() {
	return {
	parentMessage: ''
	};
	}
	};
	</script>

Provide / Inject

provide 和 inject 主要用于高阶插件/组件库的开发。

父组件通过 provide 选项来提供数据，子组件（无论层级多深）都可以通过 inject 选项来接收数据。

vue复制代码

	<!-- 祖先组件 -->
	<script>
	export default {
	provide() {
	return {
	theme: 'dark'
	};
	}
	};
	</script>
	<!-- 任意层级子组件 -->
	<script>
	export default {
	inject: ['theme'],
	mounted() {
	console.log(this.theme); // 'dark'
	}
	};
	</script>

Vuex

对于更复杂的状态管理需求，可以使用Vuex。

Vuex是一个专为Vue.js应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

以上就是在Vue中组件之间传值的几种常见方法。你可以根据你的具体需求来选择最适合你的方法。

watch和computed

在Vue.js中，watch和computed是两个用于响应式数据和计算属性的重要功能，但它们各自有不同的用途和行为。

watch

watch是Vue实例的一个选项，用于观察和响应Vue实例上的数据变动。当你想在数据变化时执行异步操作或开销较大的操作时，watch是一个有用的工具。

特性：

深度监听：通过deep选项，可以深度监听一个对象内部属性的变化。

立即执行：通过immediate选项，可以在组件初始化时立即执行一次回调函数。

异步操作：watch支持异步操作，因为它主要是用来监听数据变化并执行相应的操作。

示例：

javascript复制代码

	watch: {
	targetData: {
	handler(newVal, oldVal) {
	// 当targetData变化时执行的代码
	},
	deep: true, // 深度监听
	immediate: true // 立即执行
	}
	}

computed

computed是基于它们的响应式依赖进行缓存的计算属性。只有当相关依赖发生改变时才会重新求值。这对于执行复杂计算或数据转换非常有用。

特性：

缓存：只有当依赖的数据变化时，才会重新计算。

不支持异步：因为computed是基于依赖的，所以它不支持异步操作。

同步计算：computed主要用于同步计算，当依赖的数据变化时，它会自动重新计算。

示例：

javascript复制代码

	computed: {
	totalScore() {
	// 假设scores是一个数组，包含多个分数
	return this.scores.reduce((total, score) => total + score, 0);
	}
	}

区别

用途：watch主要用于观察和响应数据变化，并执行相应的操作；而computed主要用于基于依赖数据进行计算，并返回计算后的值。

缓存：computed有缓存机制，只有当依赖的数据变化时才会重新计算；而watch没有缓存，每次数据变化都会执行回调函数。

异步：watch支持异步操作，而computed不支持。

性能：对于复杂的计算或数据转换，computed通常比watch更高效，因为它有缓存机制。但是，对于需要立即响应数据变化并执行相应操作的场景，watch可能更合适。

keep-alive

在Vue.js中，keep-alive是一个内置的高阶组件，主要用于缓存组件实例，提高应用程序的性能和响应速度。

当你在Vue应用中切换组件时，通常会销毁当前组件的实例并创建新的组件实例。这个过程包括组件的生命周期钩子函数（如created、mounted等）的执行，以及与组件相关的数据的重新计算和渲染。如果应用程序包含大量的组件切换，这个过程可能会导致性能问题，因为每次切换都需要重新计算和渲染组件。

而keep-alive组件可以帮助我们缓存组件实例，以便在下一次需要使用时直接从缓存中读取，而不必重新创建和计算。这可以显著提高应用程序的性能和响应速度。

使用keep-alive的基本方式如下：

html复制代码

	<keep-alive>
	<component :is="activeComponent" />
	</keep-alive>

在这个例子中，<component :is="activeComponent" />是一个动态组件，它的类型由activeComponent数据属性决定。当activeComponent变化时，Vue会尝试去缓存被移除的组件实例，并在需要时重新激活它。

另外，keep-alive还提供了include和exclude两个属性，用于指定哪些组件应该被缓存，哪些组件不应该被缓存。这两个属性都接受一个字符串或正则表达式的数组，用于匹配组件的name属性。

例如：

html复制代码

	<keep-alive include="a,b">
	<!-- 只有组件名匹配 a 或 b 的组件会被缓存 -->
	<component :is="activeComponent" />
	</keep-alive>
	<keep-alive exclude="c,d">
	<!-- 组件名匹配 c 或 d 的组件不会被缓存 -->
	<component :is="activeComponent" />
	</keep-alive>

需要注意的是，虽然keep-alive可以缓存组件实例，但并不会缓存组件的数据状态。也就是说，当组件被重新激活时，它的数据状态仍然是离开时的状态，但并不会保留任何与DOM相关的状态（如滚动位置、表单输入值等）。如果需要保留这些状态，你可能需要在组件内部实现自己的状态管理逻辑。

vue的diff的diff算法

Vue.js 的虚拟 DOM 和 diff 算法是其性能优化的关键部分。Vue 通过使用虚拟 DOM 来减少实际 DOM 的操作次数，从而提高性能。当数据发生变化时，Vue 会创建一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行对比（diff），找出最小的变更集，然后将这些变更应用到实际的 DOM 上。

Vue 的 diff 算法主要有以下几个特点：

同层比较：Vue 的 diff 算法只会在同层级的节点间进行比较，不会跨层级比较。这是因为跨层级的比较算法复杂度过高，Vue 选择通过位置索引和 key 来重用和排序现有元素。

key 的重要性：当 Vue 在比较两个虚拟节点列表时，如果它们的 key 值相同，那么 Vue 会认为它们是同一个节点，只会对比它们的内容是否发生变化，而不会重新创建新的节点。因此，在使用 v-for 指令时，为每个元素提供一个唯一的 key 是非常重要的。

优化策略：Vue 的 diff 算法在对比过程中会采用一些优化策略，如“双端比较”和“最长递增子序列”等，以进一步提高性能。这些策略能够快速地定位到发生变化的节点，并减少不必要的比较和计算。

组件级别的复用：对于 Vue 组件，Vue 的 diff 算法会采用组件级别的复用策略。当组件的 props 或其他选项发生变化时，Vue 会尝试重新渲染该组件，而不是销毁并重新创建它。这能够保持组件的状态和子组件的引用不变，从而提高性能。

需要注意的是，虽然 Vue 的 diff 算法能够显著提高性能，但并不意味着我们可以无限制地滥用它。在实际开发中，我们仍然需要遵循一些最佳实践，如避免不必要的渲染、使用计算属性和侦听器来减少数据变化、合理使用 v-show 和 v-if 等指令等，以进一步提高 Vue 应用的性能。

vue和react的diff算法异同

Vue和React都采用了虚拟DOM（Virtual DOM）和diff算法来优化性能，但两者在实现上存在一些异同。

相同点：

目标：两者的diff算法都是为了找出新旧虚拟DOM之间的差异，以便最小化地更新真实DOM，从而提高性能。

同层比较：两者都只在同层级的节点间进行比较，不会跨层级比较，这有助于降低算法复杂度。

key属性：两者都支持为列表渲染的每一项指定一个唯一的key属性，以便在diff过程中能够更精确地复用和排序现有元素。

不同点：

比较策略：虽然两者都采用了同层比较的策略，但在具体的实现上有所不同。Vue的diff算法在比较过程中会采用一种“双端比较”和“最长递增子序列”的优化策略，以更快速地定位到发生变化的节点。而React的diff算法则采用了“树形比较”的策略，从根节点开始逐层向下比较子节点。

组件级别的复用：在Vue中，当组件的props或其他选项发生变化时，Vue会尝试重新渲染该组件，但会尽量复用现有的DOM元素。而在React中，如果组件的props或state发生变化，React会重新渲染整个组件及其子组件，但会通过React的Reconciliation算法找出最小化的变更集，并只更新有变化的部分。

key属性的作用：在Vue中，key属性的主要作用是帮助Vue更精确地复用和排序现有元素。而在React中，key属性的作用更为关键，它不仅用于复用元素，还用于判断哪些元素是新增的，哪些元素是需要删除的。因此，在React中，为列表渲染的每一项指定一个唯一的key属性是非常重要的。

优化方向：Vue的diff算法在优化上更注重于减少不必要的计算和比较，通过双端比较和最长递增子序列等策略来降低算法复杂度。而React的Reconciliation算法则更注重于减少不必要的DOM操作，通过精确比较和复用元素来最小化DOM变更。

总的来说，Vue和React的diff算法在目标、同层比较和key属性等方面有相似之处，但在具体的实现、组件级别的复用、key属性的作用以及优化方向等方面存在差异。这些差异使得Vue和React在性能优化上各有特点，开发者可以根据项目需求和个人偏好选择适合的框架。