Vue基础问题

海绵宝龙

677人浏览 · 2026-03-02 14:58:03

海绵宝龙 · 2026-03-02 14:58:03 发布

1.Vue计算属性的函数名和data中的属性可以同名吗？为什么？

不可以，因为Vue会将data中的属性和计算属性都挂载到Vue实例上，如果它们同名，则会发生命名冲突，导致实例中的属性被覆盖，从而引发不可预知的错误。
计算属性的优先级：
data的优先级高于技术属性。如果在data和计算属性中存在相同的属性，那么在模板中使用这些属性时会优先使用data中的数据，因为data是直接存储数据的，而计算属性是基于data或其他属性的变化进行计算的。
其他Vue中的相关特性：

methods：与计算属性类似，methods中的方法也会被挂载到Vue实例上，同样需要避免与data和计算属性同名。
Watchers：虽然数据监听器与data和计算属性相关，但他们不会直接参与命名冲突，因为watchers本身不顾载属性名到Vue实例上。

2.Vue的v-show和v-if有什莫区别？使用场景分别是什么？

v-show和v-if是Vue.js中两种常用的指令，都可以用于控制元素的显示和隐藏，但他们有本质上的区别：

v-show是通过控制元素的CSSdisplay属性来显示或隐藏。无论条件是否为真，元素都会被渲染到DOM中，只是通过设置CSS样式来控制它的可见性
v-if则是通过条件判断来决定是否渲染元素，如果条件为假，元素根本不会被渲染到DOM中。

使用场景：

v-show适合用于需要频繁切换显示/隐藏状态的场景，因为他只是在现有的DOM元素上进行CSS切换，性能开销较小。
v-if适合用于在条件变化不太频繁的情况下使用没因为他每次重新渲染时都会进行完整的DOM操作，性能开销较大。
了解了v-show和v-if的基本区别和使用场景，接下在我我们可以进一步探讨他们的一些写结合实际应用中的注意事项。

性能：

v-show带来的性能开销主要体现在第一次渲染时，因为即便元素隐藏了，他还是会占据DOM的空间和资源，但是，后续的切换开销极小。
v-if每次状态切换都伴随着元素的创建和销毁，当条件频繁变化时，这样的操作会带来一定的性能开销。因此，在频繁切换时，不推荐使用v-if

初始渲染：

v-show在初次渲染时无论条件是否满足都会将元素生成到DOM中，然后根据条件通过修改display属性来决定显示/隐藏。
v-if在初渲染时会根据条件决定是否创建元素，条件为假时，元素不会生成到DOM中

使用场景：

针对某些场景，可以考虑v-show和v-if的结合使用，例如，外层使用v-if进行一次性判断是否渲染内容，因为v-if可以确保根本不生成不需要DOM元素；内层使用v-show进行频繁的显示隐藏切换。

过渡效果:

在使用过渡效果时，v-show和v-if的行为也有所不同，v-show会触发CSS过渡效果，而v-if需要配合Vue的transition组件使用。
当你需要确保某个DOM元素在结构上存在，但在某些情况下需要隐藏它，建议使用v-show
当你确定在某些条件下完全不需要某个DOM元素，使用v-if会更适合。

3.在Vue组件中写name选项有什莫作用？

在Vue组件中定义name选项的主要作用是为组件指定一个名字，这个名字在调试，递归组件，全局注册和基础组件复用时会非常有用

帮助在Vue DevTools中识别组件，增强调试体验，
在递归组件调用中，确保Vue能够正确引用自身
用于全局组件注册，使得组件能够被全局识别和使用
提高在keep-live中使用时的可读性和可调式性

4.为什么不建议在Vue中同时使用v-if和v-for？

在Vue中同时使用v-if和v-for可能会导致更改的性能开销和更加负载的代码维护，原因有以下几点：

