Vue針對性筆記

時間 2019-11-24

標籤 vue 針對性筆記简体版

原文原文鏈接

Github原文閱讀

MVVM(Model-View-ViewModel)模型

MVVM分爲Model、View、ViewModel三部分。html

Model表明數據模型，定義數據和業務邏輯，訪問數據層
View表明視圖，展現頁面結構、佈局和外觀（UI）
ViewModel表明視圖模型，負責監聽Model數據變化並更新視圖，處理用戶交互 Model和View是經過ViewModel，Model的數據變化會觸發View的更新，View的交互操做也會使Model的數據發生改變。只須要針對數據進行維護操做，數據的自動同步不須要經過操做dom實現。

Vue指令

內置指令

指令	做用	指望數值類型
v-text	更新元素文本內容	string
v-html	更新元素的`innerHTML`	string
v-show	條件渲染。根據表達式的真假值，控制元素的顯示或隱藏	any
v-if	條件渲染。根據表達式的值的真假條件選擇是否渲染元素這個節點	any
v-else	條件渲染。根據`v-if`的相反條件進行元素渲染	any
v-else-if	條件渲染。作`v-if`的鏈式調用	any
v-for	列表渲染。對數據進行遍歷渲染，最好提供`key`值	Array / Object / number / string
v-on	事件處理。綁定事件監聽器，事件類型由參數指定，表達式能夠是方法名或內聯語句。	Function / Inline Statement / Object
v-bind	動態綁定。動態綁定一個或多個特性，或一個組件`prop`到表達式	any (with argument) / Object (without argument)
v-model	表單綁定。在表單或組件是上建立雙向綁定	隨表單控件類型變化
v-pre	跳過該元素和它的子元素的編譯過程
v-cloak	設置 `[v-cloak] { display: none }`能夠在渲染時延後加載`Vue`實例，避免閃現
v-once	元素和組件只渲染一次，從新渲染,元素/組件及其全部的子節點將被視爲靜態內容並跳過

自定義指令

不是剛需，和生命週期有很大關係，可見五個生命週期鉤子。vue

bind
inserted
update
componentUpdated
unbind

Vue響應式原理

Vue實例化時，遍歷訪問data的全部屬性，使用Object.defineProperty將其屬性所有轉換爲getter/setter進行依賴追蹤以便修改屬性時進行變動通知，每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。git

Vue雙向數據綁定

什麼是雙向數據綁定

model的更新會觸發view的更新，view的更新也會觸發model的更新github

什麼是單向數據流

model的更新會觸發view的更新，可是view的更新不會觸發model的更新web

雙向綁定 or 單向數據流

Vue是單向數據流，不是雙向綁定
Vue的雙向綁定不過是語法糖
Object.defineProperty是用來作響應式更新的，和雙向綁定不要緊

簡單實現一個響應式雙向數據綁定

簡單實現，有一個子組件輸入框，一個按鈕，父組件經過props傳值給子組件，當按鈕增長時，子組件經過$emit通知父組件修改相應的props值。vue-router

<div id="app">
        <parent></parent>
    </div>
    <script>
        var childNode = {
            template:`
                <div class = "child">
                    <div>
                        <span>子組件數據</span>
                        <input v-model="childMsg">
                        <button @click=add>+1</button>
                    </div>
                </div>
            `,
            data(){
                return{
                    childMsg:0
                }
            },
            methods: {
                add(){
                    this.childMsg++;
                    this.$emit('update:foo',this.childMsg)
                }
            }
        };
        var parentNode = {
            template:`
                <div class="parent">
                    <div>
                        <span>父組件數據:{{msg}}</span>
                        <child :foo.sync="msg"></child>
                    </div>
                </div>
            `,
            components:{
                'child':childNode
            },
            data(){
                return{
                    'msg':0
                }
            }
        };
        let vm = new Vue({
            el:'#app',
            components:{
                'parent':parentNode
            }
        })

合理應用計算屬性和偵聽器

計算屬性（`computed`）的應用

處理數據計算，減小模板中計算邏輯
數據緩存。當計算的數據比較多的時候，放在計算屬性中，不會在每次渲染界面的從新計算，提升頁面性能
它必須依賴固定的數據類型（響應式數據），而不是全局數據

偵聽器（`watch）`

更加靈活、通用,能夠觸發一系列的操做
watch提供一個底層API,能夠執行任何邏輯，如函數節流、Ajax異步獲取數據，操做DOM，可是不推薦

計算屬性和偵聽器的應用場景

計算屬性computed能作的,偵聽器watch都能作，反之不行
能用計算屬性computed的儘可能不用偵聽器watch

Vue的生命週期鉤子

