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

今天整理一下，筆試面試題

但願能夠和你們共勉

彈出什麼結果

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
  • 初次加載時耗時多
  • 頁面複雜度提升不少