v-if优先级高于v-for（vue3版本）：当v-if和v-for同时存在于同一元素上时，Vue会优先执行v-if检查条件，如果条件不满足，就不会执行v-for循环，这会导致在每个迭代中都进行条件判断，从而增加了性能开销。
调试和理解困难：同时使用v-if和v-for会是代码更加难以理解和调试，尤其是在复杂的条件和循环中，代码的可维护性和可读性会显著降低。
可能出现不必要的渲染：如果在v-for循环中使用v-if可能会导致出现多次不必要的渲染和销毁，进一步影响性能。

5.在Vue渲染模板时，如何保留模板中的HTML注释？

在Vue渲染模板时，默认情况下，HTML注释不会被保留，但你可以通过Vue组件中使用特殊的指令v-html来实现保留注释的需求，v-html是Vue提供的一个特殊指令，可以用于直接插入HTML内容，包含了HTML注释。
具体操作步骤如下

创建一个Vue组件
使用v-html指令，绑定一个包含HTML注释的字符串

<template>
	<div v-html="htmlContent"></div>
</template>
<script>
	export default {
		data(){ 
			return {
				htmContent:'<!-- This an HTML conmoent -->'
				};
			}
		};

注意事项：

使用v-html的时候要注意安全问题，因为他的直接插入HTML片段，可能会导致XSS攻击，因此，确保你插入的HTML内容是安全的。

替代方法:

如果你不希望使用v-html还可以在开发阶段依靠一些其他工具比如预处理器如EJS来预处理模板，然后将处理后的模板交由Vue渲染，不过这中国房市会显得比较复杂而笨重，且不如直接使用v-html简单有效

Vue模板编译器:

与要了解的是，Vue在渲染模板时会对模板进行编译，而这个编译过程会去掉任何不必要的内容，包括HTML注释，所以，如果非要通过模板内嵌来保持注释，只能通过如v-html一类的手段绕过编译阶段的处理

实际应用场景:

在实际项目中，保留HTML注释的需求相对较少，更多情况下，我们用注释更多是为了方便开发者理解和维护代码，这些注释不需要在生产环境中出现

6.为什么Vue中的data属性是一个函数而不是一个对象？

在Vue.js中，data属性是一个函数而不是一个对象的主要原因是为了确保每个组件实例都有一个独立的状态（即独立的数据作用域）
这样的做可以避免由于共享数据对象带来的意外副作用和错误。
具体来说，当我们在单页应用中使用多个Vue组件时，如果data是一个对象而不是函数，那么这些组件将共享同一个数据对象，这意味着对一个组件状态的修改会影响到其他所有引用这个对象的组件，导致难以预测的错误。
而将data定义为函数，我们可以在每次创建新组件实例时返回一个全新的对象，从而保证每个组件实例的数据是独立。

数据共享与隔离：

当我们创建Vue组件时，每个组件实例的数据应该是独立的，如果使用对象作为data属性，那么这个对象会在所有实例中共享，而将data定义为一个返回对象的函数，可以确保每次调用该函数时都生成一个新对象，这样每个组件实例的数据都是独立的，互不干扰。

组件复用：

Vue.js提倡组件的复用和单一职责，通过使用函数返回新的对象的方式，可以确保每次使用组件时都有一个独立的数据作用域，这在大型应用中尤为重要，因为他让我们可以放心地服用组件而不用担心数据污染或冲突。

单例组件的特殊情况

我们有时会用到单例组件，比如根实例new Vue({})这种情况下我们可以直接将data定义为对象，因为它只会实例化一次，不存在多个实例共享数据的问题，不过这个在实际开发中较少用到的，更多的情况下还是使用函数返回对象。

性能考虑

虽然为每个组件实例生成一个新的数据对象稍微增加了内存开销，但这是组件化开发不可避免的一部分消耗，相对于数据共享带来的错误机器调试成本，这样的设计权衡是值得的，此外，现代浏览器和JavaScript引擎在内存管理和对象创建上已经做得很好，所以这部分性能开销是可以接受的

7.Vue的template标签有什么用？

