vue 知識體系之基礎入門篇

時間 2020-03-03

標籤 vue 知識體系基礎入門简体版

原文原文鏈接

vue 做爲目前前端三大框架之一，對於前端開發者能夠說是必備技能。那麼怎麼系統地學習和掌握 vue 呢？爲此，我作了簡單的知識體系體系總結，不足之處請各位大佬多多包涵和指正，若是喜歡的能夠點個小贊！本文源自個人掘金：https://juejin.im/post/5e5c5d...css

Vue 的優缺點是什麼

優勢：vue

低耦合。視圖（View）能夠獨立於 Model 變化和修改，一個 ViewModel 能夠綁定到不一樣的 View 上，當 View 變化的時候 Model 能夠不變，當 Model 變化的時候 View 也能夠不變。
可重用性。你能夠把一些視圖邏輯放在一個 ViewModel 裏面，讓不少 view 重用這段視圖邏輯。
獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用 Expression Blend 能夠很容易設計界面並生成 xml 代碼。
可測試。界面素來是比較難於測試的，而如今測試能夠針對 ViewModel 來寫。
vue 是單頁面應用，使頁面局部刷新，不用每次跳轉頁面都要請求全部數據和 dom，這樣大大加快了訪問速度和提高用戶體驗。並且他的第三方 ui 庫不少節省開發時間

缺點：不利於 SEO，社區維護力度不強，相比還不夠成熟webpack

vue 經常使用指令

v-html / v-text：把值中的標籤渲染出來
v-model：放在表單元素上的，實現雙向數據綁定
v-bind（縮寫 :）：用於綁定行內屬性
v-if / v-show 是否能顯示，true 能顯示，false 不能顯示
v-cloak：須要配合 css 使用：解決小鬍子顯示問題
v-once 對應的標籤只渲染一次
v-for ：循環顯示元素
v-on 事件綁定

事件修飾符

Vue.js 爲 v-on 提供了事件修飾符，修飾符是由點開頭的指令後綴來表示的。nginx

stop：阻止事件繼續傳播
prevent：阻止事件默認行爲
capture：添加事件監聽器時使用事件捕獲模式
self：當前元素觸發時才觸發事件處理函數
once：事件只觸發一次
passive：告訴瀏覽器你不想阻止事件的默認行爲，不能和.prevent 一塊兒使用。

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="toDo"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="toSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="toDo"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="toDo">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<div v-on:click.self="toDo">...</div>

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="toDo"></a>

<!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 -->
<div v-on:scroll.passive="onScroll">...</div>

表單修飾符

.lazy 在輸入框輸入完內容，光標離開時才更新視圖
.trim 過濾首尾空格
.number 若是先輸入數字，那它就會限制你輸入的只能是數字;若是先輸入字符串，那就至關於沒有加.number

過濾器 filter

過濾器是對即將顯示的數據作進一步的篩選處理，而後進行顯示，值得注意的是過濾器並無改變原來的數據，只是在原數據的基礎上產生新的數據。es6

定義過濾器
全局註冊

Vue.filter('myFilter', function (value1[,value2,...] ) {
// 代碼邏輯
})

局部註冊web

new Vue({
 filters: {
    'myFilter': function (value1[,value2,...] ) {
       // 代碼邏輯
      }
    }
})

使用過濾器

<!-- 在雙花括號中 -->
<div>{{ message | myFilter }}</div>

<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | myFilter"></div>

計算屬性 computed

