vue

• vue中v-if和v-for的優(yōu)先級(jí)那個(gè)更高，應(yīng)該怎么優(yōu)化提升性能
  1、在vue2.x中v-for的優(yōu)先級(jí)高
  2、可以將v-if寫到v-for的外面，也可以將數(shù)據(jù)在computed計(jì)算屬性中進(jìn)行過(guò)濾，在循環(huán)計(jì)算方法就可以了
  3、在vue3.x中v-if的優(yōu)先級(jí)更高

• vue中data為什么必須是函數(shù)，而vue根實(shí)例是對(duì)象

  
  
  image.png
  
  

  1、組件中data要不是一個(gè)函數(shù)的話，那么會(huì)進(jìn)行報(bào)錯(cuò)
  2、在多實(shí)例的時(shí)候，保護(hù)狀態(tài)不被污染，干擾
  3、函數(shù)的話，可以讓我們每次調(diào)用組件都會(huì)創(chuàng)建一個(gè)新的data實(shí)例
  4、要是對(duì)象的話，組件調(diào)用多次，改變一個(gè)，都會(huì)進(jìn)行改變觸發(fā)，導(dǎo)致狀態(tài)會(huì)被污染，干擾
  5、根實(shí)例跟組件不一樣，是單例，每次new vue只會(huì)創(chuàng)建一次

• vue中key的作用和工作原理

  
  
  image.png
  
  

  1、key的作用主要是高效的更新虛擬dom，通過(guò)key可以精準(zhǔn)的判斷兩個(gè)節(jié)點(diǎn)是否是同一個(gè)，要是沒(méi)有加key的話，會(huì)認(rèn)為是相同的，從而進(jìn)行強(qiáng)制的更新，導(dǎo)致多做一個(gè)dom的更新，消耗性能
  2、不加的話，會(huì)觸發(fā)一些隱蔽的bug，還有不加的話，會(huì)報(bào)錯(cuò)
  3、vue中使用相同標(biāo)簽名元素過(guò)渡切換的時(shí)候，也會(huì)使用到key的屬性，目的就是為了讓vue可以區(qū)分他們，否則vue只會(huì)替換內(nèi)部屬性，而不會(huì)觸發(fā)過(guò)渡效果

• 你怎么理解vue中的diff算法（需要看看課程中，對(duì)diff算法更深的理解）
  1、必要性，為了降低組件的watcher，一個(gè)組件一個(gè)watcher，所以要是用diff
  2、深度優(yōu)先，同層比較（先從根找，有孩子往下找，有的話，繼續(xù)，沒(méi)有的話，同層比較，之后在看父節(jié)點(diǎn)的，另一邊有沒(méi)有子節(jié)點(diǎn)，有往下找，沒(méi)有同層比較）

• vue組件化的理解
  1、高內(nèi)聚、低耦合，提升代碼的健壯性
  2、有屬性props，自定義事件，插槽等，用于組件通信，擴(kuò)展等
  3、可復(fù)用性
  4、全局組件和局部組件

• MVVM
  1、解決model和view耦合的問(wèn)題
  2、model發(fā)生改變會(huì)自動(dòng)更新view，減少dom操作，提高開發(fā)效率，可讀性還保持了優(yōu)越的性能表現(xiàn)

• vue性能優(yōu)化有哪些？
  1、路由懶加載
  2、keep-alive進(jìn)行緩存頁(yè)面
  3、v-show和v-if合理的使用
  4、大數(shù)據(jù)列表，使用虛擬滾動(dòng)列表（vue-virtual-scroll，vue-virtual-scroll-list）
  5、有定時(shí)器的，組件頁(yè)面銷毀前進(jìn)行清除
  6、圖片的懶加載
  7、第三方UI組件庫(kù)的按需引入
  8、將無(wú)狀態(tài)的UI組件可以標(biāo)記為函數(shù)式組件，在template標(biāo)簽上添加functional就可以了
  9、組件中的方法進(jìn)行調(diào)用多次的時(shí)候，使用變量將方法進(jìn)行保存，這樣調(diào)用多次的時(shí)候，我們只用了這一次的方法

• vue3.0的新特性了解
  1、更快：虛擬dom的重寫，優(yōu)化slots的生成，靜態(tài)樹的提升，靜態(tài)屬性的提升，proxy響應(yīng)式系統(tǒng)
  2、更?。簱u樹優(yōu)化
  3、更容易維護(hù)：ts+模塊化
  4、composition Api

