Vue技術分類

時間 2019-11-08

標籤 vue 技術分類简体版

原文原文鏈接

vue知識點

一、對於Vue是一套漸進式框架的理解
Vue核心功能是一個視圖模板引擎，能夠經過添加組件系統、客戶端路由、大規模狀態管理來構建一個完整的框架。能夠在覈心功能的基礎上任意選用其餘的部件。這就是「漸進式」，就是Vue的使用方式。javascript

二、vue.js的兩個核心是什麼？css

數據驅動、組件系統。

三、請問 v-if 和 v-show 有什麼區別？
v-if判斷條件是否渲染，是惰性的，初始渲染時條件爲假時什麼也不作；v-show是 display: block/none;元素始終都會渲染；在項目中若是須要頻繁的切換則使用v-show較好，運行條件不多改變，則使用v-if。
四、vue經常使用的修飾符html

.prevent 提交事件再也不重載頁面;
.stop 阻止單擊事件冒泡;
.self 當事件發生在該元素自己而不是子元素時觸發;
.capture 添加事件監聽器時使用事件捕獲模式;
.once 只會觸發一次 
按鍵修飾符 
:keyup.enter  
:keyup.tab

五、v-on能夠監聽多個方法嗎？能夠。
六、vue中 key 值的做用
v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。
爲了給 Vue 一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性。理想的 key 值是每項都有的惟一 id。
主要是爲了高效的更新虛擬DOM。前端

七、vue-cli工程升級vue版本
手動修改 package.json 裏面vue的版本，同時修改 vue-template-compiler 爲相同的版本；後者在devDependencies裏面，而後npm install。vue

八、vue事件中如何使用event對象？ @click="EventName($event)"java

九、$nextTick的使用node

在修改數據以後當即使用這個方法，獲取更新後的 DOM。

十、Vue 組件中 data 爲何必須是函數
每用一次組件，就會有一個新實例被建立。每一個實例能夠維護一份被返回對象的獨立的拷貝，每一個對象都是獨立互不影響的。webpack

十一、v-for 與 v-if 的優先級ios

v-for 具備比 v-if 更高的優先級。
v-if 將分別重複運行於每一個 v-for 循環中。vue風格指南提示永遠不要把 v-if 和 v-for 同時用在同一個元素上。

十二、vue中子組件調用父組件的方法git

第一種：this.$parent.xxx;
第二種：經過props傳遞父組件函數名，子組件接受，接受類型爲Function；
第三種：建立eventBus。

1三、vue中 keep-alive 組件的做用
keep-alive是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。include(包含的組件緩存) 與 exclude(排除的組件不緩存，優先級大於include) 。
include - 字符串或正則表達式，只有名稱匹配的組件會被緩存；
exclude 反之亦然。 include="a,b" :include="/a|b/" :include="['a', 'b']"

1四、vue中如何編寫可複用的組件？

規範化命名：組件的命名應該跟業務無關，而是依據組件的功能命名。
數據扁平化：定義組件接口時，儘可能不要將整個對象做爲一個 prop 傳進來。每一個 prop 應該是一個簡單類型的數據。這樣作有下列幾點好處：
(1) 組件接口清晰。
(2) props 校驗方便。
(3) 當服務端返回的對象中的 key 名稱與組件接口不同時，不須要從新構造一個對象。
```
扁平化的 props 能讓咱們更直觀地理解組件的接口。
```
可複用組件只實現 UI 相關的功能，即展現、交互、動畫，如何獲取數據跟它無關，所以不要在組件內部去獲取數據。
可複用組件應儘可能減小對外部條件的依賴。
組件在功能獨立的前提下應該儘可能簡單，越簡單的組件可複用性越強。
組件應具備必定的容錯性。

1五、什麼是vue生命週期和生命週期鉤子函數？
Vue 實例從建立到銷燬的過程，就是生命週期。
從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲 Vue 的生命週期。
總共分爲8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後。讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。