template主要是作为一个占位符去使用，在Vue2和Vue3中template的表现有一些区别：
vue2：作为一个占位符去使用或者在组件中传递一个插槽内容，无论什么情况，template在compiler后会被去除。
Vue3：用法同Vue2 但是在不使用v-if，v-else-if 或v-else，v-slot，v-for 的时候，Vue不会进行处理，会直接渲染成一个HTML原生的template标签。

8.Vue中MVVM，MVC和MVP模式区别是什么？

MVVM（Model-View-ViewModel）,MVC(Model-View-Controller)和MVP（Model-View-Presenter）是三种不同的软件架构模式，虽然他们的目标都是实现一种分离关注点的结构，但他们之间存在显著的差异。
MVC模式

Model：数据层，负责与数据库或远程服务区交互，存取和操作数据
View：视图层，负责用户界面的呈现，它不包含任何与无逻辑，仅显示从Model获取的数据
Controller：控制器层，协调Model和View处理用户输入并更新Model和View

MVP模式：

Model：与MVC中相同，负责数据的管理
View：与MVC中相同，负责显示内容
Presenter：充当中介者，从Model获取数据并更新View，而且能够处理复杂的逻辑，减轻View的负担

MVVM模式

Model：与MVC和MVP中相同，负责数据的管理
VIew：与MVC和MVP中相同，负责显示内容。
ViewModel：负责将Model和View连接起来，通过数据绑定View自动更新以响应一切Model 的变化，从而显著简化了代码量。
在Vue工程中，采用的是MVVM模式：
Model：数据状态（在Vue中通过data属性定义）
View：模板（在Vue中通过HTML，模板语法和{{}}插值）
ViewModel：Vue实例，它连接了Model和View，通过双向数据绑定（Vue 的核心功能之一）使得View会自动更新以响应Model的变化

总结

MVC更适用于传统的服务器渲染应用
MVP适用于Web应用和桌面应用，但逻辑较为复杂，
MVVM非常适合前端框架如Vue，React，Angular能够更好地处理UI绑定和状态管理

9.Vue Router如何配置404页面？

在Vue项目中，如果你想配置一个404页面（即找不到页面提示），你需要通过Vue Router来设置，这通常通过将路由配置中的*（通配符）指向一个404组件来实现。
在这里插入图片描述
这个配置中path：’ * '的这一行定义了一个通配符路由，这个路由会匹配所有未定义的路径，并将其路由到NotFound组件，确保这条规则是路由配置中的最后一条规则。

Vue Router模式：在上面的示例中，我们使用了mode:'history’来设置路由的模式，这避免了URL中出现了#符号，如果不设置，默认是hash模式，需要注意的是，如果使用history模式你需要在服务器端做一些配置，让所有的路径都指向你的index.html文件。
懒加载路由组件：为了性能优化，可以使用Vue的异步组件来懒加载路由组件
通配符路由位置：一定注意通配符路由path:'*'一定要放在所有路由规则的最后一条，如果放在前面或中间会导致后面的路由规则永远无法被匹配到
导航守卫：Vue Router还提供了导航守卫，可以在路由跳转前进行一些操作，比如鉴权或者日志记录，这是在大项目中经常会使用到的

10.Vue过滤器，他有什么应用场景？

过滤器在Vue中是一个非常简洁而方便的工具，主要用于文本格式化，他们通常用于模版表达式中，将数据进行转换，格式化，使其在视图中表现得更具可读性和用户友好，具体应用场景有

日期格式化：将后端返回的时间戳转换为用户可读的日期格式
文本格式化：将文字转换为大写，小写或截取一定长度等
数值格式化：对货币，百分比等数值进行格式化显示
vue 3中过滤器这一特性已经被移除，官方推荐使用methods或计算属性computed来替代。
方法methods：通过方法可以定义更复杂的操作，而且方法有助于更好滴管理逻辑和复用
计算属性：类似于过滤器，但通常他们与数据有更紧密的绑定，可以响应式滴更新数据
vue2中

