Vuex相關

時間 2019-11-07

標籤 vuex 相關简体版

原文原文鏈接

你知道路由鉤子嗎？
路由鉤子分爲全局鉤子、路由獨享鉤子、組件內鉤子，全局鉤子用來攔截全部的路由的，進行處理，路由獨享鉤子，本質上和後面的組件內鉤子是同樣的。都是特指的某個路由。不一樣的是，這裏的通常定義在router當中，而不是在組件內。組件內鉤子，是將鉤子函數定義在組件內部了javascript

項目中若是涉及多個組件數據共享你如何解決？
能夠啓用vuexvue

vuex中的五個屬性都是什麼? 有什麼做用？
State 存儲數據
Getter 能夠認爲是 store 的計算屬性，它的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。
Mutation 更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation
Action 包含任意異步操做，經過提交 mutation 間接更變狀態
Module 將 store 分割成模塊，每一個模塊都具備state、mutation、action、getter、甚至是嵌套子模塊java

.react

Vue 實現數據雙向綁定的原理：Object.defineProperty()

vue實現數據雙向綁定主要是：採用 數據劫持結合發佈者-訂閱者模式 的方式，經過 Object.defineProperty() 來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回掉。當把一個普通 JavaScript 對象傳給Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用Object.defineProperty 將他們轉爲 getter/setter。用戶看不到getter / setter ，可是在內部它們讓vue追蹤依賴，在屬性被訪問和修改時通知變化。vuex

vue的數據雙向綁定將MVVM做爲數據綁定的入口，整合Observer，Complie 和 Watcher三者，經過Observer來監聽本身的model的數據變化，經過Complie來解析編譯模板指令(vue中是用來解析 {{ }} ），最終利用watcher搭起observer和complie之間的通訊橋樑，達到數據變化 ==》視圖更新，視圖交互變化（input）==》數據model變動雙向綁定效果。
js實現簡單的雙向綁定瀏覽器

<body> <div id="app"> <input type="text" id="txt"> <p id="show"></p> </div> </body> <script type="text/javascript"> var obj = {}; Object.defineProperty(obj, 'txt', { get: function () { return obj }, set: function (newValue) { document.getElementById('txt').value = newValue; document.getElementById('show').innerHTML = newValue; } }) document.addEventListener('keyup', function (ev) { obj.txt = ev.target.value; }) </script>

4、Vue 組件間的參數傳遞

1.父組件與子組件傳值
父組件傳給子組件：子組件經過props方法接受數據；
子組件傳給父組件：$emit方法傳遞參數;
2.非父子組件間的數據傳遞，兄弟組件傳值
EventBus，就是建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接受事件，項目比較小時，用這個比較合適；
VueX，建立一個數據倉庫，整個項目全局均可以往這個倉庫存放數據和讀取數據緩存

5、Vue的路由實現：hash模式和 history模式
hash模式：在瀏覽器中符號「#」以及#後面的字符稱之爲hash，用window.location.hash讀取；
特色：hash雖然在URL中，但不被包括在HTTP請求中，用來指導瀏覽器動做，對服務端安全無用，hash不會從新加載頁面。安全

history模式：history 採用HTML5的新特性；且提供了兩個新方法：pushState（）、replaceState（）能夠對瀏覽器歷史紀錄棧進行修改，以及popState事件監聽到狀態變動。app

6、 Vue與Angular以及React的區別？
（版本不斷更新，如下區別有可能不是很正確，個人工做中只用到vue，對angular和react不怎麼熟）
1.與AngularJs的區別
相同點：都支持指令，內置指令和自定義指令；都支持過濾器：內置過濾器和自定義過濾器；都支持雙向數據綁定，都不支持低端瀏覽器；異步

不一樣點：AngularJs的學習成本高，好比Dependency、Injecttion特性，而vue.js自己提供的API都比較簡單、直觀；在性能上，AngularJs依賴對數據作髒檢查，因此watcher越多越慢；Vue.js使用基於依賴追蹤的觀察而且使用異步隊列更新，因此的數據都是獨立觸發的。

2. 與React的區別
相同點：
React採用獨特的JSX語法，Vue.js 在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，二者都須要編譯後使用;中心實現相同：一切都是組件，組件實例之間能夠嵌套；都提供合理的鉤子函數，可讓開發者定製化底去處理需求，都不內置列數Ajax，Route等功能到核心包，而是以插件的方式加載;在組件開發中都支持mixins的特性了；

不一樣點：
React採用Virtual DOM會對渲染出來的結果作髒檢查；Vue.js在模板中提供了指令，過濾器等，能夠很是方便，快捷的操做Virtual DOM。

7、Vue路由的鉤子函數

首頁能夠控制導航跳轉，beforeEach，afterEach等。通常用於頁面title的修改，一些須要登陸才能調整頁面重定向功能。
beforeEach 主要的3個參數to，from，next；
to : route即將進入的目標路由對象、
from： route當前導航正要離開的路由、
next： function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉

8、Vuex是什麼？怎麼使用？那種功能場景使用它？

只要來讀取的狀態集中放在store中；改變狀態的方式就是提交mutations。這是個同步的實物；異步邏輯應該封裝中action中。
在main.js引入store，注入。新建一個目錄store，...export。
場景有：單頁面應用，組件之間的狀態，音樂播放，登陸狀態，加入購物車

vuex.jpg

state
Vuex 使用單一狀態樹，既每一個應用將僅僅包含一個store實例，單單一狀態樹和模塊化並不衝突。存放的數據狀態，不能夠直接修改裏面的數據。
mutations
mutations定義的方法動態修改Vuex的store中的狀態或數據。
getters
相似vue的計算屬性，主要用來過濾一些數據。
action
action能夠理解爲經過mutations裏面處理數據的方法變成可異步的處理數據的方法，簡單的說就是異步操做數據。view層經過store.dispath來分配action。

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { increment(context) { context.commit('increment') } } })

modeules
項目特別複雜的時候，可讓每個模塊擁有本身的state，mutation，action，getters，使得結構很是清晰，方便管理

const modulesA = { state: { ... }, mutations: { ... }, actions: { ... } } } const modulesB = { state: { ... }, mutations: { ... }, actions: { ... } } } const store = new Vuex.store({ modules: { a: modulesA, b: modulesB } })

相關標籤/搜索

每日一句

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