1六、vue生命週期鉤子函數有哪些？
beforeCreate（建立前）在數據觀測和初始化事件還未開始
created（建立後）完成數據觀測，屬性和方法的運算，初始化事件，$el屬性尚未顯示出來;
beforeMount（載入前）在掛載開始以前被調用，相關的render函數首次被調用。實例已完成如下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時尚未掛載html到頁面上；
mounted（載入後）在el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用。實例已完成如下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程當中進行ajax交互；
beforeUpdate（更新前）在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前。能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程；
updated（更新後）在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用；
beforeDestroy（銷燬前）在實例銷燬以前調用。實例仍然徹底可用；
destroyed（銷燬後）在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

1七、vue如何監聽鍵盤事件中的按鍵？
監聽keyup事件並添加按鍵修飾符，對一些經常使用按鍵vue提供了別名，或者使用keyCode，vue也支持複合按鍵。

1八、vue更新數組時觸發視圖更新的方法

Vue.set(arr, key, value) Vue.set(object, key, value)

1九、vue中對象更改檢測的注意事項

Vue 不能檢測對象屬性的添加或刪除；不能動態添加根級別的響應式屬性。
使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。

20、解決非工程化項目初始化頁面閃動問題
vue頁面在加載的時候閃爍花括號{}}，v-cloak指令和css規則如[v-cloak]{display:none}一塊兒用時，這個指令能夠隱藏未編譯的Mustache標籤直到實例準備完畢。

/*css樣式*/
[v-clock] {
    display: none;
}

2一、v-for產生的列表，實現active的切換

<ul class="ul" >
    <li v-on:click="currentIndex = index" 
        class="item" 
        v-bind:class="{clicked: index === currentIndex}" 
        v-for="(items, index) in arr">
            <a>{{items}}</a>
    </li>
</ul>

data() {
    return{
        currentIndex: 0
    }
}

2二、v-model語法糖的組件中的使用

1:用於表單上數據的雙向綁定；
2:修飾符：
    .lazy- 取代input監聽change事件
    .number- 輸入字符串轉爲數字
    .trim- 輸入首尾空格過濾

2三、十個經常使用的自定義過濾器

// 全局方法 Vue.filter() 註冊一個自定義過濾器
Vue.filter("sum", function(value) {   
    return value + 4;
});
// 局部
new Vue({
    el: ".test",
    data: {
        message:12
    },
    filters: {
        sum: function (value) {
            return value + 4;
        }
    }
})

2四、vue等單頁面應用及其優缺點

優勢——數據驅動、組件化、輕量簡潔高效，經過儘量簡單的API實現響應的數據綁定和組合的視圖組件；
缺點：不支持低版本的瀏覽器，不利於SEO優化，可使用服務器端渲染，首次加載耗時長。

2五、什麼是vue的計算屬性？
在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式。
計算屬性基於它們的依賴進行緩存的；只在相關依賴發生改變時它們纔會從新求值。

3一、計算屬性的緩存和方法調用的區別

兩種方式的最終結果確實是徹底相同的。
不一樣的是計算屬性是基於它們的依賴進行緩存的，只在相關依賴發生改變時它們纔會從新求值。
只要相關依賴尚未發生改變，屢次訪問計算屬性會當即返回以前的計算結果，而沒必要再次執行函數
若是不但願有緩存，請用方法來替代。

2六、vue-cli提供的幾種腳手架模板

vue-cli的腳手架項目模板有webpack-simple 和 webpack；
區別在於webpack-simple 沒有包括Eslint 檢查等功能。

2七、vue父組件如何向子組件中傳遞數據？經過父組件v-bind傳遞數據子組件props接收數據

2八、vue-cli開發環境使用全局常量

①少許
Vue.prototype.baseUrl = function () {
  return 'https://segmentfault.com/';
};

Vue.prototype.getTitle = {
      title:'',
      isBack: true,
      isAdd:  false,
};
②配置文件形式
在項目的src 目錄裏面 新建一個 lib目錄，lib目錄裏建立一個 config.js文件。

