美文网首页
面试题 - vue/webpack

面试题 - vue/webpack

作者: 唐井儿_ | 来源:发表于2019-08-17 10:17 被阅读0次

    1.data为什么是个函数

    • 入口new Vue的时候的data直接赋值为一个对象,但到组件里就不行;
    • 每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data。

    2.props default为什么是个函数
    3.computed watch区别

    • 前者具有缓存性,数据改变时才会重新计算,否则直接从缓存中拿;
    • 后者在异步或开销很大时才用,或者需要深度监听对象的变化。

    4.webpack loader写过吗
    5.hash chunkhash contenthash

    • hash,工程级别的,每次修改一个文件,所有文件名的hash值都会改变,所以缓存都会失效;
    • chunkhash,根据入口文件进行解析、构建对应的chunk,生成哈希值。将三方库和公共部分单独打包构建,就可以使用chunkhash;
    • contenthash,针对内容级别的,一般对分离出的css使用此配置。


      配置示例
    • 参考

    6.代码发布流程,nginx问题
    7.npm包
    8.父子通信的几种方式
    9.router hash history区别
    10.数组和对象改变,有时候视图不更新

    • 利用索引值直接设置一个数组时,items[indexOfItem] = newValue,可换用splice,或Vue.$set
    • 修改数组的长度时,items.length = newLength,可换用splice
    • 动态添加对象的属性,可换用Vue.$set
    • 详见[https://cn.vuejs.org/v2/guide/list.html]

    11.资源文件不是cdn吗,还可以用自己的服务器?
    12.vue双向绑定原理
    参考https://www.cnblogs.com/wangjiachen666/p/9883916.html
    13.如何进行webpack多环境配置
    配置package.json文件的scripts,自定义命令行,并使用cross-env.NODE_ENV=production/development指定环境;配置文件中使用这个变量进行区分

    JavaScript基础

    1. 怎么解决跨域?

    2. 怎么理解异步的发展过程,例如axios、ajax、promise、await、async、generator等?

      2.1 为什么需要异步?

      • JavaScript是单线程语言,同一时间只能做一件事情;
      • 同步任务进入主线程,按顺序执行,意味着阻塞,前一段代码必须执行完成了才能执行后边代码;
      • 异步是不会造成阻塞的。异步任务进入任务队列,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程。比如promose.then(...)、$nextTick(...)、setTimeout/setInterval的回调等。

      2.2 发展过程

      • 异步最早的解决方案是回调函数,如setTimeout/setInterval的回调、事件回调函数、ajax的回调等。缺点是回调嵌套难以维护,不能try catch错误和回调地狱;
      • 为了解决“回调地狱”,提出了Promise方案。但一定程度上又存在新问题:错误不能被try catch,只有通过catch回调捕获;使用promise的链式回调没从根本上解决回调地狱问题,而是换了种写法,比如后一个请求依赖于前一个的结果,仍然需要嵌套多个promise实例或者then(...);
      • Generator是es6提供的一种异步编程解决方案,遇到yield命令就暂停,等到执行权返回,再从暂停的地方继续向后执行。缺点是需要结合co函数,否则不能自动执行;
      • async是generator的语法糖,async/await使得异步代码看起来像同步代码;
      • 异步编程的目标是让异步逻辑的代码看起来像同步一样。

    回调函数 --> Promise --> Generator --> async/await

    3.async await promise区别 共同点

    • 带async关键字的函数,它使得你的函数的返回值必定是promise对象
    async function fn1 () {
      return 123;
    }
    function fn2 () {
      return 234;
    }
    console.log(fn1()) // Promise {<resolved: 123>}
    console.log(fn2()) // 234 
    
    • await等的是右侧表达式的结果;执行顺序是从右到左,执行完右边的方法后,发现有await关键字;待右侧代码执行完成后,再执行await之后的代码
    • 事件循环机制:宏任务(setTimeout/setInterval)、微任务(promise.then);执行完一个宏任务后,再执行所有的微任务,再执行下一个任务,以此类推。

    4.js继承的几种方式

    • 原型链继承
    • 借用构造函数继承
    • 组合继承(原型链继承 + 借用构造函数继承)
    • 原型式继承
    • 寄生式继承
    • 寄生组合继承(原型式继承 + 寄生式继承)

    相关文章

      网友评论

          本文标题:面试题 - vue/webpack

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