2018年末遇到的前端面試題

時間 2019-11-24

標籤 2018年遇到端面試題简体版

原文原文鏈接

1.浮動：javascript

父級：overflow:hidden，float,position:relative-->塊級上下文（bfc）；css

子級：clear:both-->換行，須要高度。html

2.進制轉換：num.toString(n)--> 十轉 n ;parsInt(num,m) --> m 轉十； [1,2,3,4,5,6].map(parsInt) 注：小數會被忽略vue

有小數的話：java

// 進制轉換
function transform(num, from, to) {
    // 默認兩位參數，num  to,   num  from  to
    // 默認num 是 十進制
    !to?(to=from,from = 10):null;
    if (from > 1 && to > 1) {
        var intN = 0, floatN = 0;
        if (from != 10) {// 是十進制能夠省略處理
            var pow = Math.pow(10,15);
            floatN = Math.round((num - parseInt(num))*pow)/pow,
                intN = parseInt(num, from);// 整數能夠直接使用方法轉換
            // 小數轉10進制
            // 例如5進制  0.12345
            // res = 1*5^-1 + 2*5^-2 + ……
            var temp=0;
            floatN = floatN.toString();
            for(var i=2;i<floatN.length;i++){
                temp+=floatN[i]*(Math.pow(from,-i+1));
            }
            // console.log(temp);
            floatN = temp;
        }
        return +intN.toString(to)-(-floatN.toString(to));
    } else {
        return null;
    }
}

3.數組排序：sort():默認小--> 大 'hello word'.split('').sort().join(''); // dehlloorwnode

array扁平化：toString(),或者 join（）方法。react

當數字按由小到大排序時，9 出如今 80 以前，但由於（沒有指明 compareFunction），比較的數字會先被轉換爲字符串，因此在Unicode順序上 "80" 要比 "9" 要靠前。若是 compareFunction(a, b) 小於 0 ，那麼 a 會被排列到 b 以前webpack

// 轉載自：https://www.jb51.net/article/137788.htmlios

// 排序方法
function bubbleSort(array) {
    for (var a = 0; a < array.length; a++) {
        for (var b = a + 1; b < array.length; b++) {
            if ((array[a] - array[b]) > 0) {
                [array[a], array[b]] = [array[b], array[a]]
            }
        }
    }
    return array;
}

function chooseSort(array) {
    for (var a = 0; a < array.length; a++) {
        var min = a;
        for (var b = a + 1; b < array.length; b++) {
            if ((array[min] - array[b]) > 0) {
                min = b;
            }
        }
        if (a != min) {
            [array[min], array[a]] = [array[a], array[min]]
        }
    }
    return array;
}
//quickSort
function splitSort(array) {
    if (array.length < 2) {
        return array;
    } else {
        var left = [], right = [], mid = Math.floor(array.length / 2);
        mid = array.splice(mid, 1)[0];
        for (var i = 0; i < array.length; i++) {
            if ((array[i] - mid) > 0) {
                right.push(array[i])
            } else {
                left.push(array[i])
            }
        }
        var res = arguments.callee(left).concat([mid], arguments.callee(right));
        return res;
    }
}

function insertSort(array) {
    var index, current;
    for (var i = 1; i < array.length; i++) {
        index = i, current = array[i];
        index--;
        while (index > -1) {
            if (array[index] > current) {
                array[index + 1] = array[index];
                index--;
            } else {
                break;
            }
        }
        array[index + 1] = current;
    }
    return array;
}

function insertSort2(array) {
    var index, current;
    for (var i = 1; i < array.length; i++) {
        index = i, current = array[i];
        index--;
        while (index > -1) {
            if (array[index] > current) {
                // array[index+1] = array[index];
                index--;
            } else {
                break;
            }
        }
        current = array.splice(i, 1)[0];
        array.splice(index + 1, 0, current);
        // array[index+1] = current;
    }
    return array
}

function shellSort(array) {
    if (array.length < 2) {
        return array;
    }
    var len = array.length;
    for (var gap = Math.floor(len / 2); gap > 0; gap = Math.floor(gap / 2)) {
        for (var i = gap; i < len; i++) {
            for (var n = i - gap; n >= 0 && array[n + gap] < array[n]; n -= gap) {
                [array[n], array[n + gap]] = [array[n + gap], array[n]]
            }
        }
    }
    return array
}