依賴其它屬性值，而且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時纔會從新計算 computed 的值；ajax

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<script>
  var vm = new Vue({
    el: '#example',
    data: {
      message: 'Hello'
    },
    computed: {
      // 計算屬性的 getter
      reversedMessage: function() {
        // `this` 指向 vm 實例
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

監聽屬性 watch

觀察和響應 Vue 實例上的數據變更。相似於某些數據的監聽回調，每當監聽的數據變化時都會執行回調進行後續操做。它能夠有三個參數正則表達式

handler：其值是一個回調函數。即監聽到變化時應該執行的函數
deep：其值是 true 或 false；確認是否深刻監聽。
immediate：其值是 true 或 false，確認是否以當前的初始值執行 handler 的函數

watch:{
  message:{
    handler:function(val, oldVal){
      console.log(val, oldVal)
    },
    deep: true,
    immediate: true
  }
}

computed 和 watch 的區別

computed：是計算屬性，依賴其它屬性值，而且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時纔會從新計算 computed 的值；
watch：更多的是「觀察」的做用，相似於某些數據的監聽回調，每當監聽的數據變化時都會執行回調進行後續操做。

運用場景

當咱們須要進行數值計算，而且依賴於其它數據時，應該使用 computed，由於能夠利用 computed 的緩存特性，避免每次獲取值時，都要從新計算；
當咱們須要在數據變化時執行異步或開銷較大的操做時，應該使用 watch，使用 watch 選項容許咱們執行異步操做 ( 訪問一個 API )，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這些都是計算屬性沒法作到的。

生命週期函數

beforeCreate(建立前) vue 實例的掛載元素$el 和數據對象 data 都是 undefined, 還未初始化
created(建立後) 完成了 data 數據初始化, el 還未初始化
beforeMount(載入前) vue 實例的$el 和 data 都初始化了, 相關的 render 函數首次被調用
mounted(載入後) 此過程當中進行 ajax 交互
beforeUpdate(更新前)
updated(更新後)
beforeDestroy(銷燬前)
destroyed(銷燬後)

Vue 的父組件和子組件生命週期鉤子執行順序是什麼?

渲染過程：父組件掛載完成必定是等子組件都掛載完成後，纔算是父組件掛載完，因此父組件的 mounted 在子組件 mouted 以後。

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子組件更新過程：

影響到父組件：父 beforeUpdate -> 子 beforeUpdate->子 updated -> 父 updted
不影響父組件：子 beforeUpdate -> 子 updated

父組件更新過程：

影響到子組件：父 beforeUpdate -> 子 beforeUpdate->子 updated -> 父 updted
不影響子組件：父 beforeUpdate -> 父 updated

銷燬過程：

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

組件註冊

組件（component）是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。組件的使用過程包括定義和註冊的過程。

定義組件

// 方法一 Vue.extend
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})
// 方法二：新建一個.vue 文件

註冊組件

// 全局註冊
Vue.component('my-component', MyComponent)

// 局部註冊
new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
})

使用組件

<div id="example">
  <my-component></my-component>
</div>

組件傳值

1. props 父組件給子組件傳值

props 值能夠是一個數組或對象;

// 數組:不建議使用
props:[]

