vue插槽面试题_【interview】vue面试题

1. 什么是 RESTful ? (粗略过一遍 有个印象即可 知道是个什么东东)

面试回答:“是一个api的标准,无状态请求,请求的路由地址是固定的。 restful:给用户一个 url,根据method不同在后端做不同处理:比如post 创建数据,get 获取数据,put和patch修改数据,delete删除数据”

REST,即 Representational State Transfer的缩写。我对这个词组的翻译是"表现层 状态 转化"

--------(Resources)资源的表现层状态转化

资源:

所谓"资源",就是网络上的一个实体,或者说是网络上的一个具体信息。

它可以是一段文本、一张图片、一首歌曲、一种服务,总之就是一个具体的实在。

你可以用一个URI(统一资源定位符)指向它,每种资源对应一个特定的URI。

要获取这个资源,访问它的 URI 就可以,因此 URI 就成了每一个资源的地址或独一无二的识别符。

所谓"上网",就是与互联网上一系列的"资源"互动,调用它的 URI 。

表现层(Representation)

"资源"是一种信息实体,它可以有多种外在表现形式。

我们把"资源"具体呈现出来的形式,叫做它的"表现层"(Representation)。

比如,文本可以用 txt 格式表现,也可以用 HTML 格式、XML格式、JSON 格式表现,甚至可以采用二进制格式。

图片可以用 JPG 格式表现,也可以用 PNG 格式表现。

在 HTTP 请求的头信息中用 Accept 和 Content-Type 字段指定,这两个字段才是对"表现层"的描述。

状态转化(State Transfer)

访问一个网站,就代表了客户端和服务器的一个互动过程。

在这个过程中,势必涉及到数据和状态的变化。

联网通信协议HTTP协议,是一个无状态协议。

这意味着,所有的状态都保存在服务器端。

因此,如果客户端想要操作服务器,必须通过某种手段,让服务器端发生 "状态转化"(State Transfer)。

而这种转化是建立在表现层之上的,所以就是"表现层状态转化"。

客户端用到的手段,只能是 HTTP 协议。

具体来说,就是 HTTP 协议里面,四个表示操作方式的动词 POST、DELETE、GET、PUT

它们分别对应四种基本操作:

增:POST 用来新建资源(也可以用于更新资源)

删:DELETE 用来删除资源。

查:GET 用来获取资源

改:PUT 用来更新资源

2. 双向绑定

双向数据绑定描述的就是: 组件 data 中的状态数据流

用户操作导致状态数据的改变,这是一个方向 由页面流入 data

状态数据改变以后,自动渲染页面最新状态数据,这是另一个方向 由 data 流向页面

双向绑定原理(Object.defineProperty() 属性劫持 和 发布订阅模式):

利用了 Object.defineProperty() 这个方法,去为组件 data 中的每个属性,设置 set 和 get,通常分别称之为 ‘setter’ 和 ‘getter’,这一步操作,我们称之为,数据劫持(劫持了组件 data 中的每个属性)

这是为了: 在给 data 中的属性赋值操作时,不是简单的赋值,还要执行 “自动渲染 属性相关的最新数据 到页面中”  的逻辑

然后 data 中的每一个属性 都会有一个 主题对象 dep ,我们可以称之为发布者

在 new Vue 的时候,会 Compile 编译 html 创建一个虚拟 dom,解析到 属性相关的元素,就为这个元素绑定为 data 中属性相关的 watcher,理解为 发布者

一个发布者,进行数据的改变,会引起 data 中属性的改变,由于数据劫持触发 setter,同时也会让发布者派发一个消息给页面所有相关的 watcher 订阅者

3. v-if 和 v-show 的区别

v-show只是在 display: non e和 display: block 之间切换,只需要切换 CSS,DOM还是一直保留着

v-show 在初始渲染时有更高的开销,但是切换开销很小,更适合频繁切换的场景

v-if 涉及到 vue 底层的编译,当属性初始为 false 时组件不会被渲染,直到条件为 true

切换条件时会触发销毁/挂载组件,切换时开销更高,更适合不经常切换的场景

3.2 聊聊你对Vue.js的template编译的理解

先转化成AST树,再得到 render函数 返回VNode(Vue的虚拟DOM节点)

详细步骤:

首先通过compile编译器把template编译出AST语法树

