tnblog
首页
视频
资源
登录

面试题

2654人阅读 2021/6/22 19:21 总访问:59398 评论:0 收藏:1 手机
分类: 前端

1:静态资源和动态资源的区别

静态资源:可以理解为前端的固定页面,这里面包含HTML、CSS、JS、图片等等,不需要查数据库也不需要程序处理,
直接就能够显示的页面,如果想修改内容则必须修改页面,但是访问效率相当高。

动态资源:需要程序处理或者从数据库中读数据,能够根据不同的条件在页面显示不同的数据,内容更新不需要修改页面但是访问速度不及静态页面。


2:v-show 与 v-if 区别

相同点:v-if与v-show都可以动态控制dom元素显示隐藏

不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还在。
使用:频繁切换时用v-show,运行时较少改变时用v-if。

3:绑定 class 的数组用法

对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

数组方法v-bind:class="[class1, class2]"

style v-bind:style="{color: color, fontSize: fontSize+'px' }"

4:计算属性和 watch 的区别

计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。
所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch,用反或混用虽然可行,但都是不正确的用法。

区别
computed 是一个对象时,它有哪些选项?
computed 和 methods 有什么区别?
computed 是否能依赖其它组件的数据?
watch 是一个对象时,它有哪些选项?

  1. 有get和set两个选项

  2. methods是一个方法,它可以接受参数,而computed不能,computed是可以缓存的,methods不会。

  3. computed可以依赖其他computed,甚至是其他组件的data

  4. watch 配置
    handler
    deep 是否深度
    immeditate 是否立即执行

总结

当有一些数据需要随着另外一些数据变化时,建议使用computed。
当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watcher

5:事件修饰符

绑定一个原生的click事件, 加native。

其他事件修饰符

stop prevent self

组合键

click.ctrl.exact 只有ctrl被按下的时候才触发

6:组件中的data为什么是函数
为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是一个对象?

因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离,而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。

7:双向绑定原理
这个问题几乎是面试必问的,回答也是有深有浅。基本上要知道核心的
API 是通过 
Object.defineProperty() 来劫持各个属性的 setter / getter,在数据变动时发布消息给订阅者,
触发相应的监听回调。

8:slot插槽

单个插槽

当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

命名插槽

solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。
这样可以将父组件模板中 slot 位置,和子组件 slot 元素产生关联,便于插槽内容对应传递

作用域插槽scoped slots

可以访问组件内部数据的可复用插槽(reusable slot)
在父级中,具有特殊特性 
slot-scope 的<template> 元素必须存在,表示它是作用域插槽的模板。
slot-scope 的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象。

9:Vue的生命周期

什么是生命周期:  vue每个组件都是独立的,每个组件都有一个属于它的生命周期,
从一个组件
创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。

在组件中具体的方法有:

    beforeCreate     (创建前)

    created              (创建后)

    beforeMount     (之前)

    mounted            (安装)

    (

        beforeUpdate  (更新前)

        updated            (更新后)

    )

    beforeDestroy      (销毁前)

    destroyed             (销毁后)

执行顺序:

1.beforeCeate(){

    console.log(this.rendered);    // undefined  

}

2.created() {

    console.log(this.$el);//undefined

    console.log(this.rendered);  // false

}

3.beforeMount() {

    console.log(this.$el);//undefined

}


4.mounted() {

    console.log(this.$el);

}


5.beforeDestroy(){

    console.log(this.$el);

    console.log(this.rendered); 

}


6.destroyed() {

    console.log(this.$el);

    console.log(this.rendered);

}


vue中内置的方法 属性和vue生命周期的运行顺序(methods、computed、data、watch、props)

props => methods =>data => computed => watch

 vue 的生命周期,总得来说就是实例的创建和销毁这段时间的一个机制吧。也是vue框架的数据间的交互通信


9:组件间的通信

  1. 父子 props/event $parent/$children ref provide/inject

  2. 兄弟 bus vuex

  3. 跨级 bus vuex provide.inject






评价
我们太有限了。
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术