// 對象
props:{
 inpVal:{
  type:Number, //傳入值限定類型
  // type 值可爲String,Number,Boolean,Array,Object,Date,Function,Symbol
  // type 還能夠是一個自定義的構造函數，而且經過 instanceof 來進行檢查確認
  required: true, //是否必傳
  default:200,  //默認值,對象或數組默認值必須從一個工廠函數獲取如 default:()=>[]
  validator:(value) {
    // 這個值必須匹配下列字符串中的一個
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
 }
}

2. $emit 子組件給父組件傳值

觸發子組件觸發父組件給本身綁定的事件,其實就是子傳父的方法

// 父組件
<v-Header @title="title">
// 子組件
this.$emit('title',{title:'這是title'})

3. vuex 數據狀態管理

state:定義存貯數據的倉庫 ,可經過 this.$store.state 或 mapState 訪問
getter:獲取 store 值,可認爲是 store 的計算屬性,可經過 this.$store.getter 或 mapGetters 訪問
mutation:同步改變 store 值,可經過 mapMutations 調用
action:異步調用函數執行 mutation,進而改變 store 值,可經過 this.$dispatch 或 mapActions 訪問
modules:模塊,若是狀態過多,能夠拆分紅模塊,最後在入口經過...解構引入

4. attrs 和 listeners

attrs 獲取子傳父中未在 props 定義的值

// 父組件
<home title="這是標題" width="80" height="80" imgUrl="imgUrl"/>
// 子組件
mounted() {
  console.log(this.$attrs) //{title: "這是標題", width: "80", height: "80", imgUrl: "imgUrl"}
}

// 相對應的若是子組件定義了 props,打印的值就是剔除定義的屬性
props: {
  width: {
    type: String,
    default: ''
  }
},
mounted() {
  console.log(this.$attrs) //{title: "這是標題", height: "80", imgUrl: "imgUrl"}
}

listeners:場景:子組件須要調用父組件的方法。解決:父組件的方法能夠經過 v-on="listeners" 傳入內部組件——在建立更高層次的組件時很是有用

// 父組件
<home @change="change"/>

// 子組件
mounted() {
  console.log(this.$listeners) //便可拿到 change 事件
}

5. provide 和 inject

provide 和 inject 主要爲高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中; 而且這對選項須要一塊兒使用; 以容許一個祖先組件向其全部子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。

//父組件:
provide: { //provide 是一個對象,提供一個屬性或方法
  foo: '這是 foo',
  fooMethod:()=>{
    console.log('父組件 fooMethod 被調用')
  }
},

// 子或者孫子組件
inject: ['foo','fooMethod'], //數組或者對象,注入到子組件
mounted() {
  this.fooMethod()
  console.log(this.foo)
}
//在父組件下面全部的子組件均可以利用inject

6. $refs

一般用於父組件調用子組件的方法

// 父組件
<home ref="child"/>

mounted(){
  console.log(this.$refs.child) //便可拿到子組件的實例,就能夠直接操做 data 和 methods
}

7. EventBus

就是聲明一個全局 Vue 實例變量 EventBus , 把全部的通訊數據，事件監聽都存儲到這個變量上;
相似於 Vuex。但這種方式只適用於極小的項目 3.原理就是利用 emit 並實例化一個全局 vue 實現數據共享

// 在 main.js
Vue.prototype.$eventBus = new Vue()

// 傳值組件
this.$eventBus.$emit('eventTarget', '這是eventTarget傳過來的值')

// 接收組件
this.$eventBus.$on('eventTarget', v => {
  console.log('eventTarget', v) //這是eventTarget傳過來的值
})

路由配置和使用

配置路由信息

let routes = [
  {
    path: '/home',
    component: home
  },
  {
    path: '/list',
    component: list
  }
]

let router = new VueRouter({
  routes: routes
})
let vm = new Vue({
  el: '#app',
  router
})

在html使用

<div id="app">
   <router-link to='/home' active-class='current'>首頁</router-link>
   <router-link to='/list' tag='div'>列表</router-link>
   <router-view></router-view>
</div>

此外，vue-router還能夠經過一下方式配置動態路由

query傳參（問號傳參）
params傳參（路徑傳參）

路由懶加載

Vue 項目中實現路由按需加載（路由懶加載）的 3 中方式：

// 一、Vue異步組件技術：
{
    path: '/home',
    name: 'Home',
    component: resolve => reqire(['path路徑'], resolve)
}

// 二、es6提案的import()
const Home = () => import('path路徑')

// 三、webpack提供的require.ensure()
{
    path: '/home',
    name: 'Home',
    component: r => require.ensure([],() =>  r(require('path路徑')), 'demo')
}

路由守衛

vue-router 提供的導航守衛主要用來經過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程當中：全局的, 單個路由獨享的, 或者組件級的。

全局前置守衛 經常使用於判斷登陸狀態和菜單權限校驗

router.beforeEach((to, from, next) => {
  let isLogin = sessionStorage.getItem('isLogin') || ''
  if (!isLogin && to.meta.auth) {
    next('/login')
  } else {
    next()
  }
})

to: Route: 即將要進入的目標路由對象
from: Route: 當前導航正要離開的路由
next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

組件內的守衛

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

路由緩存 keepalive

keep-alive 是 Vue 提供的一個抽象組件，用來對組件進行緩存，從而節省性能，因爲是一個抽象組件，因此在 v 頁面渲染完畢後不會被渲染成一個 DOM 元素。

<keep-alive>
  <router-view></router-view>
</keep-alive>

當組件在 keep-alive 內被切換時組件的 activated、deactivated 這兩個生命週期鉤子函數會被執行

1. 使用參數include/exclude

include: 字符串或正則表達式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。

<keep-alive include="a,b">
  <router-view></router-view>
</keep-alive>
<keep-alive exclude="c">
  <router-view></router-view>
</keep-alive>

include 屬性表示只有 name 屬性爲 a，b 的組件會被緩存，（注意是組件的名字，不是路由的名字）其它組件不會被緩存。 exclude 屬性表示除了 name 屬性爲 c 的組件不會被緩存，其它組件都會被緩存。

2. 使用$route.meta 的 keepAlive 屬性

須要在 router 中設置 router 的元信息 meta

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

在 app.vue 進行區別緩存和不用緩存的頁面

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

hash 和 history模式

hash 模式：在瀏覽器中符號「#」，#以及#後面的字符稱之爲 hash，用 window.location.hash 讀取。特色：hash 雖然在 URL 中，但不被包括在 HTTP 請求中；用來指導瀏覽器動做，對服務端安全無用，hash 不會重加載頁面。
history 模式：history 採用 HTML5 的新特性；且提供了兩個新方法： pushState()， replaceState()能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。
hash 模式中（ http://localhost:8080#home），即便不須要配置，靜態服務器始終會去尋找index.html並返回給咱們，而後vue-router會獲取 #後面的字符做爲參數，對前端頁面進行變換。
history 模式中，咱們所想要的狀況就是：輸入http://localhost:8080/home，但最終返回的也是index.html，而後vue-router會獲取 home 做爲參數，對前端頁面進行變換。那麼在nginx中，誰能作到這件事呢？答案就是try_files。