前端面试题（自用，仅供参考）

Amy_cx

已于 2023-02-10 14:23:21 修改

阅读量418

点赞数 1

文章标签： vue.js 前端 javascript 面试

于 2023-01-11 21:13:59 首次发布

本文链接：https://blog.csdn.net/Amy_cx/article/details/128649621

版权

1.Provide和inject的使用方法

2.组件中的data为什么要是函数？

3.组件间如何实现通信，有哪些常见的用法？

4.生命周期钩子函数有哪些？created和mounted的区别？

5.filter 的作用是什么，如何定义全局和局部的 filter？

6.Vue-Router路由模式有哪些，原理是什么？

15.CSS要实现元素居中有哪些方式？至少写三种

16.useMemo和useCallback的区别？

1.Provide和inject的使用方法

父级组件使用provide向下进行传递数据；

子级组件使用inject来获取上级组件传递过来的数据

//Vue2

//父组件
export default{
 provide:{
  info:"提供数据"
 }
}//子组件
export default{
 inject:['info'],
 mounted(){
     console.log("接收数据：", this.info) // 接收数据：提供数据
 }
}

2.组件中的data为什么要是函数？

为了保证组件的独立性和可复用性，如果data是个函数的话，每复用一次组件就会返回新的data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响。

3.组件间如何实现通信，有哪些常见的用法？

props（父传子）、$emit（子传父）、$children、$parent、$refs、eventBus、project+inject、vuex。

4.生命周期钩子函数有哪些？created和mounted的区别？

vue2、3一共有18个：

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、beforeUnmount、unmounted、activated、deactivated、onMounted、onUpdated、onUnmounted、onBeforeMount、onBeforeUpdate、onBeforeUnmount。

区别：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

父传子：props
子传父：$emit
中央事件总线eventBus，适用于父子、隔代、兄弟组件通信
Vuex 适用于父子、隔代、兄弟组件通信
$parent和$children
provide和inject 适用于隔代组件通信
本地存储

mounted:在模板渲染成html后调用，通常初始化页面完成后，再对html的dom节点进行一些需要的操作。

5.filter 的作用是什么，如何定义全局和局部的 filter？

过滤器，对所有的请求或者响应进行预处理。在不改变原始数据的情况下格式化展示数据。

全局：Vue.filter( ){ }

局部：filters:{ }

6.Vue-Router路由模式有哪些，原理是什么？

History、hash

Hash：通过监听浏览器的 onhashchange()事件变化，查找对应的路由规则。

History：利用H5的history中新增的两个API ：pushState()和 replaceState()和一个事件onpopstate监听URL变化。

7.通过路由来传参的方式有哪些？

（1）query传参（显示参数）也可以分为声明式和编程式两种方式。

声明式：

{
    path: '/child,
    name: 'child ',
    component: Child
}
//需要子路由提前配置好路由别名
<router-link :to=" {[name : 'child ', query:{id:1}}">跳转到子路由</router-link>

编程式：

//同样需要子路由提前配置好路由别名（name 属性）
{
    path: '/child',
    name: 'Child ',
    component: Child
}
this.$router.push({
    name: 'Child',
    query:{
        id : 1
    }
})

两者的接收方式都是：this.$route.query.id

（2）params传参（显示参数）也可分为声明式和编程式两种

也都是提前配置好参数。

声明式：

<router-link :to="/child/1">跳转到子路由</router-link>
{
    path: '/child/:id',
    component: Child
}

编程式：

{
    path: "/child/:id', 
    component: Child
}
this.$router.push({
    path: '/child/${id}'
})

接收：this.$route.params.id

（3） params（不显示参数）也可分为声明式和编程式两种方式，但是通过路由的别名name进行传值的，不是path

<router-link :to="{name: 'child', params :{id:1}}">跳转到子路由</router-link>
{
    path: '/child',
    name: 'child',
    component: Child
}

this.$router.push({
    name: 'Child', //只能name，不能是path
    params: {
        id: 1
    }
})

接收：this.$route.params.id