• vuex的使用及其理解
  1、模塊

  state mutations getters action modlues(namespace)

• vue 組件之間的通信方式
  1、props
  2、on
  3、parent
  4、provide/inject
  5、listeners
  6、ref
  7、$root
  8、eventbus
  9、 vuex

  • vue-router保護(hù)路由的安全
    1、獲取組件實(shí)例只有組件內(nèi)守衛(wèi)可以進(jìn)行獲取到，全局守衛(wèi)，路由獨(dú)享都是獲取不到的

    
    
    image.png
    
    

    2、觸發(fā)順序

    
    
    image.png

• vue響應(yīng)式的理解
  1、通過(guò)數(shù)據(jù)響應(yīng)式加上虛擬DOM和patch算法，可以使我們只需要操作數(shù)據(jù)就可以達(dá)到更新視圖，完全不需要操作dom，從而大大提升開發(fā)效率，降低開發(fā)難度
  2、vue2中的數(shù)據(jù)響應(yīng)式機(jī)制會(huì)根據(jù)類型來(lái)進(jìn)行不同的處理，如果是對(duì)象的話，使用Obiect.defineProperty()的方式定義數(shù)據(jù)的攔截和響應(yīng)，如果是數(shù)組的話，通過(guò)覆蓋數(shù)組原型的方法，擴(kuò)展他的7個(gè)變更方法，使這些方法額外的做更新通知，可以很好的解決了數(shù)據(jù)響應(yīng)式的問(wèn)題，但是也有一些缺點(diǎn)：比如初始化時(shí)遞歸 遍歷時(shí)會(huì)造成性能損失，新增或者是刪除屬性時(shí)需要使用vue.set/delete這樣的api才能生效，對(duì)于es6的新增map,,set結(jié)構(gòu)不支持等問(wèn)題
  3、為解決這些問(wèn)題，vue3中利用es6的proxy機(jī)制代理響應(yīng)化的數(shù)據(jù)，不在需要使用vue.set/delete等api，初始化性能和內(nèi)存消耗都得到了大幅改善，另外將響應(yīng)式的代碼單獨(dú)抽離為獨(dú)立的reactivity包，可以讓我們更加靈活的使用他，我們甚至不要要引入vue就可以進(jìn)行體驗(yàn)

• vue的雙向數(shù)據(jù)綁定原理
  1、首先通過(guò)object.defineProperty()來(lái)設(shè)置和讀取數(shù)據(jù)
  2、通過(guò)監(jiān)聽器Observe監(jiān)聽所有的屬性，如果屬性發(fā)生變化了，就需要告訴訂閱者是否更新，因?yàn)橛嗛喺哂泻芏?，此時(shí)我們需要Dep專門進(jìn)行收集訂閱者，然后對(duì)監(jiān)聽器Objserve和watcher之間進(jìn)行統(tǒng)一的管理
  3、當(dāng)watcher接收到相應(yīng)的屬性變化，就會(huì)進(jìn)行更新對(duì)應(yīng)的函數(shù)

es6的語(yǔ)法總結(jié)

• 深淺拷貝
  1、引用類型的數(shù)據(jù)直接賦值就是淺拷貝
  2、基本數(shù)據(jù)類型直接賦值是深拷貝
  3、使用Object.prototype.toString.call()可以檢測(cè)到當(dāng)前數(shù)據(jù)類型，適用于所有數(shù)據(jù)類型的檢測(cè)，返回'[objec Object]','[objec Array]','[objec String]' 等
  4、也可以使用Object.getPrototypeOf()進(jìn)行檢測(cè)出當(dāng)前的數(shù)據(jù)是對(duì)象還是數(shù)組
  5、使用Object.create()，創(chuàng)建出的對(duì)象或者是數(shù)組，都是將對(duì)方的屬性，方法放到了原型上，沒(méi)有這個(gè)屬性可以直接從原型上獲取，有的話就不會(huì)再使用原型中的屬性值
  6、如果是對(duì)象的話，可以使用Object.assign()進(jìn)行克隆，但是，當(dāng)前的對(duì)象有多層，也就是說(shuō)對(duì)象中還有對(duì)象或者是數(shù)組，那么里面的對(duì)象或者數(shù)組就是淺拷貝
  7、擴(kuò)展運(yùn)算符跟6是一樣的，單層是深拷貝，多層嵌套就是淺拷貝了
  8、如果是數(shù)組的話，可以使用數(shù)組中的方法concat，slice等方法，也可以使用Object.assign(),擴(kuò)展運(yùn)算符，情況跟6一樣

