美文网首页
前端面试题

前端面试题

作者: 皇甫贝 | 来源:发表于2021-07-23 16:45 被阅读0次

    vue篇

    1.双向绑定是什么意思?VUE双向绑定原理?

    答:双向是指ViewModel中的data部分和View之间的双向关系。分为正向绑定、反向绑定
      正向:数据驱动页面
      反向:页面更新数据
    原理:双向绑定都是依赖ES5中一个重要的API,Object.defineProperty
    数据劫持结合发布-订阅者的方式;通过Object.defineProperty来劫持各个属性的getter\setter来监听属性变化,实现Observer监听,生成订阅者列表(dep),通过订阅者(Watcher)依次要更新

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

    答:
      相同点:都是控制Dom元素是否显示
      不同点:v-show通过样式控制;v-if是动态的向DOM树内添加或者删除DOM元
      性能:如果要频繁切换某节点时,使用v-show(无论true或者false初始都会进行渲染,此后通过css来控制显示隐藏,因此切换开销比较小,初始开销较大),如果不需要频繁切换某节点时,使用v-if(因为懒加载,初始为false时,不会渲染,但是因为它是通过添加和删除dom元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大)

    3.v-if和v-for的优先级

    答:v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。
    如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。

    4.组件传参的方式

    答:
      父子传参:props,父页面绑定,子页面获取
      子父传参:this.$emit事件驱动
      兄弟传参:but vuex localStorage、sessionStorage

    5.动态路由获取参数

    答:在path中/:id 通过this.router.params.id和this.router.query.id获取

    6.vue更新数组时触发视图更新的方法

    答:push();pop();shift();unshift();splice(); sort();reverse()

    7.computed和watch的区别

    答:
      计算属性computed :
        1. 支持缓存,只有依赖数据发生改变,才会重新进行计算
        2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
        3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
        4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
        5.如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
      侦听属性watch:

    1. 不支持缓存,数据变,直接会触发相应的操作;
        2.watch支持异步;
        3.监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
        4. 当一个属性发生变化时,需要执行对应的操作;一对多;
        5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,
          immediate:组件加载立即触发回调函数执行,
          deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。

    8.keep-alive的作用是什么?

    答:keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染

    9.如何获取dom?

    答:添加ref属性name 通过this.$refs.name获取

    10.vue-loader是什么?使用它的用途有哪些?

    答:vue文件的一个加载器,将template/js/style转换成js模块。
    用途:js可以写es6、style样式可以scss或less、template可以加jade等

    11.为什么使用key?

    答:需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。
    作用主要是为了高效的更新虚拟DOM。这里不推荐使用循环索引值,使用唯一属性,保持数据标识唯一性

    12.v-modal的使用。

    答:v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
      v-bind绑定一个value属性;v-on指令给当前元素绑定input事件

    13.请说出vue.cli项目中src目录每个文件夹和文件的用法?

    答:答:assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置; app.vue是一个应用主组件;main.js是入口文件

    14.v-on可以监听多个方法吗?

    答:可以,栗子:<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

    15.生命周期

    答:
      beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
      create:data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作
      beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
      mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
      beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
      updated:页面显示的数据和data中的数据已经保持同步了,都是最新的
      beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
      destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

    16.第一次页面加载会触发哪几个钩子?

    答:beforeCreate, created, beforeMount, mounted

    17.简述每个周期具体适合哪些场景

    答:

    18.vue获取数据在哪个周期函数

    答:一般 created/beforeMount/mounted 皆可

    19.Mixin混入原理及使用

    答:全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。
    使用的话 在main.js中直接new vue 的时候直接注入,然后在单页面中直接使用定义好的方法。

    vue-router篇

    vuex篇

    1.vuex是什么?怎么使用?哪种功能场景使用它?

    答:vue框架中状态管理。在main.js引入store,注入。
    新建了一个目录store.js,….. export 。
    场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

    怎么获取和更改state

    答:this.$store.state
    在mutations里定义大写参数,是个箭头函数参数是state操作set赋值,然后在actions定义函数函数使用commit触发

    2.vuex有哪几种属性?

    答:有五种,分别是 State、 Getter、Mutation 、Action、 Module
    state => 基本数据(数据源存放地)
    getters => 从基本数据派生出来的数据

    mutations => 提交更改数据的方法,同步!
    actions => 像一个装饰器,包裹mutations,使之可以异步。
    modules => 模块化Vuex

    3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?

    答:如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
    如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用。

    webpack篇

    区别:

    loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中
    plugin 赋予了 webpack 各种灵活的功能,例如打包优化、资源管理、环境变量注入等,目的是解决 loader 无法实现的其他事
    loader 运行在打包文件之前
    plugins 在整个编译周期都起作用
    在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果
    对于 loader,实质是一个转换器,将 A 文件进行编译形成 B 文件,操作的是文件,比如将 A.scss 或 A.less 转变为 B.css,单纯的文件转换过程
    编写loader:其本质为函数,函数中的 this 作为上下文会被 webpack 填充,因此我们不能将 loader 设为一个箭头函数
    函数接受一个参数,为 webpack 传递给 loader 的文件源内容
    函数中 this 是由 webpack 提供的对象,能够获取当前 loader 所需要的各种信息函数中有异步操作或同步操作,异步操作通过 this.callback 返回,返回值要求为 string 或者 Buffe

    JS篇

    CSS篇

    相关文章

      网友评论

          本文标题:前端面试题

          本文链接:https://www.haomeiwen.com/subject/imrumltx.html