vue常見知識點整理

mvvm 是 model-view-viewmodel 的縮寫。mvvm 是一種設計思想。model 層代表資料模型，也可以在 model 中定義資料修改和操作的業務邏輯；view 代表 ui 元件，它負責將資料模型轉化成 ui 展現出來，viewmodel 是乙個同步 view 和 model 的物件。

在 mvvm 架構下，view 和 model 之間並沒有直接的聯絡，而是通過 viewmodel 進行互動，model 和 viewmodel 之間的互動是雙向的，因此 view 資料的變化會同步到 model 中，而 model 資料的變化也會立即反應到 view 上。

viewmodel 通過雙向資料繫結把 view 層和 model 層連線了起來，而 view 和 model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作 dom, 不需要關注資料狀態的同步問題，複雜的資料狀態維護完全由 mvvm 來統一管理。

mvc 和 mvvm 其實區別並不大。都是一種設計思想。主要就是 mvc 中 controller 演變成 mvvm 中的 viewmodel。mvvm 主要解決了 mvc 中大量的 dom 操作使頁面渲染效能降低，載入速度變慢，影響使用者體驗。和當 model 頻繁發生變化，開發者需要主動更新到 view 。

答：總共分為 8 個階段建立前/後，載入前/後，更新前/後，銷毀前/後。

父元件與子元件傳值

//父元件通過標籤上面定義傳值

//子元件通過props方法接受資料

}

子元件向父元件傳遞資料

//子元件通過$emit方法傳遞引數//}

vue-router 模組的 router-link 元件。

在實際專案中我們會碰到多層巢狀的元件組合而成，但是我們如何實現巢狀路由呢？因此我們需要在 vuerouter 的引數中使用 children 配置，這樣就可以很好的實現路由巢狀。

index.html，只有乙個路由出口

main.js，路由的重定向，就會在頁面一載入的時候，就會將 home 元件顯示出來，因為重定向指向了 home 元件，redirect 的指向與 path 的必須一致。children 裡面是子路由，當然子路由裡面還可以繼續巢狀子路由。

import vue from 'vue'
import vuerouter from 'vue-router'
vue.use(vuerouter)
//引入兩個元件
import home from "./home.vue"
import game from "./game.vue"
//定義路由
const routes = [
,//重定向,指向了home元件]}
]//建立路由例項
const router = new vuerouter()
new vue(,
methods: ,
router
})

home.vue，點選顯示就會將子路由顯示在出來，子路由的出口必須在父路由裡面，否則子路由無法顯示。

webpack 中提供了 require.ensure()來實現按需載入。以前引入路由是通過 import 這樣的方式引入，改為 const 定義的方式進行引入。

import  home   from '../../common/home.vue'

const  home = r => require.ensure( , () => r (require('../../common/home.vue')))

// 新建 store.js
import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store()
import store from './store'
...

三種

v-if(判斷是否隱藏)、v-for(把資料遍歷出來)、v-bind(繫結屬性)、v-model(實現雙向繫結)

vue.js 是採用資料劫持結合發布者-訂閱者模式的方式，通過 object.defineproperty()來劫持各個屬性的 setter，getter，在資料變動時發布訊息給訂閱者，觸發相應的監聽**。

具體步驟：

第一步：需要 observe 的資料物件進行遞迴遍歷，包括子屬性物件的屬性，都加上 setter 和 getter 這樣的話，給這個物件的某個值賦值，就會觸發 setter，那麼就能監聽到了資料變化

第二步：compile 解析模板指令，將模板中的變數替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，收到通知，更新檢視

第三步：watcher 訂閱者是 observer 和 compile 之間通訊的橋梁，主要做的事情是:

第四步：mvvm 作為資料繫結的入口，整合 observer、compile 和 watcher 三者，通過 observer 來監聽自己的 model 資料變化，通過 compile 來解析編譯模板指令，最終利用 watcher 搭起 observer 和 compile 之間的通訊橋梁，達到資料變化 -> 檢視更新；檢視互動變化(input) -> 資料 model 變更的雙向繫結效果。

有 5 種，分別是 state、getter、mutation、action、module

如果請求來的資料不是要被其他元件公用，僅僅在請求的元件內使用，就不需要放入 vuex 的 state 裡

如果被其他地方復用，請將請求放入 action 裡，方便復用，幷包裝成 promise 返回

vuex 僅僅是作為 vue 的乙個外掛程式而存在，不像 redux,mobx 等庫可以應用於所有框架，vuex 只能使用在 vue 上，很大的程度是因為其高度依賴於 vue 的 computed 依賴檢測系統以及其外掛程式系統，

vuex 整體思想誕生於 flux,可其的實現方式完完全全的使用了 vue 自身的響應式設計，依賴監聽、依賴收集都屬於 vue 對物件 property

setget 方法的**劫持。最後一句話結束 vuex 工作原理，vuex 中的 store 本質就是沒有 template 的隱藏著的 vue 元件；

vue.use(vuex) 方法執行的是 install 方法，它實現了 vue 例項物件的 init 方法封裝和注入，使傳入的 store 物件被設定到 vue 上下文環境的store中。因此在vuecomponent任意地方都能夠通過this.store 訪問到該 store。

在 store 構造方法中有 makelocalcontext 方法，所有 module 都會有乙個 local context，根據配置時的 path 進行匹配。所以執行如 dispatch('

submitorder

', payload)這類 action 時，預設的拿到都是 module 的 local state，如果要訪問最外層或者是其他 module 的 state，只能從 rootstate 按照 path 路徑逐步進行訪問。

store 初始化時，所有配置的 action 和 mutation 以及 getters 均被封裝過。在執行如 dispatch('

submitorder

', payload)的時候，actions 中 type 為 submitorder 的所有處理方法都是被封裝後的，其第乙個引數為當前的 store 物件，所以能夠獲取到等資料。

vuex 中修改 state 的唯一渠道就是執行 commit('

xx', payload) 方法，其底層通過執行 this._withcommit(fn) 設定_committing 標誌變數為 true，然後才能修改 state，修改完畢還需要還原_committing 變數。外部修改雖然能夠直接修改 state，但是並沒有修改_committing 標誌位，所以只要 watch 一下 state，state change 時判斷是否_committing 值為 true，即可判斷修改的合法性。

devtoolplugin 中提供了此功能。因為 dev 模式下所有的 state change 都會被記錄下來，'

時空穿梭

' 功能其實就是將當前的 state 替換為記錄中某個時刻的 state 狀態，利用 store.replacestate(targetstate) 方法將執行 this._vm.state = state 實現。

axios 是請求後台資源的模組。 npm i axios -s

如果傳送的是跨域請求，需在配置檔案中 config/index.js 進行配置

vue常見知識點整理

vue 知識點整理

CSS常見知識點整理

VUE基礎知識點整理

vue常見知識點整理

vue 知識點整理

CSS常見知識點整理

VUE基礎知識點整理

相關推薦