• 函數(shù)的變量提升
  1、函數(shù)的變量提升優(yōu)先于變量的提升

   function test(a,b){
      console.log(a);//function a(){}
      var a=10;
      function a(){}
      console.log(a);//10
      function c(){}
      console.log(b);//undefined
      var b=function b(){}
      console.log(b)//function b(){}
   }
   test(1);
   var a=121;
   console.log(a);//121
   /**
    * 函數(shù)的變量提升：
    *     1、函數(shù)的變量提升比變量的提升優(yōu)先級(jí)高，在變量的前面
    *     2、找形參和變量，相同的只需要一個(gè)就可以了，值為undefined
    *         a:undefined   b:undefined
    *     3、將實(shí)參和形參統(tǒng)一
    *         a:1  b:沒(méi)有傳遞實(shí)參，值為undefined
    *     4、在函數(shù)中找函數(shù)，將值賦值給函數(shù)體
    *         a:function a(){}  b:由于函數(shù)中的b是字面量函數(shù)，所以值還是undefined
    *     5、在函數(shù)的內(nèi)部開始運(yùn)行
    *         a:function a(){}----10
    *         b:undefined-----function b(){}
   */

      var a = 10 ;
      function a(){
          console.log(a);//function a(){}
          a=20;
          function a(){}
          console.log(a)//20
      }
      a();
      console.log(a)//10

      a = 20;
      var a = 10;
      console.log(a);//10  本來(lái)a是全局變量20，然后下面有聲明了一下，a=10；所以最終輸出為10

• 字符串模板
  1、可以進(jìn)行簡(jiǎn)單的運(yùn)算
  2、比字符串拼接好使

 // todo 字符串模板的使用
    const a = 1;

    const b = 2;

    const c = `${a+b}`

    console.log(c);//3

    const d = 18;

    const e = `小明今年$u0z1t8os歲`

    const f = '小明今年'+d+'歲'

    console.log(e);//小明今年18歲

    console.log(f);//小明今年18歲

• 判斷當(dāng)前是否有這個(gè)字符串

 // 判斷當(dāng)前是否有這個(gè)字符串

    const str = '我現(xiàn)在正在練習(xí)es6';

    const str1 = '現(xiàn)在'

    const str2 = '我'

    const str3 = 'es6'

    if(str.indexOf(str1)>-1) console.log('indexOf有返回當(dāng)前下標(biāo)，沒(méi)有返回-1---',str.indexOf(str1));//indexOf有返回當(dāng)前下標(biāo)，沒(méi)有返回-1

    if(str.includes(str1)) console.log('includes有返回true，沒(méi)有返回false---',str.includes(str1));//includes有返回true，沒(méi)有返回false

    if(str.startsWith(str2)) console.log('startsWith頭部有返回true，沒(méi)有返回false---',str.startsWith(str2));//startsWith頭部有返回true，沒(méi)有返回false

    if(str.endsWith(str3)) console.log('endsWith尾部有返回true，沒(méi)有返回false---',str.endsWith(str3));//endsWith尾部有返回true，沒(méi)有返回false

• 字符串重復(fù)多次的寫法(復(fù)制字符串)

// 字符串重復(fù)多次
        const str = '重復(fù)我10次'
        console.log(str.repeat(10));//重復(fù)我10次重復(fù)我10次重復(fù)我10次重復(fù)我10次重復(fù)我10次重復(fù)我10次重復(fù)我10次重復(fù)我10次重復(fù)我10次重復(fù)我10次
        let str1 = ''
        for (let i = 0; i < 10; i++) {
           str1+=str;
        }
        console.log(str1);

• Array.from()
  1、可以將對(duì)象轉(zhuǎn)化為數(shù)組

// 使用Array.from()，將對(duì)象轉(zhuǎn)化為數(shù)組
    const obj = {
        0:'key要是用數(shù)字',
        1:'必須有l(wèi)ength這個(gè)屬性，否則轉(zhuǎn)化不了',
        length:2
    }

2、可以將偽數(shù)組轉(zhuǎn)化為數(shù)組
3、可以將set,map，string等數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)化為數(shù)組
4、第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，相當(dāng)于數(shù)組的map方法，返回一個(gè)新的數(shù)組，將第一個(gè)參數(shù)中的數(shù)據(jù)進(jìn)行處理