然后AST会经过generate(将AST语法树转化成render function字符串的过程)得到render函数,render的返回值是VNode

VNode是Vue的虚拟DOM节点,里面有标签名,子节点,文本等

4. active-class 是哪个组件的属性?

active-class 是 vue-router 模块中 router-link 组件的属性

路由的模糊匹配

当用户访问 /article/1 时会被激活为:

exact-active-class 也是 vue-router 模块中 router-link 组件的属性

路由的全匹配

当用户访问 /article/1 时,不会激活这个 link 的 class:

5. 嵌套路由怎么定义

使用 children 定义嵌套路由

5.2. 对 keep-alive 的了解

keep-alive 是一个 vue 内置组件,可使被包含的组件保留状态或避免重新渲染,有 include(包含的组件缓存)和 exclude(排除的组件不缓存)两个属性

6. 对 vue 生命周期的理解

生命周期共分为 8 个阶段

创建前/后:

在 beforeCreate 阶段,vue 实例的挂载元素 el和数据对象 data 都为 undefined,还未初始化

created 阶段,vue 实例的数据对象 data 有了,el 还没有。

载入前后:

在 beforeMount 阶段,vue 实例的 el 和 data 都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。

在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染

更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法

销毁前/后:

beforeDestroy 在实例销毁前调用,实例仍然完全可用

destroyed 在实例销毁之后调用,调用后所有事件监听器会被移除,所有子实例也会被销毁。

事件修饰符

.prevent

阻止默认行为、相当于在事件处理程序中调用 event.preventDefault()

.stop

阻止单击事件冒泡

.self

当事件发生在该元素本身而不是子元素的时候触发

...

.capture

元素自身触发的事件先在此处处理,然后才交由内部元素进行处理

...

v-model 修饰符

.lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步

你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符

.trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

按键修饰符

.enter .tab .delete .esc .space .up .down .left .right

.ctrl .alt .shift .meta

8. 常见指令及作用

v-text数据绑定标签,将 vue 对象 data 中的属性绑定给对应的标签作为内容显示出来,类似 js 的 text 属性;