Vue.filter('capitalize',function(value){
	if(!value) return '';
	value = value.toString();
	return value.charAt(0).toUpperCase() + value.slice(1);
	}
);
//使用
<p>{{ message | capitalze }} </p>

export default {
	methods:{
		capitalize(value){
			if(!value) return '';
			value = value.toString();
			return value.charAt(0).toUpperCase() + value.slice(1);
			}
		}
	}
//使用
<p>{{ capitalze(message ) }} </p>

11.Vue Router 中如何获取路由传递过来的参数？

在Vue Router中，我们有两种常见的方式可以传递参数：动态路由匹配和查询参数，对于获取这些参数的方法如下：

动态路由匹配：在Vue Router中我们可以通过类似/user/:id这样的路径来定义一个动态路由参数，这时，我们可以通过this.$route.params来获取传递的参数
查询参数：在URL中使用查询字符串的形式传递参数，例如/user?id=123此时，可以通过this.$route.query来获取查询参数
观察参数变化

watch:{
	'$route'(to,from){
		//处理路由变化
		console.log(to.params.id);
	}
}

12.Vue的v-cloak和v-pre指令有什么作用？

v-cloak和v-pre是Vue提供的两个专用指令，用于处理应用程序在加载和解析过程中的一些特殊需求。

v-cloak：主要用于防止闪烁，在Vue应用程序完全编译之前，将绑定的DOM元素上添加一个二display:none样式，避免为解析的模板直接显示在用户面前，通常和CSS一同使用
v-pre:主要用于跳过该节点及其子结点的编译过程，直接输出原始的Mustache标签插值符号{{}}，对提高性能有一定帮助
v-cloak使用场景
当Vue应用程序需要请求外部资源或进行复杂的数据初始化时，页面内容的加载可能存在延迟，导致用户看到未经解析的模板闪现，v-cloak可以帮助你隐藏这些为解析的模板，保证用户体验的顺畅，

<style>
	[v-cloak]{ display: none; }
</style>
<div v-cloak>
{{ message }}
</div>

实际应用过程中，可以将v-cloak属性绑定在需要隐藏的元素上，并通过CSS控制显示隐藏，当Vue的编译过程解析完这个元素后，v-cloak自动移除，显示内容/
v-pre的原理及使用场景
这个指令在需要提升性能或避免干扰的场景下尤为有用，由于v-pre指令会告诉Vue忽略这个节点及其所有自己点的编译过程，从而减少不必要的计算量，他会渲染出未经编译的模板内容

<div v-pre>
	{{ rawMustache }} 这里的内容将会直接输出{{ rawMustache }}
</div>

使用建议

v-cloak通常用在应用启动阶段，确保用户不看到闪烁的内容，适用于任何Vue应用程序
v-pre则适合用于较复杂的模板结构中，可以显著提升性能，防止不必要的干扰，适合大型项目或者需要优化性能的地方。

13.在Vue组件中如何访问跟实例？

在Vue组件中，我们可以通过this. $roo t 来访问根实例， t hi s .$ root属性指向当前Vue实例树的根实例，可以帮助我们在子组件中获取全局状态或者调用根实例的方法
this.$root

this是指向当前组件实例的引用，通过this.$root可以访问到整个应用的根实例
一个常见的场景是需要访问跟实例上的一些方法和数据，比如全局状态管理等
访问根实例上的数据或方法

//假设在根实例中有一个方法hello和一个数据message
new Vue({
	el:'#app',
	data:{
		message:'Hello from the root!'
	},
	methods:{
		hello(){
			console.log('Hello from  root instance!');
		}
	}
	
});

在子组件中我们可以这样访问