• Array.of
  1、這個(gè)方法不管你是什么數(shù)據(jù)和類型，都會(huì)創(chuàng)建一個(gè)新的數(shù)組
  2、當(dāng)我們使用new Array(10);進(jìn)行聲明的時(shí)候，這個(gè)時(shí)候數(shù)組的長(zhǎng)度是10，在進(jìn)行傳遞參數(shù)的時(shí)候，就會(huì)產(chǎn)生一些問(wèn)題

    const arr = new Array(10);

    console.log(arr);//[empty × 10]

    arr.push(20);

    console.log(arr);//[empty × 10, 20]

3、此時(shí)代碼中的數(shù)組長(zhǎng)度就是11了，在添加的時(shí)候，前面都是10個(gè)空的
4、而我們使用Aarray.of就可以解決上面的問(wèn)題了

   const arr = Array.of(10);

    console.log(arr);//[10]

    arr.push(20);

    console.log(arr);//[10, 20]

• Array.fill()填充

 let arr =[1,2,4,5,6,7];

     arr.fill(10);//一個(gè)參數(shù)默認(rèn)將數(shù)組中的數(shù)據(jù)全部改變?yōu)?0

    //第一個(gè)參數(shù)是填充的參數(shù)，第二個(gè)參數(shù)是填充的位置，第三個(gè)下標(biāo)是填充的個(gè)數(shù)，從下標(biāo)0開始算起
    //  只能是數(shù)組內(nèi)的長(zhǎng)度，不能超過(guò)數(shù)組內(nèi)的下標(biāo)或者是長(zhǎng)度，
     arr.fill('3',0,1);//["3", 2, 4, 5, 6, 7]

     arr.fill('3',1,2);//----[1, "3", 4, 5, 6, 7]

     arr.fill('3',1,4);//---- [1, "3", "3", "3", 6, 7]，第三個(gè)參數(shù)是4個(gè)但是從下標(biāo)1開始填充，又是從0開始計(jì)算

    console.log(arr);

• 判斷對(duì)象或者是數(shù)組中是否有某個(gè)值
  1、對(duì)象中的檢測(cè)某個(gè)屬性使用in或者是object.hasOwnProperty()都可以檢測(cè)，但是in是從對(duì)象的原型和原型鏈上查找，不太推薦使用

 let obj = {
        id:1,
        title:'1111'
    }

    console.log('id' in obj);

    console.log(obj.hasOwnProperty('id'));

    let arr =[1,2,4,5,6,7];

    console.log( 1 in arr);

    console.log(arr.indexOf(1)>-1);

    console.log(arr.includes(1));

    const index = arr.findIndex(item=>item===1)
    console.log(index!==-1)

    ....

• object.is()對(duì)象比較

 let obj = {id:1,title:'1111'};

    let obj2 = {id:1,title:'2222'};

    console.log(obj.id === obj2.id);//true

    console.log(Object.is(obj.id,obj2.id));//true

• objec.is和===區(qū)別
  1、===為同值相等，is()為嚴(yán)格相等

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

• reduce簡(jiǎn)單的計(jì)算及數(shù)組去重

    //reduce 簡(jiǎn)單的計(jì)算，第一個(gè)參數(shù)是我們傳遞的初始值，莫有的話，默認(rèn)是數(shù)組的第一個(gè)數(shù)
    //reduce 第二個(gè)參數(shù)是數(shù)組中的每一項(xiàng)
    //reduce 第三個(gè)參數(shù)是數(shù)組本身

 let arr = [1,1,1,1,2,2,3,4,5,5,6,7,8,9];
    // 計(jì)算出現(xiàn)的次數(shù)
    let arr1 = arr.reduce((pre,next)=>{
        if(next in pre){//可以將in替換為hasOwnProperty()
            pre[next]+=1;
        }else{
            pre[next] = 1;
        }
        return pre
    },{})
    console.log(arr1);//返回的是對(duì)象
    arr1.length = 10;//給當(dāng)前的對(duì)象添加一個(gè)length屬性，可以轉(zhuǎn)化為數(shù)組
    console.log(Array.from(arr1));

    // 數(shù)組去重
    let arr = [1,1,1,1,2,2,3,4,5,5,6,7,8,9];

    // 使用雙循環(huán)進(jìn)行判斷，當(dāng)前的數(shù)值跟下一個(gè)數(shù)值進(jìn)行比較，是否相同，相同的話進(jìn)行去重
    for (let i = 0; i < arr.length; i++) {
       
        for (let j = i+1; j < arr.length; j++) {
           
            if(arr[i]===arr[j]){
                arr.splice(i,1);
                i--;
                j--;
            }
            
        }
        
    }
    console.log(arr);

    const arr1 = [...new Set(arr)];//使用new Set 進(jìn)行去重

    console.log(arr1);

    let arr2 = arr.reduce((pre,next)=>{
        // if(!pre.includes(next)){//當(dāng)數(shù)組中沒(méi)有這個(gè)值的時(shí)候進(jìn)行添加就好
        //     pre.push(next);
        // }
        // indexOf()有的話返回下標(biāo)，沒(méi)有的話返回-1，所以沒(méi)有的時(shí)候進(jìn)行添加
        if(pre.indexOf(next)===-1){
            pre.push(next);
        }
        return pre;
    },[])

    console.log(arr2);

    // 簡(jiǎn)單的計(jì)算數(shù)組中的和
    let arr = [1,2,3,4,5,6,7];
    let s = arr.reduce((pre,next)=>{
        return pre + next
    },0)

    console.log(s);

