学习-VUE-vue常见面试题（持续更新ing~）

学习-VUE-vue常见面试题

 Q:如何找到根组件
 A:this.$root

---

 Q:如何封装组件
 A:slot插槽 和 组件见通信...

---

Q：VUE的路由模式和区别
A：
路由模式两种： history、 hash
区别：
1、关于找不到当前页面发送请求的问题：
history会给后端发送一次请求，而hash不会
2、关于项目打包自测问题：
hash是可以看到内容的，history默认看不到内容
3、表象不同
hash:#
history:/

---

Q:vuex有哪些属性，怎么使用？
A:
vuex是基于vue.js的一个库/插件。（
import Vue from vue;
import Vuex from 'vuex';
Vue.user(vuex)）
一、state属性：
export default new Vuex.Store({
state: { ===》 定义全局共享属性 可以在任何组件中使用/修改
str: 'vuex中的全局属性'
}
})

其他组件使用： 
1、{{tis.$store.state.str}} ==> 'vue的全局属性'
2、使用辅助函数：
{{str}}  ==> ‘vue的全局属性’
<script> 
import {mapState} from 'vuex'
computed: {
...mapState(['str'])
}
</script>
以上两种都是可以获取到state的值区别在于： 通过this.$store.state.str 方式可以直接修改vuex中的值
使用辅助函数mapState方式无法直接修改vuex中的值

二、getters属性： ===> 针对state数据进行二次计算
export default new Vuex.store ({
getter: {
changeStr (state) {
return state.str + 'x';
}
})

其他组件使用：
1、{{$store.getters.changeStr}} 直接调用
2、引入辅助函数：
import {{mapGetter}} from vuex;
computed: {
...mapGetter(['changeStr'])
}

getters是不可以修改的 如果父组件采用v-model形式绑定数据 修改属性值是会报错的

三、mutations属性： ===> 存放同步方法

四、actions属性： ===>存放异步方法的 并且是来提交mutations

五、models属性： ===> 把vuex再次进行模块划分

---

Q: 路由传参 param 和 Query的区别：
A:
params：参数是路由的一部分，通常用于 RESTful 风格的 URL
例如：/user/123 （123 是用户ID参数）
query：参数以键值对形式出现在 URL 的问号后面
例如：/user?id=123 （id=123 是查询参数）

2. 路由配置
params：需要在路由配置中预先定义参数名
javascript
// Vue Router 示例
{ path: '/user/:id', component: User }
query：不需要预先定义，可以自由添加任意参数

3. 参数获取方式
params：
javascript
// Vue 中
this.$route.params.id
// React Router 中
useParams().id
query：
javascript
// Vue 中
this.$route.query.id
// React Router 中
new URLSearchParams(useLocation().search).get('id')

4. 使用场景
params：
参数是资源标识（如ID）
参数对资源定位是必需的
希望URL更简洁、符合RESTful风格
query：
可选参数（如分页、筛选条件）
参数较多时
参数不是资源标识的一部分

5. SEO 影响
params：通常对SEO更友好，因为URL看起来更简洁和语义化
query：搜索引擎可能忽略某些查询参数或认为它们是次要的

6. 浏览器历史记录
params：改变params会被视为新路由，通常会产生新的历史记录
query：改变query参数可能不会产生新的历史记录（取决于实现方式）
选择使用哪种方式取决于你的具体需求和URL设计理念。通常，核心资源标识使用params，而可选过滤条件使用query。