new Vue({

el: "#app",

data:{

h1:'

完善

'

}

}

v-html 类似 v-text 标签,他是将 data 的属性作为 html 语法输出,类似 js 中的 innerHtml 属性;

v-show 实际是控制了dom的css的display属性

v-if 、v-else-if

v-for

v-on

v-bind

v-model

v-slot 插槽名(默认default)

8.2 插槽内容 slot

父组件向 子组件传递"标签数据"

应对: 不仅数据是动态的,结构也是动态的

App.vue 父组件 使用子组件时,声明用哪些槽:

子组件Child 定义槽:

插槽显示的顺序,由子组件编码决定

细节: 在写公共组件 Child 时,先不写槽,直接写正常的代码,将样式搞定,再抽出槽

9. 自定义指令

分为两种: 创建局部指令、创建全局指令

使用:

局部指令

new Vue({

el: "test",

directive:{

"lower-text": function(el, binding){

el.innerHTML = binding.value.toLowerCase();

}

}

})

全局指令

/********* js *********/

Vue.directive(

"upper-text",

function(el, binding){

el.innerHTML = binding.value.toUpperCase()

}

);

10. 自定义一个过滤器?

比如 moment 自定义过滤器 - 日期处理 /src/filters/index.js

import Vue from 'vue'

import moment from "moment"

Vue.filter(

'stick-format',

funtion (vue, formatStr="YYYY-MM-DD HH:mm:ss") {

return moment().format(formatStr)

}

)

11. 什么是 MVVM

MVVM 是 Model-View-ViewModel 的缩写。

Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。

View 代表UI 组件,它负责将数据模型转化成UI 展现出来。

ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步 View 和 Model 的对象,连接 Model 和 View。

在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互

Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

12. vue 中的 MVVM 分别是?

13. 引入三方库的时候 Vue.use(MyPlugin);        // 声明使用 vue 插件 MyPlugin,内部会自调用方法加载 MyPlugin.install(Vue);

14. 导航守卫(全局守卫,类似 react 封装的那个组件,判断是否已经登录并认证,然后 render 不同的组件)

是 vue-router 提供的 下面 2 个方面的功能

监视路由跳转

控制路由跳转

应用

在跳转到界面之前,对用户进行检查限制

在界面离开之前进行收尾工作

分类:

全局守卫 ---- 针对任意路由跳转

import Vue from "vue";

import VueRouter from "vue-router";

const Home = ()=>import("../pages/Home/Home")

const Search = ()=>import("../pages/Search/Search")

const Order = ()=>import("../pages/Order/Order")

const Personal = ()=>import("../pages/Personal/Personal")

Vue.use(VueRouter);

const router = new VueRouter({

mode: "history",

routes: [

{path:"/home", component: Home, meta:{showFooter: true}},

{

path:"/shop",

component: Shop,

children: [

{path:"/shop/goods", component: Goods},

{path:"/shop/ratings", component: Ratings},

{path:"/shop/info", component: Info},

{path:"/shop", redirect: "/shop/goods"},

]

},

{path:"/search", component: Search, meta:{showFooter: true}},

{path:"/order", component: Order, meta:{showFooter: true}},

{path:"/personal", component: Personal, meta:{showFooter: true}},

{path:"/login_register", component: LoginRegister},

{path:"/", redirect: "/home"},

]

})

/*************************************************/

const paths = ["/login_register"]

router.beforeEach((to, from, next)=>{ // 设置全局守卫

const path = to.path

if(paths.indexOf(path)>=0){

if(Vue.store.state.user.userInfo._id){ // 在 main.js 中保存 store

return next("/personal")

}

}

next() // 其他路由请求,放行

})

/***********************

to ---- 目标路由

from ---- 当前路由

next ---- 函数

next() ---- 执行下一个守卫回调,如果没有,就跳转到目标路由

next(false) ---- 不继续执行,跳转流程在此处中断,不会跳转到目标路由组件

next(path) ---- 跳转到指定的另一个路由

next() ---- 传入的回调函数会在组件对象创建后对象,即延后执行回调 - 且将组件对象传入回调函数 即 this

**************************/

export default router

全局前置守卫: 在准备跳转到某个路由组件之前 (在开发中用的较多)

router.beforeEach((to, from, next)=>{

})

全局后置守卫: 在跳转到某个路由组件之后

router.afterEach((to, from)=>{

})

组件守卫

beforeRouteEner(){ // 在跳转到当前组件之前,无法访问这个组件的组件对象 this

}

beforeRouteUpdate(){ // 在当前组件显示更新前调用,可以访问 this

}

beforeRouteLeave(){ // 在当前组件离开前调用,可以访问 this

}

15. computed 和 watch 区别

computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存

只有当计算值变化才会返回内容

一般来说需要依赖别的属性来动态获得值的时候可以使用 computed

watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch

值得注意的是,watch 还可以配置 deep 属性为 true ,实现对对象的深层次属性监控

16. 组件继承 extend 能做什么?

扩展组件

// 创建组件构造器

let Component = Vue.extend({

template: '

test
'

})

// 扩展已有组件

let SuperComponent = Vue.extend(Component)

new SuperComponent({

created(){

console.log(1);

}

})

new SuperComponent().$mount('#app')

实现了子组件 Compont,增加一个生命周期函数 created 并在期间打印 1

17. 其实 vue 提供的两个都可以理解为继承

mixins 接收对象数组(可理解为多继承)

extends 接收的是对象或函数(可理解为单继承)

优先调用 extends 和 mixins 继承的父类

extends 触发的优先级更高,相对于是队列

const extend = {

created () {

console.log('extends created')

}

}

const mixin1 = {

created () {

console.log('mixin1 created')

}

}

const mixin2 = {

created () {

console.log('mixin2 created')

}

}

export default {

extends: extend,

mixins: [mixin1, mixin2],

name: 'app',

created () {

console.log('created')

}

}

控制台会打印

extends created

mixin1 created

mixin2 created

created

18. 说说你所了解的 Vue.nextTick() 即 this.$nextTick()

在 DOM 更新完毕之后执行一个回调

尽管 MVVM 框架并不推荐访问 DOM,但有时候确实会有这样的需求,尤其是和第三方插件进行配合的时候,免不了要进行DOM操作

而 nextTick 就提供了一个桥梁,确保我们操作的是更新后的 DOM

19. 项目中遇到的问题:

(1)beforeCreate 和 created 生命周期发送ajax到后台,数据返回的时候发现 DOM 节点还未生成无法操作节点,那要怎么办呢?

原因: created()钩子函数执行的时候DOM并未进行任何渲染

解决: 使用 this.$nextTick(() => { //操作节点 }) 确保 DOM 已经更新完成

(2)

(3)

(4)

20. 组件间的通信

(1)父子组件通信

父组件通过 props 传递数据给子组件

// 父组件

data(){

return{

toChild: '大儿子',

fromChild: ''

}

},

methods: {

getFromChild(val) {

this.fromChild = val

}

}

子组件通过 emit 发送事件传递给父组件

// 子组件

{{data}}

props:[data],

methods: {

toParent(){

this.$emit('send', '给父亲')

}

}

在父组件使用 $children 访问子组件

/ 父组件

data(){

return {

msg: '父组件数据'

}

},

methods: {

test(){

console.log('我是父组件的方法,被执行')

}

},

mounted(){

console.log(this.$children[0].child_msg); // 打印子组件 data 的属性

}

在子组件中使用 $parent 访问父组件

// 子组件渲染父组件 data 中的属性

{{$parent.msg}}

data(){

return{

child_msg: '子组件数据'

}

},

mounted(){

// 子组件执行父组件方法

this.$parent.test();

}

(2)兄弟组件通信

可以通过查找公共父组件中的子组件实现

this.$parent.$children 在 $children 中可以通过组件 name 查询到需要的组件实例,然后进行通信

(3)跨多层次组件通信

provide/inject 文档中不推荐直接使用在业务中

// 父组件A

export default{

provide: {

data: 1

}

}

// 子组件B

export default{

inject: ['data'],

mounted(){

// 无论跨几层都能获取父组件的data属性

console.log(this.data); // 1

}

}

(4)任意组件

Event Bus

1. 新建一个bus.js文件

// bus.js

import Vue from 'vue';

export default new Vue();

2. 使用它

组件A

添加

import Bus from 'bus.js';

export default{

methods: {

addCart(event){

Bus.$emit('getTarget', event.target)

}

}

}

Bus.$emit('消息名称', 传参);

组件B

export default{

created(){

Bus.$on('getTarget', target =>{

console.log(target)

})

}

}

Bus.$on('消息名称', 处理函数);

Vuex 集中管理组件的公共状态数据

就是用于 任意组件 间的通信

核心概念: state 状态机、mutation、action

流程:

操作的数据流:

组件逻辑中会 this.$store.dispatch() 一个 action,进行必要的数据处理,可能包含异步操作

然后 action 函数会 commit 一个 mutation-type 触发对应的 mutation

然后 mutation 会直接操作 状态机 state 改变对应的状态数据

接下来就是数据渲染:

在组件中,会通过 mapState 的方式将需要的公共状态映射到 computed 上,然后实时渲染页面(猜测也是发布订阅者的模式,没有验证)

而 computed 的属性又被挂载到了 this 上,所以可以通过 this 访问到最新的 vuex 状态数据,从而进行逻辑流程

21. 单页面应用 SPA 的核心之一是:更新视图而不重新请求页面,

vue-router 路由模式 分为

hash 模式 : vue-router 中默认使用的是 hash 模式

URL 中带有 # 号

背后的原理是 onhashchange 事件

history模式:

随着 history api的到来,前端路由开始进化了,history api 给了前端完全的自由 history api 可以分为两大部分:切换和修改

两个方法,这两个方法接收三个参数:stateObj,title,url

pushState

把页面的状态保存在 state 对象中,当页面的 url 再变回这个url时,可以通过 event.state 取到这个state对象,从而可以对页面状态进行还原

这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面

replaceState

缺点:

当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来

vue-router 路由 分为

普通路由

this.$router.push('home');

this.$router.push({path: 'home');

命名路由

const router=new VueRouter({

routes: [{

path: '/user',

name: 'user',

component: User

}]

})

this.$router.push({ name: 'user' });

动态路由匹配(路由参数 params)

const router = new VueRouter({

routes: [{

path: '/user/:id',

component: User

}]

})

{{$route.params.id}}

this.$router.push({name:'user',params: {id: 123});

嵌套路由

const router = new VueRouter({

routes: [{

path: '/user/:id',

children: [{

// 当/user/:id

path: '',

component: UserHome

},{

// 当/user/:id/profile

path: 'profile',

component: UserProfile

}]

}]

})

{{$route.params.id}}

请求参数的路由

this.$router.push({path:'register',query:{plan:'private'});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值