• new Proxy()簡(jiǎn)單的代理

 let obj = {
        id:1,
        title:'練習(xí)proxy代理'
    }

    let obj2 = new Proxy(obj,{

        get(target,key){
            console.log(`你正在讀取obj中的${key}屬性`);
            // return target[key];//必須要有返回值
            return Reflect.get(target,key);//一般我們推薦使用這種映射的方式進(jìn)行返回
        },

        set(target,key,val){
            console.log(`你正在對(duì)obj的${key}進(jìn)行設(shè)置`);
            // target[key] = val;
            // return target[key];
            return Reflect.set(target,key,val);
        },

        has(target,key){
            console.log(`obj中是否有這個(gè)${key}屬性`);
            return Reflect.has(target,key);
        },
        ownKeys(target){

            return Reflect.ownKeys(target);
        },
    })

    console.log(obj2.id);
    obj2.name = '張三';
    obj2.id = 333;//設(shè)置屬性
    console.log(obj2.name);
    console.log(obj2.id);//獲取屬性

    console.log('id' in obj2);//這種方法進(jìn)行調(diào)用has方法

   console.log(Object.keys(obj2))//返回所有屬性

• web安全攻擊手段有哪些？
  1、XSS跨站腳本攻擊

  • 定義：就是攻擊者可以在我們的網(wǎng)站中嵌入惡意腳本，在進(jìn)行分享出去，當(dāng)用戶進(jìn)行瀏覽的時(shí)候，會(huì)被攻擊或者是泄漏隱私

• 解決辦法：設(shè)置httpOnly，防止獲取我們的cookie信息?？梢詫⑽覀冺?yè)面中的input框等可輸入的進(jìn)行代碼，特殊符號(hào)的轉(zhuǎn)義，還有就是長(zhǎng)度進(jìn)行限制
  2、CSRF跨站請(qǐng)求偽造

• 定義：就是我們使用localhost:3000進(jìn)行訪問(wèn)，攻擊者可以在localhost：3000進(jìn)行訪問(wèn)我們的數(shù)據(jù)及惡意的攻擊

• 解決辦法：使用token進(jìn)行驗(yàn)證。http頭中自定義屬性進(jìn)行驗(yàn)證

• TCP的三次連接

• 直接舉例說(shuō)明

• 小明——客戶端，小紅——服務(wù)端
  1、小明給小紅打電話，接通了之后，小明說(shuō)喂，能聽到嗎，這就是相當(dāng)于連接建立了
  2、小紅給小明回應(yīng)，能聽到，你能聽到我說(shuō)話嗎，這就相當(dāng)于是請(qǐng)求響應(yīng)
  3、小明聽到小紅的回應(yīng)后，好的，這相當(dāng)于是連接確認(rèn)，在這之后小明和小紅就可以通話/交換信息了

• TCP的四次揮手

• 直接舉例說(shuō)明
  1、小明對(duì)小紅說(shuō)，我所有的東西說(shuō)完了，我要掛電話了
  2、小紅說(shuō)，收到，我這邊還有一些東西沒(méi)說(shuō)
  3、經(jīng)過(guò)若干秒后，小紅也說(shuō)完了，小紅說(shuō)，我說(shuō)完了，現(xiàn)在可以掛斷了
  4、小明收到消息后，又等了若干時(shí)間后，掛斷了電話

