一：防抖節(jié)流

防抖：一個(gè)頻繁觸發(fā)的函數(shù)剑刑，在規(guī)定時(shí)間內(nèi)媳纬，只讓最后一次生效，前面的不生效施掏。
例：防抖經(jīng)常用在我們搜索框輸入搜索钮惠，點(diǎn)擊提交，防止等七芭；
節(jié)流：一個(gè)頻繁觸發(fā)的函數(shù)素挽，在規(guī)定時(shí)間內(nèi)，函數(shù)執(zhí)行一次后狸驳，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次预明。
例：節(jié)流一般在onresize、mousemove耙箍、滾動(dòng)事件等事件中使用多律，防止過多的請求造成服務(wù)器壓力

二：Css盒模型

盒模型的組成：元素的內(nèi)容content、元素的內(nèi)邊距padding烤镐、元素的外邊距margin框全、元素的邊框border
盒模型分為 ： W3C標(biāo)準(zhǔn)盒子 、IE盒子
W3C標(biāo)準(zhǔn)盒子（content-box）：又稱內(nèi)容盒子，是指塊元素box-sizing屬性為content-box的盒模型术辐，盒子總寬度 = margin + border + padding + width
IE盒子（border-box）：又稱怪異盒模型（邊框盒子）砚尽，是指塊元素box-sizing屬性為border-box的盒模型，盒子總寬 = margin + width

三：數(shù)組都有哪些方法

1.toString()與join()一樣都是把數(shù)組轉(zhuǎn)成以逗號分割的字符串
2.pop() 刪除數(shù)組的最后一項(xiàng)
3.push() 往數(shù)組最后添加新數(shù)據(jù)
4.shift() 刪除數(shù)組最前面的一項(xiàng)

5. unshift() 往數(shù)組開頭添加新數(shù)據(jù)
6. splice() 方法可用于向數(shù)組添加新項(xiàng)或者刪除數(shù)組
   7.concat()連接兩個(gè)數(shù)組生成一個(gè)新數(shù)組
   8.slice()

//slice 與 splice 的區(qū)別
var  arr=['a','b','c','d','e','f'];
arr.splice(1,3); // arr = ['a', 'e', 'f']; arr.splice(1,3)=['b', 'c', 'd'];
var  arr=['a','b','c','d','e','f'];
arr.slice(1,3); // arr = ['a','b','c','d','e','f']; arr.slice(1,3)=['b', 'c']

四：var辉词、const必孤、let的區(qū)別

var定義的變量可以修改，如果不初始化會輸出undefined瑞躺，不會報(bào)錯(cuò)敷搪。
const定義的變量不可以修改，而且必須初始化
let是塊級作用域隘蝎，函數(shù)內(nèi)部使用let定義后购啄，對函數(shù)外部無影響。

五：vue生命周期

vue生命周期

六：vue react區(qū)別

相同點(diǎn)

1.都支持服務(wù)器端渲染
2.都有虛擬dom,組件化開發(fā),都有‘props’的概念,允許父組件往子組件傳送數(shù)據(jù),都實(shí)現(xiàn)webComponent規(guī)范
3.數(shù)據(jù)驅(qū)動(dòng)視圖
4.都有支持native的方案,React的React native,Vue的weex
5.構(gòu)建工具
React和Vue都有自己的構(gòu)建工具源内，你可以使用它快速搭建開發(fā)環(huán)境。React可以使用Create React App (CRA)份殿，而Vue對應(yīng)的則是vue-cli膜钓。都有管理狀態(tài)，React有redux,Vue有自己的Vuex

區(qū)別