export default {
  install(Vue,options) {
    Vue.prototype.baseUrl = function () {
       return '111';
    };
    Vue.prototype.getTitle = {
      title:'',
      isBack: true,
      isAdd:  false,
    };
    Vue.prototype.showFootTab = {
      isShow:false,
      active:0,
    }
}
最後導入 
    import config from './lib/config.js';
    Vue.use(config);
使用
    <template>
      <div>
        {{getTitle.title}}
      </div>
    </template>
    
    this.getTitle

2九、vue-cli生產環境使用全局常量

30、vue彈窗後如何禁止滾動條滾動？

/***滑動限制***/
  stop(){
    var mo=function(e){e.preventDefault();};
    document.body.style.overflow='hidden';
    document.addEventListener("touchmove",mo,false);//禁止頁面滑動
  },
  /***取消滑動限制***/
  move(){
    var mo=function(e){e.preventDefault();};
    document.body.style.overflow='';//出現滾動條
    document.removeEventListener("touchmove",mo,false);
  }
  // 若是不是Vue，能夠直接給html設置overflow：hidden

3二、vue-cli中自定義指令的使用

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }![圖片描述][1]
  }
}
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

vue-router

一、vue-router如何響應路由參數的變化？

當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。同時意味着組件的生命週期鉤子不會再被調用。

複用組件時，想對路由參數的變化做出響應的話，你能夠簡單地 watch (監測變化) $route 對象：

watch: {
    '$route' (to, from) {
      // 對路由變化做出響應...
    }
}

二、完整的 vue-router 導航解析流程

導航被觸發。
在失活的組件裏調用離開守衛。
調用全局的 beforeEach 守衛。
在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
在路由配置裏調用 beforeEnter。
解析異步路由組件。
在被激活的組件裏調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛 (2.5+)。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

三、vue-router有哪幾種導航鉤子（導航守衛）？

全局的, 單個路由獨享的, 組件級的。
全局守衛：
router.beforeEach router.beforeResolve(2.5+) router.afterEach

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})
router.afterEach((to, from) => {
  // 這些鉤子不會接受 next 函數也不會改變導航自己： ...
})

路由獨享的守衛： beforeEnter   這些守衛與全局前置守衛的方法參數是同樣的。
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
組件內的守衛
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 由於當守衛執行前，組件實例還沒被建立
      next(vm => {
        // 經過 `vm` 訪問組件實例
      })
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，可是該組件被複用時調用
    // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
    // 能夠訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`
  }
}
每一個守衛方法接收三個參數：
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

四、vue-router的幾種實例方法以及參數傳遞

編程式導航
    this.$router.push({ name: 'news', params: { userId: 123 }}); // this.$route.params.userId
    this.$router.push({ path: '/news', query: { userId: 123 }}); // this.$route.query.userId
    this.$router.replace();
聲明式導航 
    <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
    <router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

五、vue-router的動態路由匹配以及使用

須要把某種模式匹配到的全部路由，全都映射到同個組件
const User = {
  template: '<div>User{{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    // 動態路徑參數 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})
複用組件時，想對路由參數的變化做出響應的話，使用watch (監測變化) $route 對象
  watch: {
    '$route' (to, from) {
      // 對路由變化做出響應...
    }
  }
想匹配任意路徑，咱們可使用通配符 (*)
{
  // 會匹配全部路徑
  path: '*'
}, {
  // 會匹配以 `/user-` 開頭的任意路徑
  path: '/user-*'
}

六、vue-router如何定義嵌套路由？

在router.js使用children數組來定義子路由，並在模板中使用<router-view>定義嵌套路由。
若是沒有匹配到合適的子路由，能夠提供一個 空的 子路由
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 當 /user/:id 匹配成功，
        // UserHome 會被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },
        // ...其餘子路由
      ]
    }
  ]

七、<router-link></router-link>組件及其屬性

<router-link> 組件支持用戶在具備路由功能的應用中 (點擊) 導航。 
經過 to 屬性指定目標地址，默認渲染成帶有正確連接的 <a> 標籤，能夠經過配置 tag 屬性生成別的標籤。
to: 
    <!-- 字符串 -->
    <router-link to="home">Home</router-link>
    <!-- 渲染結果 -->
    <a href="home">Home</a>
    <!-- 使用 v-bind 的 JS 表達式 -->
    <router-link v-bind:to="'home'">Home</router-link>
    <!-- 不寫 v-bind 也能夠，就像綁定別的屬性同樣 -->
    <router-link :to="'home'">Home</router-link>
    <!-- 同上 -->
    <router-link :to="{ path: 'home' }">Home</router-link>
    <!-- 命名的路由 -->
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
    <!-- 帶查詢參數，下面的結果爲 /register?plan=private -->
    <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