• 地址欄輸入U(xiǎn)RL發(fā)生了什么

• 首先輸入U(xiǎn)RL之后，去查找域名是否被本地DNS緩存，解析域名，tcp的連接（三次握手，四次揮手），請(qǐng)求服務(wù)器，服務(wù)器響應(yīng)，HTML進(jìn)行重繪和回流，渲染頁(yè)面

template 和 JSX的區(qū)別

• 首先他們兩個(gè)都是render的一種表現(xiàn)形式，最終都會(huì)編譯成render進(jìn)行渲染
• template更加符合我們的視圖，結(jié)構(gòu)分離
• JSX相對(duì)于template更加的靈活

SPA單頁(yè)面的優(yōu)缺點(diǎn)

• 優(yōu)點(diǎn)：
  1、用戶體驗(yàn)好
  2、快
  3、內(nèi)容的改變不用重新加載整個(gè)頁(yè)面，避免了不必要的跳轉(zhuǎn)到渲染
• 缺點(diǎn)：
  1、首屏加載慢（loading進(jìn)行解決/骨架屏）
  2、對(duì)seo不友好

Vue中的data中某一個(gè)屬性值發(fā)生改變，視圖會(huì)立即更新渲染嗎？

• 不會(huì)立即同步更新渲染
• vue在更新dom的時(shí)候是異步執(zhí)行的，只要偵聽到數(shù)據(jù)的變化，vue將開啟一個(gè)隊(duì)列，并緩沖在同一個(gè)事件循環(huán)中發(fā)生的所有數(shù)據(jù)的變更
• 如果同一個(gè)watcher被多次進(jìn)行觸發(fā)，只會(huì)被推入到隊(duì)列中一次。（這種在緩沖時(shí)去除重復(fù)的數(shù)據(jù)對(duì)于避免不重要的計(jì)算和dom操作是非常重要的）
• 然后在下一次的事件循環(huán)tick中，vue刷新隊(duì)列并執(zhí)行實(shí)際的工作（已經(jīng)進(jìn)行去重的數(shù)據(jù)）

vue中的watch，computed和methods的區(qū)別

• 首先methods沒(méi)有緩存，只要調(diào)用就會(huì)進(jìn)行觸發(fā)
• computed 有緩存，只有里面的數(shù)據(jù)發(fā)生了改變，才會(huì)進(jìn)行更新，不支持異步，只支持data，props
• watch沒(méi)有緩存，支持異步的數(shù)據(jù)，只要數(shù)據(jù)發(fā)生變化就會(huì)觸發(fā)，有兩個(gè)參數(shù)新老值

如何減少重繪和回流

• 重繪：就是頁(yè)面的顏色啥的進(jìn)行改變，不會(huì)影響頁(yè)面的布局
• 回流：就是頁(yè)面的布局發(fā)生改變，需要重新進(jìn)行計(jì)算和渲染
• 使用transfrom替代top等
• 使用visibility替換display:none;（因?yàn)榍罢咧粫?huì)引起重繪，后者會(huì)觸發(fā)回流）

url輸入到渲染的過(guò)程？

• url解析（是否是合法的http）
• DNS查詢（將http解析為ip地址）
• tcp鏈接（三次揮手，4次握手）
• 向服務(wù)器發(fā)送請(qǐng)求
• 服務(wù)器響應(yīng)
• 頁(yè)面進(jìn)行渲染：
  1、解析html，構(gòu)建dom樹
  2、解析css，生成css樹
  3、計(jì)算html，css元素的尺寸，位置
  4、進(jìn)行繪制

rsa加密是非對(duì)稱加密

• 非對(duì)稱加密：就是需要我們知道公鑰和私鑰，然后通過(guò)算法進(jìn)行加密
• 對(duì)稱加密：就是我們只知道公鑰，私鑰是我們請(qǐng)求的時(shí)候進(jìn)行傳遞過(guò)來(lái)的，但是要是被劫持了，那么就會(huì)有泄露的風(fēng)險(xiǎn)
• 總結(jié)：一般都是使用非對(duì)稱加密，安全

文件的大小

• 文件的大小我們可以通過(guò)file文件中的屬性size進(jìn)行指導(dǎo)，在通過(guò)slice進(jìn)行截取切割，
• 也可以進(jìn)行判斷文件的大小
• 要是文件要判斷是不是png圖片，使用二進(jìn)制流讀取文件前六位，每個(gè)文件都是不同的