鉤子	調用	類型	是否在服務端渲染期間調用
beforeCreate	`Vue`實例初始化以後，數據觀察和事件配置以前	Function	Yes
create	實例建立完成（數據觀察/屬性和方法運算/事件回調）以後，掛載以前	Function	Yes
beforeMount	掛載開始以前，`render`函數首次調用	Function	Yes
mounted	實例掛載完成以後	Function	No
beforeUpdate	`DOM`被`patch`以前調用進行數據修改	Function	No
updated	組件 DOM 更新完成，避免在此期間更改狀態	Function	No
actived	keep-alive 組件激活時	Function	No
deactived	keep-alive 組件停用時	Function	No
beforeDestroy	實例銷燬以前	Function	No
destroyed	實例銷燬	Function	No
errorCaptured	當任何一個來自後代組件的錯誤時被捕獲時收到三個參數：錯誤對象、發生錯誤的組件實例，和一個包含錯誤在何處被捕獲信息的字符串返回 false，以阻止該錯誤繼續向上冒泡	Function	No

函數式掛件

通常用於作展現用。vuex

functional:true
無狀態、無實例、沒有this上下文、無生命週期

Vue組件

Vue組件 = Vue實例 = new Vue(options)，每一個組件就是一個Vue實例。組件能夠是頁面中每個區域板塊，也能夠是某一個複用業務邏輯，也能夠是每個單頁面。編程

組件的構成

就以上面的雙向數據綁定實現爲例：數組

屬性：
- 自定義屬性props：組件props中聲明的屬性，父組件使用props定義數據屬性，向子組件傳遞數據
- 原生屬性attrs：沒有聲明的屬性，默認自動掛載到組件根元素上，設置inheritAttrs爲false能夠關閉自動掛載
- 特殊屬性class、style：掛載在組件根元素上，支持字符串、對象、數組等多種語法
事件event：
- 普通事件：@click 、@input、@change、@xxx等事件，經過this.$emit('xxx',...)觸發自定義事件event向父組件發送消息
- 修飾符事件：@input.trim、@click.stop、@submit.prevent等，通常用於原生HTML元素，自定義組件須要自行開發支持
插槽slot：
- 普通插槽：slot進行組件內容分發，插入子組件內容，簡單點就是傳遞內容的 <template slot="xxx">...</template>、<template v-slot="xxx">...</template>
- 做用域插槽：須要根據子組件的某些值來作動態處理，能夠簡單理解爲返回組件的函數 <template slot="xxx" slot-scope="props">...</template>、<template v-slot:xxx="props">...</template>

組件通訊

父子組件通訊：父組件使用props向子組件通訊，子組件使用$emit向父組件傳遞消息
非父子組件通訊：父組件可使用v-on監聽子組件的任何事件，子組件使用$emit傳入事件，這樣父組件就會收到事件並更新
跨級組件通訊：使用Vuex比較好管理

組件更新

組件的更新都是由數據驅動的，沒有特殊狀況，任何更改DOM的行爲都是在做死。緩存

數據來源（單向）

包含三個部分：

來自父組件的屬性props
來自組件自身的狀態data
來自狀態管理器，如vuex vue.observable

注意

狀態和屬性的改變未必會觸發組件更新

高級特性provide/inject

通常用於底層組件通訊。底層組件通訊，不只屬性要層層傳遞，事件也要層次冒泡，這是很耗性能的。

Vue-router路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

嵌套的路由/視圖表
模塊化的、基於組件的路由配置
路由參數、查詢、通配符
基於 Vue.js 過渡系統的視圖過渡效果
導航控制
帶有自動激活的 CSS class 的連接
HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行爲

下面是一個簡單路由的實現：

<div id="app" class="demo">
      <h1>Hello App!</h1>
      <p>
          <!-- 經過router-link導航 -->
          <!-- 經過傳入'to '屬性指定連接-->
          <!--  <router-link> 默認會被渲染成一個 `<a>` 標籤-->
              <router-link to="/foo">go to Foo</router-link>
              <router-link to="/bar">go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的組件將渲染在這裏 -->
      <router-view></router-view>
   </div>
   <!-- 
       0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
       1. 定義 (路由) 組件。
       2.定義路由
    -->
   <script>
       //1. 定義 (路由) 組件。
       const Foo = {template:'<div>foo</div>'};
       const Bar = {template:'<div>bar</div>'};
       //2.定義路由
       //每一個路由應該映射一個組件。其中component能夠是經過Vue.extend()建立的組件構造器
       //或者只是一個組件配置對象
       const routes = [
           {path:'/foo',component:Foo},
           {path:'/bar',component:Bar}
       ]

       //3.建立router實例，而後傳‘routes’配置
       const router = new VueRouter({
           routes//（縮寫）至關於routes:routes
       })

       //4.建立和掛載根實例
       //要記得經過router配置參數注入路由，從而讓整個應用都有路由功能
       
       const app = new Vue({
           router
       }).$mount('#app');