vue前端面試題彙總（常問-進階篇）

vue中computed和watch的區別

1.computed的用法
是一個計算屬性,類似於過濾器,對綁定到view的數據進行處理。computed上面的屬性不可在vue data中聲明，不能做異步處理

 data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

fullName不可在data裏面定義,因爲對應的computed作爲計算屬性定義fullName並返回對應的結果給這個變量,變量不可被重複定義和賦值。computed的屬性還有get，和set方法。

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
computed: {
	fullName：{
		get(){
		   return this.firstName + ' ' + this.lastName
		},
		set(val){
		   //val就是fullName的最新屬性值
		}
	 }
  }

2.watch的用法
watch 是對data上的數據做監聽，數據發生了變化做一系列的操作。

data: {
    firstName: 'Foo',
    lastName: 'Bar',
    obj: {
    	a:1
    }
  },
watch: {
	// 簡單屬性的監聽
	firstName (newVal, oldVlue) {
		// newVal 新值， oldVlue舊值
	}
	// 對象某個屬性的監聽
	obj.a (newVal, oldVlue) {}
	
	// 對象的監聽，對象引用發生變化纔會觸發
	obj (newVal, oldVlue) {}
	// 對象所有屬性進行監聽
	obj : {
        handler(oldVal,newVal){
          
        },
        deep:true
      }
  }

vue中keep-alive的使用和新特性

1.props
include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
max - 數字。最多可以緩存多少組件實例。

<keep-alive include="test-keep-alive">
  <!-- 將緩存name爲test-keep-alive的組件 -->
  <component></component>
</keep-alive>
<keep-alive include="a,b">
  <!-- 將緩存name爲a或者b的組件，結合動態組件使用 -->
  <component :is="view"></component>
</keep-alive>
<!-- 使用正則表達式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<keep-alive exclude="test-keep-alive">
  <!-- 將不緩存name爲test-keep-alive的組件 -->
  <component></component>
</keep-alive>

2、結合router，緩存部分頁面

使用$route.meta的keepAlive屬性：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

//…router.js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要緩存
      }
    },
    {
      path: '/World',
      name: 'World',
      component:World,
      meta: {
        keepAlive: true // 需要被緩存
      }
    }
  ]
})

它是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重複渲染DOM。包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。

vue路由的實現原理

1.hash模式

http://www.xxx.com/#/home

這種 #。後面 hash 值的變化，並不會向瀏覽器發送請求，頁面因此也不會刷新，hash值的改變會觸發瀏覽器的hashchange事件，vue就是通過監聽這個hashchange事件，進行dom處理和頁面更新操作

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('hashchange', matchAndUpdate)

2.history 模式
14年後，因爲HTML5標準發佈。多了兩個 API，pushState 和 replaceState，通過這兩個 API 可以改變 url 地址且不會發送請求。同時觸發 popstate 事件。通用了 HTML5 的實現，單頁路由的 url 就不會多出一個#，變得更加美觀。但因爲沒有 # 號，所以當用戶刷新頁面之類的操作時，瀏覽器還是會給服務器發送請求。所以這個實現需要服務器的支持，需要把所有路由都重定向到根頁面。

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('popstate', matchAndUpdate)

先寫這麼多。下篇研究下vue雙向綁定原理，和vue3.0的新實現