設(shè)計(jì)思想
react
1.函數(shù)式思想卿嘲，all in js ,jsx語法颂斜，js操控css
2.單項(xiàng)數(shù)據(jù)流
3.setState重新渲染
4.每當(dāng)應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會重新渲染拾枣。當(dāng)然沃疮，這可以通過shouldComponentUpdate這個(gè)生命周期方法來進(jìn)行控制盒让，如果為true繼續(xù)渲染、false不渲染司蔬，但Vue將此視為默認(rèn)的優(yōu)化邑茄。
vue
1.響應(yīng)式思想，也就是基于數(shù)據(jù)可變的俊啼。把html肺缕、js、css授帕、組合到一起同木，也可以通過標(biāo)簽引擎組合到一個(gè)頁面中
2.雙向綁定，每一個(gè)屬性都需要建立watch監(jiān)聽（頁面不用跛十，涉及到組件更新的話需要）
3.Vue宣稱可以更快地計(jì)算出虛擬 DOM的差異彤路，這是由于它在渲染過程中，會跟蹤每一個(gè)組件的依賴關(guān)系芥映，不需要重新渲染整個(gè)組件樹
性能
react ----大型項(xiàng)目洲尊、優(yōu)化需要手動(dòng)去做，狀態(tài)可控
vue ------中小型項(xiàng)目屏轰、狀態(tài)改變需要watch監(jiān)聽颊郎，數(shù)據(jù)量太大的話會卡頓
擴(kuò)展性
react
1 類式寫法api少，更容易結(jié)合ts
2 可以通過高階組件來擴(kuò)展
vue
1 聲明式寫法霎苗，結(jié)合ts比較復(fù)雜
2 需要通過mixin方式來擴(kuò)展

七：vue路由守衛(wèi)

vue-router提供了導(dǎo)航鉤子:全局前置導(dǎo)航鉤子 beforeEach和全局后置導(dǎo)航鉤子 afterEach
導(dǎo)航鉤子3個(gè)參數(shù)(to,from,next):

• to：將要進(jìn)入的路由對象
• from：將要離開的路由對象
• next：調(diào)用該方法后姆吭，才能進(jìn)入下一個(gè)鉤子函數(shù)（afterEach不接收next只有to/from）next函數(shù)，決定是否展示你要看到的路由頁面

router.beforeEach(to,from,next){};
router.afterEach(to,from){}

組件內(nèi)的守衛(wèi)

到達(dá)這個(gè)組件時(shí)：

beforeRouteEnter:(to,from,next)=>{
  console.log(this.數(shù)據(jù))//undefined 
   //因?yàn)樯芷谠颥F(xiàn)在data數(shù)據(jù)還未渲染唁盏，所以要用
  next(vm=>{
    consoel.log(this.數(shù)據(jù))//這里就可以得到data里的數(shù)據(jù)
  })
 }

離開這個(gè)組件時(shí)：beforeRouteLeave:(to,from,next)=>{}
確認(rèn)離開next();取消離開next(false)内狸；

路由獨(dú)享的守衛(wèi)

beforeEnter:(to,from,next)=>{}，用法與全局守衛(wèi)一致厘擂。只是昆淡，將其寫進(jìn)其中一個(gè)路由對象中，只在這個(gè)路由下起作用刽严。

八：vue的組件傳值

父子組件傳值

父傳子

// 父組件
<user-detail :myName="name" />
//子組件
<script>
export default{
  props:['myName'],
  data() {
    return {
      name : this.myName    // 把傳過來的值賦值給新的變量
    }
  },
  watch: {//偵聽器
    myName(newVal) {
      this.name = newVal //對父組件傳過來的值進(jìn)行監(jiān)聽昂灵，如果改變也對子組件內(nèi)部的值進(jìn)行改變
      //引用類型的值，當(dāng)在子組件中修改后舞萄，父組件的也會修改眨补，因其數(shù)據(jù)是公用的，其他同樣引用了該值的子組件也會跟著被修改倒脓〕怕荩可以理解成父組件傳遞給子組件的值，就相當(dāng)于復(fù)制了一個(gè)副本崎弃，這個(gè)副本的指針還是指向父組件中的那個(gè)甘晤，即共享同一個(gè)引用含潘。所以除非有特殊需要，否則不要輕易修改
    }
  },
  methods: {
    changeName() {  
      this.name = 'Lily'  // 這里修改的只是自己內(nèi)部的值线婚，就不會報(bào)錯(cuò)了
    },
  }
}
</script>

子傳父