Vue組件模板會(huì)在某些情況下受到HTML的限制，如在table表格中使用組件是無(wú)效的，常見的還有在ul,ol,select中使用組件也是會(huì)被限制的

• 我們?yōu)榱私鉀Q在table表格標(biāo)簽中寫上我們的組件，使用is屬性來(lái)進(jìn)行掛載
• 我們也可以使用is這個(gè)屬性，進(jìn)行動(dòng)態(tài)的渲染組件，寫一個(gè)公共的部分，通過(guò)綁定is來(lái)實(shí)現(xiàn)不同的地方進(jìn)行渲染組件

<table><thead is="組件名"></thead></table>

插槽

• 默認(rèn)插槽：
  1、就是在組件中可以進(jìn)行寫入一些標(biāo)簽，可以在組建的內(nèi)部進(jìn)行渲染
  2、直接在組件的內(nèi)部使用<slot></slot>就可以了

• 具名插槽：
  1、就是我們要在不同的地方，顯示不同數(shù)據(jù)，這個(gè)時(shí)候就要顯示了
  2、使用name在slot標(biāo)簽上進(jìn)行起不同的名字
  3、在使用組件插槽的時(shí)候，在標(biāo)簽上顯示不同的名字就行slot='名字'

• 作用域插槽：
  1、就是子組件傳遞數(shù)據(jù)給父組件，然后在子組件中進(jìn)行顯示
  2、在子組件的slot標(biāo)簽上動(dòng)態(tài)的綁定我們需要的數(shù)據(jù)，或者是靜態(tài)的傳遞
  3、在父組件的子組件標(biāo)簽中使用template標(biāo)簽進(jìn)行渲染，在template標(biāo)簽上使用v-slot=“隨便起一個(gè)名字（aa）”，在里面就是aa.傳遞過(guò)來(lái)的數(shù)據(jù)就可以了

• this.$slot.default 是獲取默認(rèn)的插槽數(shù)據(jù)

• this.$slot.head 獲取頭部slot的數(shù)據(jù)

vue3.0的語(yǔ)法的一些總結(jié)

vue2.0 ======================= vue3.0

beforeCreatec ================ setup

created ====================== setup

beforeMount ================== onBeforeMount

mounted ====================== onMounted

beforeUpdate ================= onBeforeUpdate

updated ====================== onUpdated

beoreDestory ================= onBeforeUnmount

destory ====================== onUmmounted

flex彈性盒模型布局

• display:flex; //申明彈性盒模型，默認(rèn)水平排列
• flex-direction:row | row-reverse | column | column-reverse //排列的方向，水平，水平倒序， 垂直， 垂直倒序
• flex-wrap； nowrap | wrap | wrap-reverse //默認(rèn)不換行， 換行， 換行倒序
• flex-flow: <flex-direction> || <flex-wrap> //這是排列和換行的簡(jiǎn)寫 row nowrap 默認(rèn)水平不換行
• justify-content: flex-start | flex-end | center | space-between | space-around //水平的對(duì)齊方式，頭部（左邊）對(duì)齊，尾部（右邊）對(duì)齊 中間 兩端 均勻?qū)R
• align-item: flex-start | flex-end | center | baseline | stretch //垂直對(duì)齊方式， 頂部（上） 尾部 （下） 中間 文字對(duì)齊 上下占滿空間（沒(méi)有設(shè)置高度或auto，占滿上下空間）
• align-content: flex-start | flex-end | center | space-between | space-around | stretch ///這個(gè)屬性是對(duì)多個(gè)盒子進(jìn)行垂直對(duì)齊的方式
• order: 1 - 9999999 //數(shù)值越小，排列順序越往前
• flex-grow:0-1 //填充，默認(rèn)是0，有剩余空間，也不放大
• flex-shrink: 1 // 縮放默認(rèn)為1，空間不足，可以進(jìn)行縮小，如果其他都是1，當(dāng)前為0，其他進(jìn)行縮小，當(dāng)前不變
• flex-basis: auto //默認(rèn)auto 本來(lái)的大小， 分配多余空間之前占據(jù)的大小
• flex： <flex-grow> || <flex-shrink> || <flex-basis> //三者簡(jiǎn)寫

箭頭函數(shù)和普通函數(shù)的區(qū)別

