ajax
1)ajax请求的原理/ 手写一个ajax请求?
2)readyState?
3)ajax异步与同步的区别?
4)ajax传递中文用什么方法?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
简介
props和$emit相信大家十分的熟悉了,这是我们最常用的vue通信方式。
props
:props可以是数组或对象,用于接收来自父组件通过v-bind传递的数据。当props为数组时,直接接收父组件传递的属性;当 props 为对象时,可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。
$emit
:在父子组件通信时,我们通常会使用$emit来触发父组件v-on在子组件上绑定相应事件的监听。
代码实例
下面通过代码来实现一下props和$emit的父子组件通信,在这个实例中,我们都实现了以下的通信:
-
父向子传值:父组件通过
:messageFromParent="message"
将父组件 message 值传递给子组件,当父组件的 input 标签输入时,子组件p标签中的内容就会相应改变。 -
子向父传值:父组件通过
@on-receive="receive"
在子组件上绑定了 receive 事件的监听,子组件 input 标签输入时,会触发 receive 回调函数, 通过this.$emit('on-receive', this.message)
将子组件 message 的值赋值给父组件 messageFromChild ,改变父组件p标签的内容。
请看代码:
// 子组件代码
this is child component
<input type=“text” v-model=“message” @keyup=“send” />
收到来自父组件的消息:{{ messageFromParent }}
// 父组件代码
this is parent component
收到来自子组件的消息:{{ messageFromChild }}
<Child :messageFromParent=“message” @on-receive=“receive” />
效果预览
2. v-slot 前端开发博客
简介
v-slot是 Vue2.6 版本中新增的用于统一实现插槽和具名插槽的api,用于替代slot(2.6.0废弃)
、slot-scope(2.6.0废弃)
、scope(2.5.0废弃)
等api。
v-slot在 template 标签中用于提供具名插槽或需要接收 prop 的插槽,如果不指定 v-slot ,则取默认值 default 。
代码实例
下面请看v-slot的代码实例,在这个实例中我们实现了:
- 父向子传值:父组件通过
<template v-slot:child>{{ message }}</template>
将父组件的message值传递给子组件,子组件通过<slot name="child"></slot>
接收到相应内容,实现了父向子传值。
// 子组件代码
this is child component
收到来自父组件的消息:
this is parent component
{{ message }}
效果预览
3. parent/root
简介
我们也同样可以通过 $refs/$parent/$children/$root
等方式获取 Vue 组件实例,得到实例上绑定的属性及方法等,来实现组件之间的通信。
$refs: 我们通常会将 绑定在元素上,来获取元素的。在实现组件通信上,我们也可以将refs 绑定在子组件上,从而获取子组件实例。
:我们可以在中直接通过parent`来获取当前组件的父组件实例(如果有的话)。
同理,我们也可以在中直接通过children来获取当前组件的子组件实例的数组。但是需要注意的是,
this.$children`数组中的元素下标并不一定对用父组件引用的子组件的顺序,例如有异步加载的子组件,可能影响其在 children 数组中的顺序。所以使用时需要根据一定的条件例如子组件的name去找到相应的子组件。
$root: 获取当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。通过 $root ,我们可以实现组件之间的跨级通信。
代码实例
下面来看一个 和children 使用的实例(由于这几个api的使用方式大同小异,所以关于 和root 的使用就不在这里展开了,在这个实例中实现了:
-
父向子传值:子组件通过
$parent.message
获取到父组件中message的值。 -
子向父传值:父组件通过
$children
获取子组件实例的数组,在通过对数组进行遍历,通过实例的 name 获取到对应 Child1 子组件实例将其赋值给 child1,然后通过child1.message
获取到 Child1 子组件的message。
代码如下:
// 子组件
this is child component
收到来自父组件的消息:{{ $parent.message }}
// 父组件
this is parent component
收到来自子组件的消息:{{ child1.message }}
效果预览
4. listener 前端开发博客
简介
和listeners 都是 Vue2.4 中新增加的属性,主要是用来供使用者用来开发高级组件的。
$attrs:
用来接收父作用域中不作为 prop 被识别的 attribute 属性,并且可以通过v-bind="$attrs"
传入内部组件——在创建高级别的组件时非常有用。
试想一下,当你创建了一个组件,你要接收 param1 、param2、param3 …… 等数十个参数,如果通过 props,那你需要通过props: ['param1', 'param2', 'param3', ……]
等声明一大堆。如果这些 props 还有一些需要往更深层次的子组件传递,那将会更加麻烦。
而使用 $attrs
,你不需要任何声明,直接通过$attrs.param1
、$attrs.param2
……就可以使用,而且向深层子组件传递上面也给了示例,十分方便。
$listeners
:包含了父作用域中的 v-on 事件监听器。它可以通过 v-on="$listeners"
传入内部组件——在创建更高层次的组件时非常有用,这里在传递时的使用方法和 $attrs 十分类似。
代码实例
在这个实例中,共有三个组件:A、B、C,其关系为:[ A [ B [C] ] ],A为B的父组件,B为C的父组件。即:1级组件A,2级组件B,3级组件C。我们实现了:
-
父向子传值:1级组件A通过
:messageFromA="message"
将 message 属性传递给2级组件B,2级组件B通过$attrs.messageFromA
获取到1级组件A的 message 。 -
跨级向下传值:1级组件A通过
:messageFromA="message"
将 message 属性传递给2级组件B,2级组件B再通过v-bind="$attrs"
将其传递给3级组件C,3级组件C通过$attrs.messageFromA
获取到1级组件A的 message 。 -
子向父传值:1级组件A通过
@keyup="receive"
在子孙组件上绑定keyup事件的监听,2级组件B在通过v-on="$listeners"
来将 keyup 事件绑定在其 input 标签上。当2级组件B input 输入框输入时,便会触发1级组件A的receive回调,将2级组件B的 input 输入框中的值赋值给1级组件A的 messageFromComp ,从而实现子向父传值。 -
跨级向上传值:1级组件A通过
@keyup="receive"
在子孙组件上绑定keyup事件的监听,2级组件B在通过<CompC v-on="$listeners" />
将其继续传递给C。3级组件C在通过v-on="$listeners"
来将 keyup 事件绑定在其 input 标签上。当3级组件C input 输入框输入时,便会触发1级组件A的receive回调,将3级组件C的 input 输入框中的值赋值给1级组件A的 messageFromComp ,从而实现跨级向上传值。
代码如下:
// 3级组件C
this is C component
收到来自A组件的消息:{{ $attrs.messageFromA }}
// 2级组件B
this is B component
收到来自A组件的消息:{{ $attrs.messageFromA }}
// A组件
this is A component
收到来自{{ comp }}的消息:{{ messageFromComp }}
<CompB :messageFromA=“message” @keyup=“receive” />
效果预览
5. provide/inject 前端开发博客
简介
provide/inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。如果你是熟悉React的同学,你一定会立刻想到Context这个api,二者是十分相似的。
provide: 是一个对象,或者是一个返回对象的函数。该对象包含可注入其子孙的 property ,即要传递给子孙的属性和属性值。
injcet: 一个字符串数组,或者是一个对象。当其为字符串数组时,使用方式和props十分相似,只不过接收的属性由data变成了provide中的属性。当其为对象时,也和props类似,可以通过配置default和from等属性来设置默认值,在子组件中使用新的命名属性等。
代码实例
这个实例中有三个组件,1级组件A,2级组件B,3级组件C:[ A [ B [C] ] ],A是B的父组件,B是C的父组件。实例中实现了:
-
父向子传值:1级组件A通过provide将message注入给子孙组件,2级组件B通过
inject: ['messageFromA']
来接收1级组件A中的message,并通过messageFromA.content
获取1级组件A中message的content属性值。 -
跨级向下传值:1级组件A通过provide将message注入给子孙组件,3级组件C通过
inject: ['messageFromA']
来接收1级组件A中的message,并通过messageFromA.content
获取1级组件A中message的content属性值,实现跨级向下传值。
代码如下:
// 1级组件A
this is A component
// 2级组件B
this is B component
收到来自A组件的消息:{{ messageFromA && messageFromA.content }}
// 3级组件C
this is C component
收到来自A组件的消息:{{ messageFromA && messageFromA.content }}
注意点:
-
可能有同学想问我上面1级组件A中的message为什么要用object类型而不是string类型,因为在vue provide 和 inject 绑定并不是可响应的。如果message是string类型,在1级组件A中通过input输入框改变message值后无法再赋值给messageFromA,如果是object类型,当对象属性值改变后,messageFromA里面的属性值还是可以随之改变的,子孙组件inject接收到的对象属性值也可以相应变化。
-
子孙provide和祖先同样的属性,会在后代中覆盖祖先的provide值。例如2级组件B中也通过provide向3级组件C中注入一个messageFromA的值,则3级组件C中的messageFromA会优先接收2级组件B注入的值而不是1级组件A。
效果预览
6. eventBus
简介
eventBus又称事件总线,通过注册一个新的Vue实例,通过调用这个实例的和on等来监听和触发这个实例的事件,通过传入参数从而实现组件的全局通信。它是一个不具备 DOM 的组件,有的仅仅只是它实例方法而已,因此非常的轻便。
我们可以通过在全局Vue实例上注册:
// main.js
Vue.prototype.$Bus = new Vue()
但是当项目过大时,我们最好将事件总线抽象为单个文件,将其导入到需要使用的每个组件文件中。这样,它不会污染全局命名空间:
// bus.js,使用时通过import引入
import Vue from ‘vue’
export const Bus = new Vue()
原理分析
eventBus的原理其实比较简单,就是使用订阅-发布模式,实现和on两个方法即可:
// eventBus原理
export default class Bus {
constructor() {
this.callbacks = {}
}
$on(event, fn) {
this.callbacks[event] = this.callbacks[event] || []
this.callbacks[event].push(fn)
}
$emit(event, args) {
this.callbacks[event].forEach((fn) => {
fn(args)
})
}
}
// 在main.js中引入以下
// Vue.prototype.$bus = new Bus()
跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。
也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自己,也希望能帮助到需要的同学。
面试准备
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
面试准备根据每个人掌握的知识不同,准备的时间也不一样。现在对于前端岗位,以前也许不是很重视算法这块,但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长,是一个长期的过程。需要在掌握了大部分前端基础知识的情况下,再有针对性的去复习算法。面试的时候算法能做出来肯定加分,但做不出来也不会一票否决,面试官也会给你提供一些思路。
e()
原理分析
eventBus的原理其实比较简单,就是使用订阅-发布模式,实现和on两个方法即可:
// eventBus原理
export default class Bus {
constructor() {
this.callbacks = {}
}
$on(event, fn) {
this.callbacks[event] = this.callbacks[event] || []
this.callbacks[event].push(fn)
}
$emit(event, args) {
this.callbacks[event].forEach((fn) => {
fn(args)
})
}
}
// 在main.js中引入以下
// Vue.prototype.$bus = new Bus()
跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。
也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自己,也希望能帮助到需要的同学。
面试准备
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
面试准备根据每个人掌握的知识不同,准备的时间也不一样。现在对于前端岗位,以前也许不是很重视算法这块,但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长,是一个长期的过程。需要在掌握了大部分前端基础知识的情况下,再有针对性的去复习算法。面试的时候算法能做出来肯定加分,但做不出来也不会一票否决,面试官也会给你提供一些思路。