前端面试（每日更新）第八天

今天整理一下，笔试面试题

但愿能够和你们共勉

弹出什么结果

1. f = function(){return true};
   g = function() {return false};
   (function(){
     if(g && [] == ![]){  g && []->false    ![]-->false
       f = function f(){return false};
     }
   })();
   alert(f())  //  true or false ?
   //弹出 false控
   
   
   复制代码

   控制台输出什么

   var num = 10;
   var obj = {
     num:8,
     inner:{
       num:6,
       print:{
         console.log(this.num);
       }
     }
   }
   num = 888;
   obj.inner.print();  //6
   var fn = obj.inner.print;
   fn();  //888
   (obj.inner.print)(); //6
   (obj.inner.print = obj.inner.print)();  //888
   复制代码

   vue异步组件加载实现方式

• webpack代码分割。

  • component：resolve => require(['@/component/helloworld'],resolve);

• Vue官方文档：路由懒加载使用import('./Foo.vue') //返回promise

  简述Vue服务端渲染的解决方案

  nuxt.js是一个基于vue.js的通用应用框架，为node.js作vue作的服务端渲染提供了各类配置。

实现一个深复制的函数

function extend(src){
  let objClone = Array.isArray(obj) ? []:{};
  if(src && typeof obj === 'object') {
    for(key in src){
      if(src.hasOwnProperty(key)){
        //判断src子元素是否为对象，若是是，递归复制
        if(src[key] && typeof src[key] === 'object'){
          objClone[key] = deepClone(src[key]);
        }else {
          objClone[key] = src[key];
        }
      }
    }
  }
  return objClone;
}
复制代码

Vue经常使用的修饰符列举两个以上并描述做用

• .lazy

  在v-model后面加上.lazy会将input事件中的同步输入框的数据转变为在change事件中同步，这是数据就不会实时改变，而是在失焦或者按回车时才更新。

• .number

  使用.number能够将输入转换为Number类型，不然你输入的事数字，但它的类型实际上是string，在数字输入框中比较有用。

• .trim

  .trim修饰符能够自动过滤输入的首尾空格

指出下面的 .vue文件中的语法错误，并修改

<script>
export default {
  data(){},     //  data(){return{}}
  created:()=>{   //created () {this.start()}
    this.start();
  },
  methods:{
    start() {
      console.log('vue start')
      setTimeout(function(){
        this.end();
      },50);
    }
  },
  end(){
    console.log('setTimeout end');
  }
}
</script>
复制代码

vuex中mutation和action的区别

一、流程顺序

“相应视图—>修改State”拆分红两部分，视图触发Action，Action再触发Mutation。

二、角色定位

基于流程顺序，两者扮演不一样的角色。

Mutation：专一于修改State，理论上是修改State的惟一途径。

Action：业务代码、异步请求。

三、限制

角色不一样，两者有不一样的限制。

Mutation：必须同步执行。

Action：能够异步，但不能直接操做State。

Vue中如何监控obj.a的变化

Watch:{
  obj.a:funtion(){
    //do things
  }
}
复制代码

vue单页面应用的优缺点各两条

• 优势
  • 用户体验好，快，内容的改变不须要从新加载整个页面，基于这一点spa对服务器压力较小
  • 先后端分离
  • 页面效果比较炫酷
• 缺点
  • 不利于SEO
  • 初次加载时耗时多
  • 页面复杂度提升不少