1、寫法不同，箭頭函數(shù)使用()=>{} ，普通函數(shù)使用function(){}
2、箭頭函數(shù)都是匿名函數(shù)，普通函數(shù)可以是匿名函數(shù)也可以是命名函數(shù)
3、箭頭函數(shù)不能使用構(gòu)造函數(shù)，使用new進(jìn)行聲明
4、箭頭函數(shù)本身是沒(méi)有this的，聲明時(shí)可以捕獲上下文的this供自己使用，普通函數(shù)的this總是指向調(diào)用它的對(duì)象
5、箭頭函數(shù)沒(méi)有arguments對(duì)象，普通函數(shù)有
6、箭頭函數(shù)的this永遠(yuǎn)指向其上下文的this，任何方法都改變不了它的指向，如call,apply,bind都不行

vue和react的相同點(diǎn)和不同點(diǎn)

• 相同點(diǎn)
  1、使用虛擬dom
  2、都是響應(yīng)式數(shù)據(jù)和組件化
• 不同點(diǎn)
  1、vue是雙向數(shù)據(jù)綁定
  2、react 是單向數(shù)據(jù)流
  3、vue內(nèi)置dalailng

原生的上拉加載和下拉刷新

• 上拉加載
  
  image.png
• 看到上面的圖片，大致的意思就是scrollTop+clientHeight >= scrollHeight-觸底的距離

let clientHeight  = document.documentElement.clientHeight; //瀏覽器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;
 
let distance = 50;  //距離視窗還用50的時(shí)候，開始觸發(fā)；

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("開始加載數(shù)據(jù)");
}

• 下拉刷新
• 首先要經(jīng)歷3個(gè)過(guò)程，touchstart,touchmove,touchend,確定用戶開始觸發(fā)時(shí)候的y軸距離，移動(dòng)的距離-開始的距離，結(jié)束的時(shí)候，在進(jìn)行請(qǐng)求或者是做一些其他的操作

<main>
    <p class="refreshText"></p>
    <ul id="refreshContainer">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        ...
    </ul>
</main>

• touchstart

var _element = document.getElementById('refreshContainer'),
    _refreshText = document.querySelector('.refreshText'),
    _startPos = 0,  // 初始的值
    _transitionHeight = 0; // 移動(dòng)的距離

_element.addEventListener('touchstart', function(e) {
    _startPos = e.touches[0].pageY; // 記錄初始位置
    _element.style.position = 'relative';
    _element.style.transition = 'transform 0s';
}, false);

• touchmove

_element.addEventListener('touchmove', function(e) {
    // e.touches[0].pageY 當(dāng)前位置
    _transitionHeight = e.touches[0].pageY - _startPos; // 記錄差值

    if (_transitionHeight > 0 && _transitionHeight < 60) { 
        _refreshText.innerText = '下拉刷新'; 
        _element.style.transform = 'translateY('+_transitionHeight+'px)';

        if (_transitionHeight > 55) {
            _refreshText.innerText = '釋放更新';
        }
    }                
}, false);

• touchend

_element.addEventListener('touchend', function(e) {
    _element.style.transition = 'transform 0.5s ease 1s';
    _element.style.transform = 'translateY(0px)';
    _refreshText.innerText = '更新中...';
    // todo...

}, false);

• vue中父組件監(jiān)聽子組件的生命周期
• 方法一

// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
  this.$emit("mounted");
}

• 方法二

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
   console.log('父組件監(jiān)聽到 mounted 鉤子函數(shù) ...');
},
//  Child.vue
mounted(){
   console.log('子組件觸發(fā) mounted 鉤子函數(shù) ...');
},     
// 以上輸出順序?yàn)椋?// 子組件觸發(fā) mounted 鉤子函數(shù) ...
// 父組件監(jiān)聽到 mounted 鉤子函數(shù) ...

• 可以在mounted中監(jiān)聽到beforeDistory生命周期進(jìn)行清除定時(shí)器
• 參考鏈接https://blog.csdn.net/T_shiyi/article/details/108668263
• 重繪和回流
• 重繪：一般頁(yè)面中的背景，顏色等變化
• 回流：頁(yè)面的寬度，高度等發(fā)生變化，需要進(jìn)行重新計(jì)算，渲染
• 如何減少回流：
  1、用translate替代top改變
  2、使用opacity代替visibility
  3、不要使用table布局，一個(gè)小的改動(dòng)都需要進(jìn)行重新計(jì)算渲染
• this的指向問(wèn)題
• 關(guān)于這個(gè)this的指向問(wèn)題，要靠自己的理解，不用死記硬背，但是要多注意看題