replace: 會調用 router.replace() 而不是 router.push()，因而導航後不會留下 history 記錄。
<router-link :to="{ path: '/abc'}" replace></router-link>
append: 在當前 (相對) 路徑前添加基路徑
tag: 渲染成某種標籤
active-class: 設置 連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置。

八、vue-router實現路由懶加載（動態加載路由）

component: () => import('comp/AlbumlibMore')

九、vue-router路由的兩種模式
vue-router 默認 hash 模式

使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。

HTML5 History 模式

充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。
  要玩好，還須要後臺配置支持；
  由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404

十、history路由模式與後臺的配合
在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面；而後在給出一個 404 頁面。

vuex

一、什麼是vuex？
專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
讀取的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事物；異步邏輯應該封裝在action中。

在main.js引入store，注入。新建了一個目錄store，export 。
場景有：單頁應用中，組件之間的狀態、音樂播放、登陸狀態、加入購物車

二、使用vuex的核心概念

state => 基本數據 
getters => 從基本數據派生的數據 
mutations => 提交更改數據的方法，同步！ 
actions => 像一個裝飾器，包裹mutations，使之能夠異步。 
modules => 模塊化Vuex，當應用變得很是複雜時，store 對象會變得臃腫不堪。

三、vuex在vue-cli中的應用

單頁應用中，組件之間的狀態、音樂播放、登陸狀態、加入購物車

四、組件中使用 vuex 的值和修改值的地方？

getters，actions(異步)，mutations(同步)

五、在vuex中使用異步修改

import * as types from './mutation-types';
export const selectPlay = function ({commit}, {list, index}) {
  commit(types.SET_LIST, list);
  commit(types.SET_INDEX, index);
  commit(types.SET_FULL, true);
};

使用

import {mapActions} from 'vuex';
...mapActions([
    'selectPlay'
])
this.selectPlay({
  list: lists.concat([]),
  index: indexs
});

六、pc端頁面刷新時實現vuex緩存

辦法一：將vuex中的數據直接保存到瀏覽器緩存中（sessionStorage、localStorage、cookie）
辦法二：在頁面刷新的時候再次請求遠程數據，動態更新vuex數據
分析：
    辦法一的缺點是不安全，不適用大數據量的存儲；
    辦法二適用於少許的數據，而且不會出現網絡延遲；

http請求

一、Promise對象是什麼？

是一個構造函數，有all、reject、resolve方法；原型上有then、catch方法。
Promise的構造函數接收一個參數，是函數，而且傳入兩個參數：resolve，reject，
分別表示異步操做執行成功後的回調函數和異步操做執行失敗後的回調函數。
缺點
    1.沒法取消promise，一旦建立就當即執行，沒法中途取消
    2.若是不設置回調函數，promise內部拋出錯誤，不會反映到外部

二、axios、fetch與ajax有什麼區別？
ajax

自己是針對MVC的編程,不符合如今前端MVVM的浪潮
基於原生的XHR開發，XHR自己的架構不清晰，已經有了fetch的替代方案
JQuery整個項目太大，單純使用ajax卻要引入整個JQuery很是的不合理（採起個性化打包的方案又不能享受CDN服務）

axios
基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範，

1.從瀏覽器中建立 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些併發請求的接口（重要，方便了不少的操做）
5.從 node.js 建立 http 請求
6.攔截請求和響應
7.轉換請求和響應數據
8.取消請求
9.自動轉換JSON數據

fetch

是AJAX的替代品，是在ES6出現的，使用了ES6中的promise對象。Fetch是基於promise設計的。
參數有點像jQuery ajax。
fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。

三、什麼是JS的同源策略和跨域問題？

同源是指兩個頁面具備相同的協議，主機（域名），端口。主要針對的是js中的XMLHttpRequest請求

四、如何解決跨域問題？

使用ajax發送請求時添加jsonp參數
    dataType: "jsonp",
    jsonp: "callback",
    //傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(通常默認爲:callback)
    jsonpCallback:"flightHandler", 
    //自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數