方法一：
子組件綁定一個(gè)事件遏弱，通過 this.$emit() 來觸發(fā)
在子組件中綁定一個(gè)事件，并給這個(gè)事件定義一個(gè)函數(shù)

// 子組件
<button @click="changeParentName">點(diǎn)擊改變父組件的name</button>
<script>
export default {
    methods: {
        //子組件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'aaa') // 觸發(fā)父組件中handleChange事件并傳參aaa
            // 注：此處事件名稱與父組件中綁定的事件名稱要一致
        }
    }
}
</script>

在父組件中定義并綁定 handleChange 事件

// 父組件
<child @handleChange="changeName"></child>
methods: {
    changeName(name) {  // name形參是子組件中傳入的值Jack
        this.name = name
    }
}

方法二：
通過 callback 函數(shù)
先在父組件中定義一個(gè)callback函數(shù)塞弊，并把 callback 函數(shù)傳過去

// 父組件
<child :callback="callback"></child>
methods: {
    callback: function(name) {
        this.name = name
    }
}

在子組件中接收腾窝，并執(zhí)行 callback 函數(shù)

// 子組件
<button @click="callback('aaa')">點(diǎn)擊改變父組件的name</button>
props: {
    callback: Function,
}

方法三：
通過$parent /$children 或 $refs訪問組件實(shí)例
這兩種都是直接得到組件實(shí)例，使用后可以直接調(diào)用組件的方法或訪問數(shù)據(jù)居砖。
這種方式的組件通信不能跨級

// 子組件
<script>
export default {
  data () {
    return {
      title: '子組件'
    }
  },
  methods: {
    sayHello () {
        console.log('Hello');
    }
  }
}
</script>

// 父組件
<template>
  <child ref="childRef" />
</template>
<script>
  export default {
    created () {
      // 通過 $ref 來訪問子組件
      console.log(this.$refs.childRef.title);  // 子組件
      this.$refs.childRef.sayHello(); // Hello
      
      // 通過 $children 來調(diào)用子組件的方法
      this.$children.sayHello(); // Hello 
    }
  }
</script>

方法四：
$attrs和$listeners

//父組件
<template>
　　 <child :name="name" :age="age" :infoObj="infoObj" @updateInfo="updateInfo" @delInfo="delInfo" />
</template>
<script>
    import Child from '../components/child.vue'
    export default {
        name: 'father',
        components: { Child },
        data () {
            return {
                name: 'Lily',
                age: 22,
                infoObj: {
                    from: '上海',
                    job: 'policeman',
                    hobby: ['reading', 'writing', 'skating']
                }
            }
        },
        methods: {
            updateInfo() {
                console.log('update info');
            },
            delInfo() {
                console.log('delete info');
            }
        }
    }
</script>

//子組件
<template>
    <grand-son :height="height" :weight="weight" @addInfo="addInfo" v-bind="$attrs" v-on="$listeners"  />
    // 通過 $listeners 將父作用域中的事件，傳入 grandSon 組件驴娃，使其可以獲取到 father 中的事件
</template>
<script>
    import GrandSon from '../components/grandSon.vue'
    export default {
        name: 'child',
        components: { GrandSon },
        props: ['name'],
        data() {
          return {
              height: '180cm',
              weight: '70kg'
          };
        },
        created() {
            console.log(this.$attrs); 
　　　　　　　// 結(jié)果：age, infoObj, 因?yàn)楦附M件共傳來name, age, infoObj三個(gè)值奏候，由于name被 props接收了，所以只有age, infoObj屬性
            console.log(this.$listeners); // updateInfo: f, delInfo: f
        },
        methods: {
            addInfo () {
                console.log('add info')
            }
        }
    }
</script>

//爺組件
<template>
    <div>
        {{ $attrs }} --- {{ $listeners }}
    <div>
</template>
<script>
    export default {
        ... ... 
        props: ['weight'],
        created() {
            console.log(this.$attrs); // age, infoObj, height 
            console.log(this.$listeners) // updateInfo: f, delInfo: f, addInfo: f
            this.$emit('updateInfo') // 可以觸發(fā) father 組件中的updateInfo函數(shù)
        }
    }
</script>