function mergeSort(array) {
    function merge(left, right) {
        var res = [];
        while (left.length > 0 && right.length > 0) {
            if (left[0] > right[0]) {
                res.push(right.shift())
            } else {
                res.push(left.shift())
            }
        }
        return res.concat(left).concat(right)
    }

    function sort(array) {
        if (array.length == 1) {
            return array;
        }
        var mid = Math.floor(array.length / 2),
            left = array.slice(0, mid),
            right = array.slice(mid);
        return merge(sort(left), sort(right))
    }

    return sort(array);
}
//
| 排序算法 | 平均狀況         | 最好狀況   | 最壞狀況   |  穩定性 |(元素相同時可能會調換順序)
---------------------------------------------------------------
| 冒泡排序 |  O(n²)          |  O(n)     |  O(n²)    |  穩定  |
---------------------------------------------------------------
| 選擇排序 |  O(n²)          |  O(n²)    |  O(n²)    |  不穩定 |
---------------------------------------------------------------
| 插入排序 |  O(n²)          |  O(n)     |  O(n²)    |  穩定   |
---------------------------------------------------------------
| 希爾排序 |  O(nlogn)~O(n²) |  O(n^1.5) |  O(n²)    |  不穩定 |
---------------------------------------------------------------
| 歸併排序 |  O(nlogn)       |  O(nlogn) |  O(nlogn) |  穩定   |
---------------------------------------------------------------
| 快速排序 |  O(nlogn)       |  O(nlogn) |  O(n²)    |  不穩定 |
---------------------------------------------------------------

4.頁面通信：1.window.postMessage(IE8+),解決跨域通信； 2. localStorage方法：監聽window 的 storage事件css3

如下6個屬性設置在容器上:
 flex-direction:row | row-reverse | column | column-reverse;
 flex-wrap: nowrap | wrap | wrap-reverse;
 flex-flow: direction wrap 
 justify-content:flex-start | flex-end | center | space-between | space-around;
 align-items: flex-start | flex-end | center | baseline | stretch;
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
               //定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用

如下6個屬性設置在項目上:
    order: 定義項目的排列順序。數值越小，排列越靠前，默認爲0。
    flex-grow: 定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。
    flex-shrink
    flex-basis: 定義了在分配多餘空間以前，項目佔據的主軸空間（main size）
    flex: 是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
               //容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性

6.優化：

1.代碼寫法：委託時間，dom操做，css js位置, css替代簡單圖片,css3替代js動畫;

2.延時加載：img lazyloading,用戶交互在異步加載資源；

3.緩存：304不穩定；手動緩存localstorage : css,js,ajax數據

服務器設置緩存：cache-control / expires, last-modified（if-modified-since）/ETag( if-none-match )

通常狀況下，使用Cache-Control/Expires會配合Last-Modified/ETag一塊兒使用，由於即便服務器設置緩存時間, 當用戶點擊「刷新」按鈕時，瀏覽器會忽略緩存繼續向服務器發送請求，這時Last-Modified/ETag將可以很好利用304，從而減小響應開銷。Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的惟一標識符，可以更加準確的控制緩存。Last-Modified與ETag是能夠一塊兒使用的，服務器會優先驗證ETag，一致的狀況下，纔會繼續比對Last-Modified，最後才決定是否返回304。

localstorage:兼容>7; 瀏覽器大小限制5M左右（相比cookie 4 K 左右）；

用處：頁面數據保存，如list數據，表單數據( onload取出數據，beforeunload保存數據，submit刪除保存數據 )

4.編譯處理：css,js，img 壓縮圖片（jpg,png: png效果好，但size大，優選jpg，base64,），requireJS,webpack 按需加載；設置favicon.ico圖標；

5. 服務器：Gzip,CDN加速，合併請求

gzip：兼容IE6+;只需後端開啓gzip,response-header添加 content-Encoding:gzip（通常用於html,css,js,其餘資源如圖片視頻音頻文件都已經壓縮過，無需再次壓縮。壓縮須要佔用資源和時間，需權衡利弊）

6. css優化： a. 避免內聯樣式，改成css文件 : 利於維護，方便複用，能夠緩存

b. css統一放在head中，減小repaint和reflo :

c. 避免使用通配符，標籤選擇符，及多級嵌套：不夠精確，

d. css匹配規則從右到左：性能更高，是由於從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點(葉子節點);而從左向右的匹配規則的性能都浪費在了失敗的查找上面。因此右側選擇儘可能精確。