使用axios發送請求，使用代理
config => index.js => module.exports => dev => proxyTable
  '/api': {
    changeOrigin: true,
    target: 'url1',
    bypass: function (req, res, proxyOptions) {
      req.headers.referer = 'url2';
      req.headers.host = 'host';
    },
    pathRewrite: {
      '^/api': ''
    }
  },

五、vue-cli中如何使用JSON數據模擬？
vue-cli mock模擬數據+json-server

json server 工具
    npm install json-server --save //json server
    npm install axios --save //使用axios發送請求
新建 xx.json 文件
終端輸入
    json-server db.json --port 3000 //（端口）
打開package.json => scripts 中配置一個mock
    "mock": "json-server db.json --port 3003"
npm run mock

六、vue-cli中http請求的統一管理。

七、axios有什麼特色？

1.從瀏覽器中建立 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些併發請求的接口（重要，方便了不少的操做）
5.從 node.js 建立 http 請求
6.攔截請求和響應
7.轉換請求和響應數據
8.取消請求
9.自動轉換JSON數據

UI樣式

一、.vue組件的scoped屬性的做用

表示它的樣式做用於當下的模塊，很好的實現了樣式私有化的目的，這是一個很是好的機制。
同時樣式將會變得不易修改。

二、如何讓CSS只在當前組件中起做用？

在style標籤上 使用scoped屬性

三、vue-cli中經常使用的UI組件庫

ElementUI mint-ui vux

四、如何適配移動端？【經典】

使用postcss+vw單位

Vue項目中使用vw實現移動端適配

app，pc倆個路由，app表明手機端，pc表明移動端點擊跳轉或者進入頁面加載判斷

五、移動端經常使用媒體查詢的使用

移動端1像素邊框的問題
圖片幾倍的問題
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

六、垂直居中對齊

使用flex佈局
    display: flex;
    align-items: center;
使用display 和 vertical-align
    display: table-cell;
    vertical-align: middle;
    
line-height+margin: 0 auto--元素定寬
父元素
    position: relative;
子元素
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
子元素
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;


display: flex;
align-items: center;

line-height
七、vue-cli中如何使用背景圖片？

一、找到 build/utils.js，增長一行代碼便可： publicPath:"../../"
二、

八、使用表單禁用時移動端樣式問題

九、多種類型文本超出隱藏問題

ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

ellipsis-clamp($num)
  overflow: hidden
  text-overflow: ellipsis
  display: -webkit-box
  -webkit-line-clamp: $num
  -webkit-box-orient: vertical

經常使用功能

一、vue中如何實現tab切換功能？

二、vue中如何利用 keep-alive 標籤實現某個組件緩存功能？

三、vue中實現切換頁面時爲左滑出效果

四、vue中父子組件如何相互調用方法？

五、vue中央事件總線的使用

混合開發

一、vue如何調用原生app 提供的方法？

二、原生app 調用 vue 提供的方法，並將值傳遞到 .vue 組件中

生產環境

一、vue打包命令是什麼？

npm run build

二、vue打包後會生成哪些文件？

生成dist文件夾，裏面有index.html和static文件夾， 包含css、js、img

三、如何配置 vue 打包生成文件的路徑？

在 config => index.js => module.exports => build

四、vue如何優化首屏加載速度？

異步組件 () => import('vue');
img-lazyLoad

MVVM設計模式

一、MVC、MVP與MVVM模式

MVC全名是**Model View Controller**，模型(model)－視圖(view)－控制器(controller)的縮寫，一種架構模式；
view操做會觸發controller去改變model，而後model再去改變視圖
model：應用程序中處理數據邏輯的一部分，一般用來模型對象對數據庫的存存取等操做
view：視圖部分，一般指jsp、html等用來對用戶展現的一部分
controller：控制層一般用來處理業務邏輯，負責從試圖讀取數據，並向模型發送數據

mvvm 即 **Model-View-ViewModel**，即模型-視圖-視圖模型；一種設計思想；本質上就是MVC 的改進版。
主要目的是分離視圖（View）和模型（Model）。
【模型】指的是後端傳遞的數據。
【視圖】指的是所看到的頁面。
【視圖模型】mvvm模式的核心，它是鏈接view和model的橋樑。
    一是將【模型】轉化成【視圖】，即將後端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。
    二是將【視圖】轉化成【模型】，即將所看到的頁面轉化成後端的數據。實現的方式是：DOM 事件監聽。
        這兩個方向都實現的，咱們稱之爲數據的雙向綁定。
 低耦合、可重用性、獨立開發

