【Vue/基础知识】Vue基础知识（一）

如果觉得我的分享有一定帮助，欢迎关注我的微信公众号 “码农的科研笔记”，了解更多我的算法和代码学习总结记录。或者点击链接扫码关注 【Vue/基础知识】Vue基础知识（一）

1、v-show 和 v-if 指令的共同点和不同点？

共同点：v-show 和 v-if 都是 Vue 模板指令，都用于控制组件或元素的显示或隐藏。

不同点：v-show 只是简单的控制元素的 display 属性，而不是将元素从 DOM 中移除，因此在切换显示和隐藏时，元素的状态并不会改变。v-if 则是根据表达式的真假值来切换元素的显示状态，如果表达式为 false，则元素会被移除，如果表达式为 true，则会重新渲染该元素。因此，v-if 更适用于需要频繁切换显示和隐藏的情况，而 v-show 则更适用于一开始就需要显示或隐藏的情况。

---

2、如何让CSS只在当前组件中起作用?

可以使用 CSS 的作用域限定来实现。在组件的 <style> 标签中使用 scoped 属性即可让该样式只在当前组件中起作用。例如：

<template><div class="my-component"></div>
</template><script>
export default {name: 'MyComponent',
}
</script><style scoped>
.my-component {/* 这里的样式只会作用于 MyComponent 组件内的元素 */
}
</style>

---

3、keep-alive 的作用是什么?

<keep-alive></keep-alive> 是 Vue 内置组件，用于缓存组件的实例，从而避免多次创建和销毁组件的开销。当包裹动态组件时，<keep-alive> 会在组件切换时保留该组件的状态，而不是重新渲染该组件。常见的用法是将需要缓存的组件包裹在 <keep-alive> 标签中，如下所示：

<template><div><keep-alive><component :is="currentComponent"></component></keep-alive></div>
</template><script>
export default {data() {return {currentComponent: 'ComponentA',}},
}
</script>

---

4、如何获取dom?

可以使用 Vue 的 $refs 属性来获取组件中的 DOM 元素。在模板中给需要获取的元素添加 ref 属性，然后在组件中通过 this.$refs 对象来获取该元素的引用。例如：

