前端面试准备-6
1.script标签中的differ和async的区别
都是异步加载外部的JS脚本文件，不会阻塞HTML的解析
区别：
①：执行顺序。differ保证脚本按照在HTML中出现的执行顺序，一般是在HTML解析完后执行。而async则是谁先下载完谁先执行，async可能会阻断解析以执行脚本。
2.label标签的使用
用于提升表单的可用性和可访问性，把文本标签和相应的表单控件关联起来，用户点击标签时，自动跳转聚焦到相应的表单控件上。
①：包裹控件
<label>用户名:<input type="text" name="username">
</label>②：通过for属性关联
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
3.在vue组件如何访问根实例
①：使用provide/inject机制
可以在跟组件提供数据，然后在任意子组件使用
// 在根组件或 main.js 中提供数据
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
app.provide('appName', 'Vue3应用')
app.mount('#app')// 或在根组件中
setup() {provide('appName', 'Vue3应用')
}
// 选项式 API
export default {inject: ['appName'],mounted() {console.log(this.appName) // Vue3应用}
}// 组合式 API
setup() {const appName = inject('appName')console.log(appName) // Vue3应用
}
②：使用全局属性
// main.js
const app = createApp(App)
app.config.globalProperties.$appName = 'Vue3应用'
app.mount('#app')
在组件中访问
// 选项式 API
export default {mounted() {console.log(this.$appName) // Vue3应用}
}// 组合式 API
import { getCurrentInstance } from 'vue'setup() {const internalInstance = getCurrentInstance()console.log(internalInstance.appContext.config.globalProperties.$appName)
}
③：直接导入应用实例
// main.js
const app = createApp(App)
app.mount('#app')
export { app }// 组件中
import { app } from '@/main'
setup() {console.log(app.config.globalProperties.$appName)
}
***在vue2中，我们可以通过this.$root直接访问根实例。
***在vue3中，推荐使用provide/inject机制替换直接访问根实例
4.如何定义vue的动态路由，并获取传递过来的参数
①：定义动态路由
在Vue Router中，动态路由通常是指路径中包含可变部分的路由，这些可变部分通常用于传递参数。定义动态路由的方法是在路径中使用冒号标记参数。
const routes = [// 动态路径参数以冒号开头{ path: '/users/:id', component: UserComponent },//?标记可选参数{ path: '/users/:id?', component: UserComponent },// 可以定义多个参数{ path: '/users/:username/posts/:postId', component: UserPostComponent }
]
②：获取动态路由参数
- 选项式API中，通过this.$root.params访问
export default {mounted() {// 获取路由参数console.log(this.$route.params.id)}
}
- 组合式API中。使用useRoute函数获得路由对象，然后访问其params属性
import { useRoute } from 'vue-router'export default {setup() {const route = useRoute()// 获取路由参数console.log(route.params.id)}
}
- 在模板（template）中，直接使用$route.params访问
<template><div>User ID: {{ $route.params.id }}</div>
</template>
5.vue中的data属性能和methods中的方法名重名吗
不可以。因为他们最终都会被挂载到同一个组件实例上,共享同一个命名空间，如果重名，将会导致冲突。methods方法会覆盖掉data的同名属性。
- vue实例属性的优先级顺序：props>methods>data>computed。如果出现重命名的现象，则优先级高的会覆盖掉优先级低的。
- Vue前缀保留。Vue内部有一个带有特俗前缀的保留属性。如以$或_开头的属性，不会被代理到vue实例上，使用vm.$data._property访问这些属性
6.vue的自定义指令
允许我们对DOM底层进行操作。自定义指令通过v-前缀标识，用于元素插入到DOM后执行特殊操作。
①：在组合式API的<script setup>内定义
<script setup>
// 以 v 开头的驼峰命名变量会被识别为自定义指令
const vHighlight = {mounted: (el) => {el.classList.add('highlighted')}
}
</script><template><p v-highlight>这是高亮显示的文本</p>
</template>
②：在选项式API内，通过directives选项局部注册
export default {directives: {highlight: {mounted: (el) => el.classList.add('highlighted')}}
}
③：全局注册自定义组件,directive
const app = createApp({})app.directive('highlight', {mounted: (el) => el.classList.add('highlighted')
})
7.介绍vue的单向数据流和双向数据流
这是两个不同概念的东西。
①：单向数据流是一种设计理念，它指父组件向子组件传递数据时，数据只能从父组件流向子组件，子组件无法修改数据。通过props实现，所有props都遵循单向绑定机制。
②：双向数据流是指保持数据和视图的一致。当数据发生变化时，视图自动更新。在vue中主要通过v-model实现，相当于v-bind和@inpute的语法糖。
8.created和mounted生命周期钩子函数的区别
执行时机
created是组件实例创建完成后立即调用。此时组件还未挂载到DOM上。
mounted是组件实例挂载到DOM后调用。此时可以访问组件的DOM节点，进行DOM操作
9.如何是CSS样式只在当前组件内生效
①：使用scoped样式
使用scoped后，父组件的样式不会渗透到子组件内，不过一个子组件的根节点会同时收到它的父组件的 scoped css和子组件的scoped css的影响。
<style scoped>
.example {color: red;
}
</style>
②：在script标签内加入module特征
<style module>
.example {color: red;
}
</style>
然后在模板内通过$style引用
<template><div :class="$style.example">示例</div>
</template>