二、MVC、MVP與MVVM的區別

三、常見的實現MVVM幾種方式

數據劫持(vue)：經過Object.defineProperty() 去劫持數據每一個屬性對應的getter和setter；
髒值檢測(angular)：經過特定事件好比input，change，xhr請求等進行髒值檢測;
發佈-訂閱模式(backbone)：經過發佈消息，訂閱消息進行數據和視圖的綁定監聽。

連接描述

四、Object.defineProperty()方法

Object.defineProperty(obj, prop, descriptor)
會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。
obj -- 要在其上定義屬性的對象
prop -- 要定義或修改的屬性的名稱。
descriptor --- 將被定義或修改的屬性描述符。

var o = {}; // 建立一個新對象
// 在對象中添加一個屬性與數據描述符的示例
Object.defineProperty(o, "a", {
  value : 37,
  writable : true, // 爲true時，value才能被賦值運算符改變。默認爲 false。
  enumerable : true, // enumerable爲true時，該屬性纔可以出如今對象的枚舉屬性中。默認爲 false。
  configurable : true // 爲 true 時，該屬性描述符纔可以被改變，默認爲 false。
});

五、實現一個本身的MVVM（原理剖析）
MVVM設計代碼--1
MVVM設計代碼--2
MVVM設計代碼--3
六、 ES6中類和定義

傳統的javascript中只有對象，沒有類的概念。
它是基於原型的面嚮對象語言原型對象特色就是將自身的屬性共享給新對象。
class Person{//定義了一個名字爲Person的類
    constructor(name,age){//constructor是一個構造方法，用來接收參數
        this.name = name;//this表明的是實例對象
        this.age=age;
    }
    say(){//這是一個類的方法，注意千萬不要加上function
        return "個人名字叫" + this.name+"今年"+this.age+"歲了";
    }
}
var obj=new Person("laotie",88);
console.log(obj.say());//個人名字叫laotie今年88歲了

七、JS中的文檔碎片

document.createDocumentFragment()    一個容器，用於暫時存放建立的dom元素
將須要添加的大量元素  先添加到文檔碎片中，再將文檔碎片添加到須要插入的位置，大大 減小dom操做，提升性能
for(var i=100; i>0; i--){ 
    var elem = document.createElement('div');
    document.body.appendChild(elem); // 放到body中
}

// 文檔碎片：(操做1次dom)         
var df = document.createDocumentFragment();          
for(var i=100; i>0; i--){              
    var elem = document.createElement('div');                             
    df.appendChild(elem);
}         
 // 最後放入到頁面上         
document.body.appendChild(df);

八、解構賦值

是一種 Javascript 表達式，將值從數組，或屬性從對象，提取到不一樣的變量中。
對象和數組逐個對應表達式，或稱對象字面量和數組字面量
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4（已完成）提案中的特性
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

九、Array.from與Array.reduce

Array.from() 方法從一個相似數組或可迭代對象中建立一個新的數組實例。
reduce() 方法對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值。
Array.from(arrayLike[, mapFn[, thisArg]])

Array.from()

arrayLike 想要轉換成數組的僞數組對象或可迭代對象。
    mapFn (可選參數) 若是指定了該參數，新數組中的每一個元素會執行該回調函數。
    thisArg (可選參數) 可選參數，執行回調函數 mapFn 時 this 對象。
返回值 一個新的數組實例

arr.reduce(callback[, initialValue])

reduce
十、遞歸的使用
遞歸就是在程序中函數直接或間接調用本身；
若是有個函數foo，若是他是遞歸函數，到最後問題仍是轉換爲函數foo的形式；

遞歸的步驟(技巧)
    1. 假設遞歸函數已經寫好
    2. 尋找遞推關係
    3. 將遞推關係的結構轉換爲遞歸體
    4. 將臨界條件加入到遞歸體中

求1-100的和
function sum(n){
    if(n==1) return 1;
    return sum(n-1) + n;
    // return arguments.callee(n-1) + n;
}