export default {
mounted(){
	console.log(this.$root.message);//输出'Hello from the root!'
	this.$root.hello(); //'Hello from  root instance!'
}

在大型应用中，滥用this.$root可能会导致组件强耦合，降低代码的可维护性，理想情况下，尽量通过Vuex或其他状态管理工具来处理全局状态。
如果你需要访问父组件，可以使用this.$pareent
如果需要访问根组件树中的所有子组件，可以使用this.$childen
Vuex：如果应用规模较大，可以使用Vue的官方状态管理库Vuex来集中管理应用的状态，这有助于保持组件的解耦和代码的整洁
Provide/Inject：这种方式可以在Vue2.2.0及以后版本中使用，主要用于在祖先和后代组件之间的共享数据，而不需要逐层传递Props

14.什么是Vue中的slot？他有什么作用？

在Vue.js中，slot是一种用于在组件模板中分发内容的机制，我们可以使用他来将父组件的内容传递给子组件，从而实现灵活的内容分发和组件复用，
具体来说，slot可以帮助我们在子组件中定义占位符，这些占位符将被父组件传递的内容所替换，这使得我们在开发过程中可以创建更具有通用性和复用性的组件。
默认插槽
如果我们在子组件中有一个插槽，那摸它会被默认视为默认插槽

//parent component
<child-component>
	<p>This is th content from parent.</p>
</child-component>

//Child component template
<div>
	<slot></slot>
</div>

父组件传递的p标签将会替换子组件模板中slot标签
具名插槽
有时候我们需要在一个组件中使用多个插槽，这时我们可以为每个插槽命名：

//parent component
<child-component>
	<template v-slot:header>
		<h1>This is the header content.</h1>
	</template>
	<template v-slot:footer>
		<p>This is the footer content</p>
	</template>
</child-component>

//Child component template
<div>
	<header>
		<slot name = "header"></slot>
	</header>
	<main>
		<slot></slot>//默认插槽
	</main>
	<footer>
		<slot name = "footer"></slot>
	</footer>
</div>

作用域插槽
作用域插槽Scoped Slots
允许父组件使用子组件提供数据，这通常用于较复杂的场景，例如表格组件需要传递特定的行数数据给父组件进行自定义渲染：

//parent component
<child-component v-slot：default = "slotProps">
	<p>{{ slotProps.message }}</p>
</child-component>

//Child component template
<div>
	<slot :message= "messageFromChild"></slot>
</div>

上面的例子中，子组件将自身的数据messageFromChild传递给父组件，父组件可以像属性一样使用slotProps.message获取这个数据进行数据进行渲染

15.在Vue中使用this时应该注意哪些问题？

在Vue中使用this主要涉及以下几点需要注意的地方

this的上下文绑定问题，特别是在是用箭头函数和普通函数时，this的指向会有不同
在生命周期钩子函数中this的指向是Vue实例
在模板内的this是隐式的我们可以直接引用数据和方法而无需手动绑定this
在组件间通信中，this的指向需要特别注意，是父组件还是子组件
扩展
this的上下文绑定问题：在Vue中，如果我们是用箭头函数（=>），他会捕获其定义处的上下文this，这意味着他和他定义时的外部上下文this一致，这种性质在处理事件处理程序或数组方法如map，reduce时尤其有用

methods:{
	handleClick(){
		//这里的'this'指向Vue实例
}，
handleArray(){
	const arr = [1,2,3];
	arr,map(item = >{
		//这里的this仍然指向Vue实例而不是map方法内部
		console.log(this.someMethod());
		});
	}
}

生命周期钩子中的this
Vue实例在创建时，会运行多个钩子函数，对于每一个钩子函数，this都指向当前Vue实例，你可以放心地访问data，props或调用methods

creadted(){
	//这里的this指向Vue实例
	console.log(this.someData)l
}

模板内的this
在Vue的模板语法中，你不需要显示地使用this。可以直接在模板中引用数据字段和方法

<template>
	<div>{{someData}}</div>
	<button @click = "someMethod">Click Me</button>
</template>

组件间通信中的this指向
这点尤为重要，在父子组件通信中，我们需要注意this的指向例如，通过$emit事件传递的回调函数中，this依旧会指向Vue实例

// Parent Component
<template>
	<ChildComponent @someEvent="handleEvent"></ChildComponent>
</template>
<script>
methods:{
	handleEvent(){
		//这里的this是父组件的Vue实例
	}
}
</script>
// Child Component
<template>
	<button @click="$emit('someEvent')">Emit Event</button>
</template>

16.Vue Router有什么作用？他有哪些组件？

Vue Router 是Vue.js官方的路由管理器，它用于构建单页面应用SPA，可以让我们在不同的URL下渲染不同的组件，而无需刷新页面，简单来说，Vue Router的作用就是管理Vue应用程序的路由

router-view：这是一个占位符组件，用于显示与当前路由对应的组件
router-link：用于创建导航链接，可以触发URL的变化，进而改变试图
router:可以用来嵌套子路由，通过这种方式可以实现复杂的页面结构
扩展
router-view：这是我们最常见的Vue Router组件，他类似于一个占位符，当URL发生变化时，Vue Router会找到对应的组件并将其渲染到router-view中我们通常会在一个或多个根组件中使用他
router-link：这个组件可以理解增强版的a标签，通过点击它可以触发路由的跳转，和传统的a标签不同router-link不会刷新页面，而是通过Vue Router内部的机制更新视图，它的属性to用于指定跳转的目标路径
router 嵌套路由：有时候我们需要在一个页面内嵌套显示多个路由组件，比如在一个用户页面里再嵌套更多详细信息页面，这个时候，子路由就派上用场了，通过配置子路由，可以实现页面中的不同部分加载不同组件，形成发杂的嵌套结构
动态路由匹配：允许我们在路由中使用动态参数比如/user/:/id这样我们就可以根据不同的参数渲染不同的视图
导航守卫：Vue Router提供了一系列的钩子函数，可以在导航之前或之后执行一些逻辑，比如权限校验，数据预加载等
懒加载：结合Vue的组件懒加载功能，可以按需加载路由组件，提升应用的性能
命名视图：允许我们在同一个页面中同时显示多个视图，通过给router-view命名，可以实现页面的复杂布局

17.如何定义Vue的动态路由？如何获取传过来的动态参数？

在Vue项目中，动态路由主要通过Vue Router来实现动态路由允许我们在URL的路径中放置一些占位符，这些占位符可以表示将被实际值替换的参数，定义动态路由和获取动态参数的具体步骤如下

定义动态路由：在Vue Router的配置中使用占位符：param来定义动态路由，例如，我们可以定义一个动态路由来捕获用户ID

const routes = [
	{
		path:'/user/:id'
		component:UserComponent
	},
];
const router = new VueRouter({
	routes
	})

获取动态参数：在Vue组件中，我们可以使用this.$route.params，来访问传递过来的动态参数，例如，在上面的例子中，我们在可以在UserComponent组件中获取用户ID：

export default {
	name:'UserComponent',
	created(){
		console.log(this.$route.params.id);//获取用户ID
	}
}

扩展
动态参数的变化:当路由参数改变时，可以使用watch监听$route的变化从而执行相应的逻辑

export default {
	name :'UserComponent',
	watch:{
		'$route'(to,from){
			//当路由发生变化时，处理逻辑
			console.log(to.params.id);
			}
		}
	}

路由传参的另一种方式:除了动态路由参数，还可以使用query参数传递数据，这种方式在URL中以?key=value的形式出现

const routes = [
	{
		path:'/user'
		component:UserComponent
	},
];
const router = new VueRouter({
	routes
	})
export default {
	name:'UserComponent',
	created(){
		console.log(this.$route.params.id);//获取用户ID
	}
}

重定向和别名:有时候我们希望一个URL自动指向另一个URL这可以通过Vue Router的重定向功能实现

const routes = [
	{
		path:'/myprofile'
		redirect:'/user/123' //重定向到具体的用户ID
	},
	{
		path:'/user'
		component:UserComponent
	},
];

嵌套路由:在实际项目中，我们可能会有很多层级路由，可以通过嵌套路由来实现：

const routes = [
	
	{
		path:'/user'
		component:UserComponent
		children:[
		{
			path:'profile',
			component:UserProfile
		},
		{
			path:'posts',
			component:UserPosts
		},
		]
	},
];
const router = new VueRouter({
	routes
	})

18.Vue中data的属性可以与methods中的方法同名吗？

在Vue中，data中的属性和methods中的方法不能同名，原因是Vue的实例初始化时会将data中的属性和methods中的方法都代理到Vue实例上，如果同名会导致冲突，无法区分调用的是方法还是属性。
扩展
在Vue.js中data对象和methods对象是在Vue实例进行初始化过程中代理到Vue实例的原型上的，这意味着你可以通过this.propertyName来访问data中的属性，或者this.methodName来调研methods中的方法
数据代理
Vue使用了一种叫做数据代理的机制来实现data属性和methods方法的访问，通过这项机制，Vue劫持了所有对属性的getter和setter操作，以下是一个简单的Vue初始化实例示例

var vm = new Vue({
	data:{
		message:'Hello'
	},
	methods:{
		showMessage:function(){
			console.log(this.message);
			}
		}
	})
	//你可以这样调用
	vm.message; //Hello
	vm.showMessage(); //控制台输出'Hello'

属性和方法同名冲突
当data和methods同名时，Vue无法区分调用的是getter方法（访问data属性）还是需要调用methods中的方法

var vm = new Vue({
	data:{
		example:'example data'
	},
	methods:{
		example:function(){
			console.log('example data');
			}
		}
	})
	//这种情况下，Vue实例上的example会优先考虑methods的方法
console.log(vm.example);//打印整个方法定义而不是 'example data'

19.什么是Vue的自定义指令？自定义指令的应用场景有哪些？

Vue的自定义指令是指在Vue框架中，开发者可以根据需求创建自己的自定义指令，与内置指令（如v-model,v-show）相对应，自定义指令通常用于直接操作DOM元素，适合在需要对DOM进行底层操作的时候使用
应用场景主要包括：

需要对某些DOM元素进行特定操作，例如聚焦，剪贴板操作等
复用某些常见的DOM操作逻辑，以提高代码可读性和可维护性
在第三方库或插件与Vue集成时，通过自定义指令来封装库的操作
在不方便使用组件或其他逻辑时的快捷解决方案
扩展
自定义指令可以通过Vue指令钩子函数实现，主要的钩子函数有以下几种：
bind：指令绑定到元素时调用，只会执行一次
inserted：绑定元素插入父节点时调用
update：所在组件的VNode更新时调用，不一定发生在子VNode更新之前
comoenentUpdated：指令所在组件的VNode及其子VNode全部更新后调用
unbind:指令与元素解绑时调用，只会执行一次
自定义指令的具体定义方法如下

Vue.directive('focus',{
//当绑定元素插入到DOM中
	inserted:function(el){
		//聚焦元素
		el.focus()
	}
})
//html
<input v-focus>

除了基础用法，Vue3支持的组合式API也非常强大，在Vue3中，我们可以通过app.directive来定义自定义指令

const app = Vue.createApp({})
app.directive('focus',{
	mounted(el){
		el.focus()
	}
	})

关于自定义指令的最佳实践一般建议

尽量避免与已有的内置指令名称冲突
确保指令的职责单一，清晰
在使用第三方库时，合理封装，减少库与Vue框架的耦合

20.Vue的模版语法使用的是那个Web模版引擎，介绍下该模版引擎

Vue的模版语法使用的是基于HTML的模版引擎，严格来说，Vue并没有使用一个外部的，预先存在的模版引擎，而是他自身内置了一个模版编译器来处理模版语法
Vue的模版语法借鉴了一些传统的模版引擎，但同时也引入了一些独特的特性，这让开发者可以更高效地构建用户界面，

双花括号语法：在Vue模版中，我们使用{{}}双花括号来绑定数据，这被称为Mustache语法，与很多末班引擎类似，这种语法用来输出普通文本
指令系统：Vue提供了非常强大的指令系统，比如V-bind，v-model，v-if，v-for等，通过这些指令可以便捷地将HTML表达式与数据绑定
事件处理：使用v-on指令或@符号可以非常方便地绑定事件处理器，如v-on:click
计算属性和监听属性：Vue中支持通过计算属性和侦听属性来处理复杂逻辑，从而保持模版简洁，
组件系统，Vue的模版语法非常适用于其强大的组件系统，通过模版和组件的结合，可以轻松实现复永和抽象

21.什么是Vue 的单向数据流和双向数据流？

在Vue.js中，单项数据流和双向数据流是指组件间数据通信的不同方式，
单项数据流指的是父组件通过属性props向子组件传递数据，数据的流向是单向的：从父组件流向子组件，子组件不能直接修改从父组件传递来的数据，如果子组件需要修改这些数据，通常通过事件通知父组件，然后由父组件重新传递更新后的数据，
双向数据流更多的是指使用v-model实现数据的双向绑定，即数据在组件之间可以双向流动：数据变化会导致试图更新，视图的用户输入也会导致数据变化，Vue.js内置了v-model指令来帮助实现这种双向绑定，常用于表单输入元素中。
为了更深入理解单向数据流和双向数据流，我们可以扩展一些相关的知识点
单项数据流的好处

更易于理解和调试，由于数据流向是单一的，从而减少了数据状态管理的复杂性
数据更：子组件不能直接修改父组件传递的数据，确保了数据的规范性和稳定性
实现双向绑定的原理
Vue使用Object.defineProperty或者在Vue3中使用Proxy来实现数据的响应式更新
当数据发生变化时，Vue会触发DOM更新，从而保持数据和视图的一致性
为何抛弃双向数据流
在较为复杂的应用中，过多依赖双向数据流会导致状态变得难以管理
现在框架如React提倡使用单向数据流，结合状态管理工具如Vuex或Redux确保应用的数据流更为清晰和可预测
Vuex状态管理
当Vue项目逐渐庞大，单向数据流的运用依然会让管理变得复杂，这时候可以引入Vuex作为全局状态管理工具
Vuex提供了一套专门的机制来管理状态和派发事件，确保状态一致性和可维护性

22.Vue中created和mounted生命周期钩子有什么区别？

在Vue中。created和mounted都是生命周期钩子函数，但他们有显著的区别：

creared钩子在Vue实例创建完成后调用，这个阶段，实例已经完成了数据的观测模型，但是尚未挂载到DOM，也就是说模板还不可访问
mounted钩子在Vue实例挂载到DOM之后调用，在这个阶段，模板已经编译并渲染到DOM，可以进行DOM操作
简单来说，created用于初始化数据和调用API而mounted用于操作已经渲染好的DOM
扩展
为了更好地理解这两个生命周期钩子，咱们可以从以下几个方面进行进一步的探讨：
常见的使用场景
created：一般用于初始化数据，比如从服务器获取初始化数据或者设置一些本地数据，因为这个时候模板还没有渲染，所以不适合进行DOM操作
mounted：经常用于获取和操作DOM元素，例如，如果你需要操作某个DOM节点上的插件，这时候是最合适的时机
生命周期图示
beforeCreate->created->beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed
实践中的例子
created

new Vue({
  data() {
    return { message: '' };
  },
  created() {
    // 在这里可以进行异步请求，但不能进行 DOM 操作
    this.message = 'Hello world!';
    console.log('Component is created.');
  }
});

mounted

new Vue({
  mounted() {
    // 在这里可以操作 DOM，因为模板已经渲染完毕
    this.$nextTick(() => {
      console.log('Component is mounted.');
      document.querySelector('#myElement').focus();
    });
  }
});