e. css繼承：color，font-size，font-family等屬性能夠繼承自父節點。

f. 權重：

  !important        style=''     id         class/attribute /僞類          elements /僞元素

    最高               1000       100               10                         1      

 權重比較：同等級的選擇能夠累加，可是不會越級，好比：ID大於11個class選擇。

 樣式最終決定於style中的樣式順序，而不是class中類名的順序，好比：
 <style>
     .red {color:red}  
     .blue{color:blue}
</style>
<div class="red blue"></div>  // blue
<div class="blue red"></div>  // blue

（參考：https://www.cnblogs.com/walls/p/4263463.html）

( 關於優化的文章：https://www.jianshu.com/p/2818f6dcbf23 )

7.循環優化：for(以及倒序) , while , for in , foreach ,Buff's Device

當數據量小時，不用擔憂方法的性能問題，當數據量增大後，性能優劣即顯示出來：

Buff's Device > while > for ~ forEach > for in(很慢，不是一個數量級)

達夫設備：經過減小循環次數，適度增長每次循環的運算來提升性能。（在老瀏覽器中效果顯著。當循環中的運算已經很複雜了，優化效果將下降）

（參考：https://www.cnblogs.com/libin-1/p/6964591.html）

7.兼容性問題：

1.focus: ios下觸發必須爲用戶交互事件。

2.定位fixed（ios8如下系統）：

a. content內容區域定位並添加滾動替代頁面滾動（-webkit-overflow-scroll: touch,改善效果），底部也就不用fixed

b. 在輸入控件獲取焦點時，改變控件的屬性：fixed-->absolute,並計算定位

3.虛擬鍵盤遮擋：scrollIntoView();

4.300ms延遲：fastClick,zepto,

5.點擊態：pc正常，移動端需加上 ontouchstart 事件;

6.微信識別二維碼：ios常常出問題。（絕對定位，top高度，同一屏內不要出現兩個二維碼，二維碼尺寸不能過小，設置一個大的二維碼且透明）

8.cookie操做：（https://blog.csdn.net/liuyingv8/article/details/80257145）

1.只可賦值，刪除是經過設置過時事件。

2.過時事件以服務器事件爲準，通常爲標準時間。

3.httpOnly：服務器經過設置此值，防止客戶端修改此cookie,此cookie將不會再document.cookie中顯示，可是仍會隨着請求發送。

4.secure: 安全標誌，指定後，只有在使用SSL連接時候才能發送到服務器，若是是http連接則不會傳遞該信息

注：當cookie禁用後，經過對url重寫使用sessionId(怎麼實現呢？？)

(function (window,undefined) {
 //輸入cookie信息時不能包含空格，分號，逗號等特殊符號;而在通常狀況下，cookie 信息的存儲都是採用未編碼的方式。因此，在設置 cookie 信息之前要先使用escape()函數將 cookie 值信息進行編碼，在獲取到 cookie 值得時候再使用unescape()函數把值進行轉換回來:escape(value),  unescape(value),ECMAScript v3 已從標準中刪除了 unescape() 函數，並反對使用它，所以應該用 decodeURI() 和 decodeURIComponent() 取而代之。

 function MyCookie() { 
   this.constructor = {};
 }

 MyCookie.prototype = {
    hours8: 8 * 3600 * 1000, 
    // 事件設置也能夠直接使用toUTCString();  (new Date()).toUTCString() 
    get: function (name) { 
         var cookie = document.cookie; 
         var regx = eval('/(^|;)' + name + '=([^;]{1,})' + '(;|$)/');
         var res = regx.exec(cookie); 
         return res && res[2] 
    },
    get2: function (name) {
         var cookie = document.cookie; 
         var regx2 = new RegExp('(^|;)' + name + '=([^;]{1,})' + '(;|$)');
         var res = regx2.exec(cookie); 
         return res && res[2] 
    },
    set: function (name, value, expires) { 
         var str = ''; 
         str += name + '=' + value;
         var date = new Date(new Date() - this.hours8 + (expires || 0) * 24 * 3600 * 1000);
       //var date = new Date(new Date() + (expires || 0) * 24 * 3600 * 1000).toUTCString();
         str += expires ? (';expires=' + date) : '';
         document.cookie = str;
   },
   delete: function (name) {
        var str = '';
        str += name + '=' + '1';
        var date = new Date(new Date() - this.hours8 - 5000); 
      //var date = new Date(new Date() - 5000).toUTCString(); 
        expires=' + date;
        document.cookie = str;
  }
 };

 window.MyCookie = new MyCookie();

})(window)

9. React：

a.事件：react實現了本身的一套事件機制，冒泡，捕獲。因此的react事件（e事件對象，合成對象解決了瀏覽器的兼容）都會冒泡至document中,並在此處理。事件對象屬於公用，當異步獲取合成對象時，可能獲得NUll或者其餘事件的對象。

阻止冒泡：e.stopPropagation;獲取原生事件對象：e.nativeEvent（注：不要在頁面中使用原生的阻止冒泡方法）

b.組件間通信：

1.父子組件通信：傳遞參數和回調函數。多級嵌套組件通信也能夠層層傳遞，可是較繁瑣。兄弟組件通信能夠選擇公共父類組件作中轉（a-->b, b-->c）

2.發佈訂閱模式：自定義事件，並自行監聽和觸發，最是方便。使用 node中的Event對象,寫法很相同。（記得先安裝Event包，參考使用方法：http://www.runoob.com/nodejs/nodejs-event.html）

自定義事件： index.js

function Event(){
    this.handles={};
} 

Event.prototype={

    constructor:Event,

    addEventListener:function(eventName,fn){
        if(this.handles[eventName]){
            this.handles[eventName].push(fn);
        }else{
             this.handles[eventName]=[fn]; 
        }
    },

    emitter:function(eventName){
        if(this.handles[eventName]){
          // this.handles[eventName].map(item=>item())
          for(var i=0;i<this.handles[eventName].length;i++){
              this.handles[eventName][i]();
          }
        }
    }

    removeEventListener:function(eventName,fn){

         if(!this.handles[eventName])return ;
                            
         if(fn){
            var list = this.handles[eventName];

            for(var i=0;i<list.length;i++){
               if(list[i]==fn){
                  list.splice(i,1);
                  i--;  // 通常遍歷集合時，是不能同時修改集合自己的，避免循環出錯（漏掉，重複遍歷某個元素，死循環等）
               }
            }
         }else{
            this.handles[eventName]=[];   // 不傳遞參數，默認解除全部監聽
         }

    }
}

3.context:是個全局對象，能夠將須要傳遞的信息放在上面，可是全局對象維護起來很麻煩。官方也不推薦使用（我也沒用過）

c.ref:

d.週期：

（詳細介紹轉載：https://blog.csdn.net/javaexploreroooo/article/details/71244808）

e. 優化：

1.render:在render中儘可能少的定義變量和綁定函數（特別是不常常改變的變量），最好在constructor中作這些操做(由於constructor中的定義只會定義一次，而render)。

2.shouldComponentUpdate（nextProps,nextState）:在此處判斷，返回false以優化（return nextProps.name!==this.props.name），特別是做爲list列表項中的子組件特別注意。

3.PureComponent:使用PureComponent替代Component能夠達到2中的效果。

（注：PureComponent對比的都是淺對比，因此pros,state要儘可能扁平化，不要嵌套）

4.list渲染：渲染list時，經過key 屬性做爲惟一辨識，因此同一個item的key值應不變化；key值通常以id 等做爲惟一標識，不要用 index 索引

f:虛擬dom，diff比較：內存虛擬dom能夠快速的比較出差別；能夠合併一個週期的屢次變化；diff在同級中比較，將時間複雜度下降O(n3) --> O(n)

10.js綁定事件：

1.行內綁定，div.onclick=function(){} 這兩種效果相同，後面的方法會覆蓋掉前面定義的方法。

2.addEventListener（name,fun,boolean）: 參數三：true:捕獲階段實行； false(默認)：冒泡階段執行

冒泡，捕獲(阻止冒泡後，上層綁定的此類型事件將再也不觸發)，響應的頂級標籤是 html

11.綜合：

  function Foo(){
     getName=function(){alert(1)}
     return this;
  }

  Foo.getName=function(){alert(2)}

  Foo.prototype.getName=function(){alert(3)}

  var getName = function(){alert(4)}

  function getName(){alert(5)}


  //執行結果：
  Foo.getName()        // 2

  getName()            //4

  Foo().getName()      //1

  getName()            //1

  new Foo.getName()    //2

  new Foo().getName()  //3

  new new Foo().getName()  //3

12:佈局

垂直水平居中方法：

a.flex佈局：父級：display:flex; justify-content:center; align-items:center;
      （最完美的方法，處兼容性外>IE9）
    b.position: display:absolute ; left,right,top,bottom:0 ; margin: auto;width:100px;
      (寬高度需固定，否則鋪滿整個頁面)
    c.translate:display:absolute; left,top:50%;  translate(-50%,-50%);
      (兼容>IE8)
    (注：margin,padding的百分比參照的是父級元素);(在考慮兼容性的狀況下，僅僅經過css是沒法作到水平垂直居中的（除非寬度肯定），不然必須加入js判斷；參照多數彈框寫法，通常都會指定默認寬度)
    d.table佈局：parent: display:table
                content:display:table-cell ; vertical-align:middle;               

    （注：塊級元素的垂直相鄰外邊距會合並（不包括浮動和絕對定位元素 ），而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。一樣地，浮動元素的外邊距也不會合並。容許指定負的外邊距值，不過使用時要當心。）

table中thead滾動：

table {       
            width: 500px;
        }
        table thead {
            display: table;
            width:100%;
        }
        table tbody {
            display: block;
            height: 195px;
            overflow-y: scroll;
        }
        tbody tr {
            display: table;
            width: 200%;
            /*table-layout: fixed;*/
        }

13.css實現三角：

width:0;height:0; 
  border-bottom:100px solid red;
  border-left:50px solid transparent;
  border-right:50px solid transparent;

14. slice , splice區別,substr,substring區別：

數組方法： 
 slice(start,end[可省略])；索引start 至end(不包括)的值； 

        start能夠爲負（倒序）；不改變原數組，返回副本

  splice(index,howmany,item1,.....,itemX) 向/從數組中添加/刪除項目，而後返回被刪除的項目。

        改變原數組

字符串方法：  
  substring(start,end[可省略])；     //返回副本

  substr(start [,length])          //返回副本 ,(substr 短小精悍，start  居然還能接受負數，返回末尾的start位)

  slice(start,end); 同數組
  (slice能夠轉換數組： [].slice.call(arguments,0) 或者 Array.prototype.slice.call(arguments,0))

15.apply,call,bind 區別，應用場景？

call，apply和bind都是Function原型中的方法，而全部的函數都是Function的實例   

   .call(obj,argu1,argu2 ...)
   .apply(obj,[argu1,argu2 ...])
   .bind(obj,argu1,argu2 ...)    //返回這個函數，this已變
   call的性能優於apply;
   模式區別：
     嚴格模式：當obj爲null，undefined, 無參 時，this爲： null ，undefined  ，空； 與obj徹底同樣
     非嚴格模式：obj爲null，undefined， 無參 時，this爲：window

   使用場景：
          1.實現繼承  
          2.用於借用某些構造函數的方法，好比：({}).toString.call(obj,arguments), [].slice.call(arr,arguments)

   自定義call函數：
         Function.prototype.mycall=function (context) {
 
             context = context|| window;
             context.fn = this;    //this指向調用方法的環境，this便在此改變
             var result,args = [...arguments];
             args.splice(0,1);
             result = context.fn(...args);
             delete context.fn;
             return result;
         };

16.es6屬性：

1.class:類
     JS自己就是面向對象的，ES6中提供的類實際上只是JS原型模式的包裝。如今提供原生的class支持後，對象的建立，繼承更加直 
     觀了，而且父類方法的調用，實例化，靜態方法和構造函數等概念都更加形象化
     (https://blog.csdn.net/pcaxb/article/details/53759637)

   2.箭頭操做符：=>

   3.字符串模板:
     ES6中容許使用反引號 ` 來建立字符串，此種方法建立的字符串裏面能夠包含由美圓符號加花括號包裹的變量${vraible}
     console.log(`your num is ${num}`);

   4.結構賦值:
     自動解析數組或對象中的值:[name,,age]=['wayou','male','secrect'];//數組解構

   5.function 的默認參數,rest參數：
     function test(name='123'){console.log(name)}
     test(1,2,3) function test(...name){console.log(name)}

   6.let , const 關鍵字：

   7.for of :用於遍歷數組，類數組或對象,每次循環它提供的是值。
     (for in 功能相同，每次循環提供的是鍵或索引)

   8.promise

17. 複製，引用：深拷貝就是對目標的徹底拷貝，不像淺拷貝那樣只是複製了一層引用，就連值也都複製了

a.Object.assign(target,source...)
       只是一級屬性複製，比淺拷貝多深拷貝了一層而已。 針對深拷貝，須要使用其餘方法，由於 Object.assign()拷貝的是屬性值。假如源對象的屬性值是一個指向對象的引用，它也只拷貝那個引用值。

    b.concat, slice方法：返回新的數組
      只對第一層深複製，同上

    c.JSON:  JSON.parse(JSON.stringify(obj))
      能夠達到深拷貝的效果； 可是會丟失一些屬性：當值爲 undefined，function時，會忽略

    (最好的方法：自定義方法，遞歸， Object.prototype.toString.call(value)(若是用typeOf的話，Date也是對象，判斷不夠精確,符合遍歷的對象暫時考慮到：object,array,set);for in ; ; Object.hasOwnProperty )

18. axios與ajax的區別:

axios優勢：axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，

從 node.js 建立 http 請求
支持 Promise API
提供了一些併發請求的接口（重要，方便了不少的操做）
攔截請求和響應
轉換請求和響應數據
取消請求
自動轉換JSON數據
客戶端支持防止CSRF/XSRF

19.sass,less區別：

sass/scss  (scss相似less,使用{},而不用縮進)     less

定義變量：           $                                           @ 
引用父選擇符：        &                                           &
混入屬性集建立：  @mixin name($amount) {}                   .className(@amount){}  //能夠定義多個，判斷參數使用
混入屬性集使用：  @include name(0.5em)                      .className(@amount){}
繼承：          @extend .className
註釋：                                      /**/ ;  //
導入文件：                                @import font.scss
顏色運算：                                                    lighten，darken ,fadein,fadeout,fade,mix
js運算：                                    經常使用js運算


(SCSS 是 Sass 3 引入新的語法，其語法徹底兼容 CSS3，而且繼承了 Sass 的強大功能。另外，SCSS 還能識別大部分 CSS hacks（一些 CSS 小技巧）和特定於瀏覽器的語法，例如：古老的 IE filter 語法。只須要理解 Sass 擴展部分如何工做的，就能徹底理解 SCSS。惟一不一樣的是，SCSS 須要使用分號和花括號而不是換行和縮進。 )

20.Vue:

1.雙向數據綁定：利用 Object.defineProperty(obj,name,{options});

options有如下4個特性：

1.Configurable: 可否用delete刪除屬性從而從新定義屬性。默認true

2.Enumerable: 可否經過for-in遍歷，便是否可枚舉。默認true

3.get: 讀取屬性時調用的函數，默認undefined

4.set: 寫入屬性時調用的函數，默認undefined

（優勢：數據變化採用發佈訂閱模式，性能優於react的setState方法，由於react中即便數據沒有變化，當執行了方法後依然會從新渲染，因此爲了優化性能，須要在shouldComponentUpdate中判斷是否從新渲染。）

2. vue2.0:開始映入虛擬dom概念

3.computed 和 method方法的區別：

1. vue數據支持在行內進行簡單的計算，但當計算方式複雜時，可能沒法知足要求，而且不利於維護，所以須要對數據進行處理。二者在處理結果上是同樣的。

2. computed是基於它的依賴緩存，只有相關依賴發生改變時纔會從新取值；methods在從新渲染的時候，函數總會從新調用執行。因此使用computed會比methods方法性能更好。

4.數據監聽：vue使用$watch方法監聽某個數據；（react可在componentWillRecieveProps或者在shouldComponentUpdate方法中判斷）

5. 周期函數：

6. 頁面回退頁面刷新：當頁面回退時，頁面刷新，並從新請求數據。

避免方法：

vue: 首先是要 keep-alive組件處理，是Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。而後手動將頁面滾動到指定位置。（參考：https://blog.csdn.net/leileibrother/article/details/79376502）

react: react中沒有keep-alive概念，只能本身實現；將狀態保存至本地，回退時判斷是否有本地保存，有則直接使用緩存。

21. 小程序：

1. 週期：

onLoad: 頁面加載。
1)一個頁面只會調用一次。
2)參數能夠獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow: 頁面顯示
1)每次打開頁面都會調用一次。
onReady: 頁面初次渲染完成
1)一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互。
2)對界面的設置如wx.setNavigationBarTitle請在onReady以後設置。詳見生命週期
onHide: 頁面隱藏
1)當navigateTo或底部tab切換時調用。
onUnload: 頁面卸載
1)當redirectTo或navigateBack的時候調用。