遞歸代碼示範

十一、Obj.keys()與Obj.defineProperty
Object.defineProperty() 方法直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性，並返回這個對象。
Object.defineProperty(obj, prop, descriptor)
Object.keys() 用於枚舉一個對象的屬性名，返回數組。
var x = {};x.a = "a";x.b = "b";Object.keys(x);//=>["a", "b"]
MDN-Object.defineProperty()
Object.keys()

十二、發佈-訂閱模式
發佈—訂閱模式又叫觀察者模式，它定義對象間的一對多的依賴關係，當一個對象的狀態發生改變時，全部依賴於它的對象都將獲得通知。
能夠普遍應用於異步編程中，這是一種替代傳遞迴調函數的方案。
觀察者模式代碼示範1
觀察者模式代碼示範2

1三、實現MVVM的思路分析

一、數據劫持(vue)：經過Object.defineProperty() 去劫持數據每一個屬性對應的getter和setter
二、髒值檢測(angular)：經過特定事件好比input，change，xhr請求等進行髒值檢測。
三、發佈-訂閱模式(backbone)：經過發佈消息，訂閱消息進行數據和視圖的綁定監聽。

一、實現一個Observer，對數據進行劫持，通知數據的變化
二、實現一個Compile，對指令進行解析，初始化視圖，而且訂閱數據的變動，綁定好更新函數
三、實現一個Watcher，將其做爲以上二者的一箇中介點，在接收數據變動的同時，讓Dep添加當前Watcher，並及時通知視圖進行

參考代碼

vue-cli

一、vue-cli 工程經常使用的 npm 命令有哪些？

$ npm install vue-cli -g            //1
$ vue init webpack vue-project        //2
$ cd vue-project                    //3
$ npm install                        //4
$ npm run dev

二、請說出vue-cli工程中每一個文件夾和文件的用處

三、config文件夾下 index.js 的對於工程開發環境和生產環境的配置

module.exports => dev => proxyTable 開發時請求代理
module.exports => port 開發時使用端口
module.exports => build => 規定打包後文件的結構以及名稱

四、詳細介紹一些 package.json 裏面的配置

name: 項目名稱,
version: 版本號,
description: 項目說明,
author: 做者信息,
dependencies: 開發環境和生產環境都須要的依賴包
devDependencies: 生產環境的依賴包

五、npm是什麼？
Node.js的包管理工具。
由於咱們在Node.js上開發時，會用到不少別人寫的JavaScript代碼。若是咱們要使用別人寫的某個包，每次都根據名稱搜索一下官方網站，下載代碼，解壓，再使用，很是繁瑣。因而一個集中管理的工具應運而生：你們都把本身開發的模塊打包後放到npm官網上，若是要使用，直接經過npm安裝就能夠直接用，不用管代碼存在哪，應該從哪下載。

npm cache clean --force    
// 刪除緩存目錄下的全部數據。從npm@5開始爲保證緩存數據的有效性和完整性，須要將加上 --force 參數
npm cache verify    
// 驗證緩存數據的有效性和完整性，清理垃圾數據。

源碼剖析

一、vue內部與運行機制：

Vue.js 全局運行機制
響應式系統的基本原理
什麼是 Virtual DOM？
如何編譯template 模板？
diff算法
批量異步更新策略及 nextTick 原理？
proxy代理？

二、vuex工做原理詳解

Vue.mixin
Vue.use

深刻拓展

一、vue開發命令 npm run dev 輸入後的執行過程
npm run XXX是執行配置在package.json中的腳本，好比：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    // --host 0.0.0.0
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },
這裏就是執行了 node build/webpack.dev.conf.js文件，這個文件直接或間接引用了App.vue main.js文件

二、vue的服務器端渲染
服務器端渲染講解
 代碼示範
 代碼示範-SSR

三、從零寫一個npm安裝包

四、vue-cli中經常使用到的加載器

vue-router vuex vue-lazyload axios 
babel-runtime babel-polyfill jsonp eslint
移動端better-scroll fastclick 
樣式stylus stylus-loader

五、webpack的特色

代碼拆分（支持異步模塊加載）
Loader（支持任意模塊加載，好比圖片、less、css等等）
智能解析
插件系統
快速運行

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。