目录
4.生命周期钩子函数有哪些?created和mounted的区别?
5.filter 的作用是什么,如何定义全局和局部的 filter?
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
8.继承方法,至少四种
(1)ES6的extends
(2)原型继承
(3)构造函数继承
(4)组合继承
9.闭包的原理?
函数内部访问外部的变量,不销毁的执行空间。
特点:延长变量生命周期、避免污染全局、内存溢出。
10.防抖节流的原理?
防抖:再执行setTimeout之前,先使用clearTimeout()把上一次定时器给清除掉,这样就达到了只会执行最后一次触发的setTimeout。
节流:在第一次触发了setTimeout后,先把开关关闭(Boolean变量),等执行完后再把开关打开,这样后面的setTimeout在触发前会先判断开关是否关闭,如果关闭了则不会继续触发,要等之前的setTimout执行完后,才允许触发后面的setTimeout。
11.Promise的作用?状态有哪些?
获取异步操作,解决异步回调问题。
状态:1.pending(待定)初识状态
2.fulfiled(完成)操作
3.rejected(拒绝)操作失败
12.深浅拷贝原理?实现方式?
浅拷贝:简单的复制引用类型的内存地址,值在堆里,它们指向同一个内存地址,所以输出的是同一个数值,会改变原数据。
实现:直接赋值、调用Object.assign()、...展开运算符、for循环遍历对象,将旧对象的属性值依次赋值给新对象,如果旧对象中属性值是一个对象,也只是浅拷贝。
深拷贝:深拷贝复制的仅仅是前一个引用类型的数值,值在栈里面,和内存地址无关,是两个独立的数据类型,拥有各自的存储空间,不会改变原数据。
实现:递归、JSON.parse(JSON.stringify())、函数库lodash的_.cloneDeep()。
13.箭头函数与普通有什么区别?
(1)声明方式不同:普通函数可以是声明式的,也可以是赋值式;而箭头函数只能是赋值式的;
(2)this指向不同:普通函数有原型prototype,this指向不确定;箭头函数本身没有this,因为没有原型,this指向确定,指向他父级作用域;
(3)new不同:普通函数可以new;箭头函数不能new,没有prototype属性,也不可以被当作构造函数;
(4)传参方式:普通函数可以获取 arguments对象,箭头函数不能获取。
14.css中flex:1表示什么意思?
flex:1是三个属性的简写。
(1)flex-grow 是用来增大盒子的,比如,当父盒子的宽度大于子盒子的宽度,父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比;
(2)flex-shrink 用来设置子盒子超过父盒子的宽度后,超出部分进行缩小的取值比例;
(3)flex-basis 是用来设置盒子的基准宽度,并且basis和width同时存在时width不起作用。
所以flex:1的逻辑就是用flex-basis把width干掉,然后再用flex-grow和flex-shrink达成最终的效果。
15.CSS要实现元素居中有哪些方式?至少写三种
(1)text-align:center; line-height:父元素的height
(2)display:inline-block; vertical-align:middle;
(3)父元素position:relative;
子元素:position:absolute;top: 0; bottom: 0; left: 0; right: 0; margin: auto;
(4)父元素position:relative;
子元素:position:absolute;top:50%;left: 50%;transform: translate(-50%, -50%);
(5)display:table-cell;
(6)display:flex; align-items: center; justify-content: center
16.useMemo和useCallback的区别?
同:依赖数据发生变化才会重新计算结果,起到缓存作用。
异:1.useMemo 计算结果是return回来的值, 主要用于缓存和更新计算结果的值。
2.useCallback 计算结果是函数, 主要用于缓存函数。