<template><div><input ref="myInput" type="text" /></div>
</template><script>
export default {methods: {doSomething() {const inputElement = this.$refs.myInput// 这里可以对 inputElement 进行操作}},
}
</script>

---

5、说出几种vue当中的指令和它的用法

常用的 Vue 指令包括：

• v-if：根据表达式的真假值来切换元素的显示状态；
• v-for：根据数组或对象的内容来渲染列表或表格；
• v-bind：用于动态绑定 HTML 属性或组件的 prop；
• v-on：用于监听 DOM 事件或自定义事件；
• v-model：用于双向绑定表单元素的值；
• v-show：用于控制元素的显示或隐藏；
• v-cloak：用于防止页面闪动，与 CSS 配合使用。

---

6、vue-loader是什么？使用它的用途有哪些？

vue-loader 是一个 Webpack 的 loader，用于解析 .vue 文件。它可以将一个 .vue 文件解析成一个 Vue 组件对象，并将其编译成 JavaScript。使用 vue-loader 可以使得我们在单文件组件中编写组件的 HTML 模板、CSS 样式和 JavaScript 代码，从而让组件更加独立和可维护。vue-loader 还可以实现 CSS 模块化和 Scoped CSS 等功能。

---

7、为什么使用key？

在使用 v-for 指令渲染列表或表格时，为了提高渲染性能，Vue 会尽可能地复用已经存在的元素，而不是重新创建和销毁元素。但是，如果数组中的某个元素的位置发生变化，Vue 会把该元素从原来的位置移动到新的位置，而不是销毁和创建新的元素。这样可以避免频繁的 DOM 操作，提高渲染性能。

然而，在某些情况下，需要对数组中的某个元素进行增删操作，从而导致某个元素的 key 发生变化。如果没有设置 key，Vue 无法判断哪些元素是已经存在的，哪些是需要新创建的，从而可能导致渲染错误。因此，设置 key 可以帮助 Vue 更好地跟踪数组中元素的变化，从而正确地进行渲染。

---

8、v-modal的使用

v-model 是 Vue 中常用的一个指令，用于实现表单元素和数据之间的双向绑定。v-model 可以简化表单元素的值的获取和设置，同时也能够自动监听表单元素的变化并更新数据。v-model 可以用于 input、select、textarea 等表单元素，例如：

<template><div><input v-model="message" type="text" /><p>Message: {{ message }}</p></div>
</template><script>
export default {data() {return {message: '',}},
}
</script>

---

9、分别简述computed和watch的使用场景

computed 和 watch 都是 Vue 中用于监听数据变化的方法，但是它们的使用场景有所不同。

computed 用于计算属性，当需要对某个数据进行复杂的计算或格式化时，可以使用 computed 方法来获取计算结果。computed 方法可以缓存计算结果，只有当依赖的数据发生变化时，才会重新计算。computed 方法类似于一个属性，可以在模板中直接使用。

例如，可以定义一个计算属性 fullName，用于计算用户的全名：

<template><div><p>First name: {{ firstName }}</p><p>Last name: {{ lastName }}</p><p>Full name: {{ fullName }}</p></div>
</template><script>
export default {data() {return {firstName: 'John',lastName: 'Doe',}},computed: {fullName() {return this.firstName + ' ' + this.lastName},},
}
</script>

watch 用于监听数据的变化，当某个数据发生变化时，可以执行一些逻辑或异步操作。watch 方法类似于一个监听器，可以监听一个或多个数据的变化。

例如，可以定义一个 watch 方法，用于监听用户的搜索关键字，当关键字发生变化时，可以发送请求获取搜索结果：

<template><div><input v-model="search" type="text" /><ul><li v-for="item in searchResult" :key="item.id">{{ item.title }}</li></ul></div>
</template><script>
export default {data() {return {search: '',searchResult: [],}},watch: {search(newVal, oldVal) {// 发送请求获取搜索结果fetch('https://example.com/api/search?query=' + newVal).then(response => response.json()).then(data => {this.searchResult = data.results})},},
}
</script>

---

10、v-on可以监听多个方法吗？

可以监听多个方法。在 v-on 指令中，可以使用逗号分隔多个方法。例如：

<button v-on:click="handleClick, handleAnotherClick">Click me</button>

---

11、v-if和v-for的优先级

在同一个元素上，v-for 指令的优先级高于 v-if 指令。这意味着，如果一个元素同时有 v-if 和 v-for 指令，那么 v-for 指令会先被执行，然后在循环中根据 v-if 的条件进行筛选。

---

12、vue常用的修饰符

Vue 中常用的修饰符有以下几种：

• .prevent：阻止默认事件；
• .stop：阻止事件冒泡；
• .capture：使用事件捕获模式；
• .self：只当事件在该元素本身（而不是子元素）触发时触发回调；
• .once：只触发一次回调；
• .passive：告诉浏览器该事件监听器不会调用
• .preventDefault()，可以优化页面滚动性能。

---

13、vue中 :is 作用

在 Vue 中，:is 是一个动态组件的特殊属性，用于在运行时动态地绑定组件类型。

通常，我们在模板中使用组件时会这样写

<template><div><my-component></my-component></div>
</template>

使用:is后我们可以这样写：

<template><div><component :is="componentType"></component></div>
</template>

这里的componentType是一个在组件实例中定义的计算属性或者 data，它的值可以是任何组件的名称。

通过这种方式，可以在不同的组件之间切换，从而实现动态的组件渲染。

注意，当使用:is时，需要在组件名前添加前缀，例如：

<component :is="'my-' + componentName"></component>

这样做是因为在某些情况下，Vue 会将组件名解释为原生 HTML 元素，例如<table>、<tr>等，所以需要添加前缀以明确告诉 Vue 这是一个组件名。