1. MVC && MVVM
2. 數據雙向綁定
3. Vue的生命週期
4. 虛擬dom的實現原理
5. vue-router
6. Proxy
7. vuex複製代碼
v-show爲false時,經過js設置display爲none;爲true時,設置display:''; 這樣爲了讓js設置的display屬性失效。javascript
v-if是經過js手動添加或刪除dom元素。vue
組件間通訊總共分爲一下幾種:java
一、父 --> 子:es6
父元素用屬性的格式傳進來,子元素用props屬性接收;算法
// 父元素
<editor :name='data'></editor>
// 子元素
props: {
name: {
type: Object,
defalut: function(){
}
}
}
複製代碼
二、子 --> 父:vue-router
在父組件綁定一個事件,自組件用$emit出發事件vuex
三、兄弟組件:數組
四、組件嵌套比較深的時候:vuex瀏覽器
const SubPub = function() {
// 用Object格式,能夠經過value存儲訂閱者的一些信息
// 訂閱器 --- 相似於微信公衆號這個平臺,每個元素相似於一個公衆號,key值爲公衆號的名字,value值記錄訂閱公衆號的人;
this._observer = {};
}
SubPub.prototype = {
// 訂閱函數,須要提供我要訂閱的公衆號名稱,以及本身的姓名
subscribe: function(type, callback) {
const self = this;
if(Type(callback) !== 'function') return;
if(!self._observer[type]) this._observer[type] = []
this._observer[type].push(callback);
return self;
},
// 發佈函數,須要提供哪一個公衆號須要發佈信息,以及發佈的內容;
publish: function() {
const self = this;
const type = Array.prototype.shift.call(arguments); // 由於arguments不是數組,是一種類數組類型,因此沒有shift、slice這些方法
//發佈的內容
const theme = Array.prototype.slice.call(arguments);
const subs = self._observer[type];
if(!subs || !subs.length) return;
subs.forEach(sub => {
sub.apply(self, theme);
});
return this;
},
// 取消訂閱,須要提供取消公衆號的名字,和發起該取消操做的用戶
removeSub: function(type, callback) {
const _subs = this._observer[type];
if(!_subs || !_subs.length) return;
_subs.map((item, index) => {
if(item === callback) {
_subs.splice(index, 1);
}
})
return this;
}
}
function Type(value) {
return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}
// 實例一個發佈訂閱器
let sp = new SubPub();
// 定義訂閱者
const sub1 = function(data) {
console.log('sub1' + data);
}
const sub2 = function(data) {
console.log('sub2' + data);
}
const sub3 = function(data) {
console.log('sub3' + data);
}
// 發起訂閱操做
sp.subscribe('click', sub1);
sp.subscribe('input',sub1);
sp.subscribe('qqq',sub1);
sp.subscribe('click', sub2);
sp.subscribe('input', sub3);
// 開啓發布
sp.publish('click', '第一次發佈click事件');
sp.publish('input', '第一次發佈input事件');
sp.removeSub('click', sub1).publish('click', '第二次發佈click事件');複製代碼
let obj = {};
let song = '七里香';
obj.singer = 'JayZhou';
Object.defineProperty(obj, 'music', {
configurable: true, // 能夠配置對象, 爲true的時候才能夠刪除屬性
enumerable: false, // 是否可枚舉
get () {
return song;
},
set (val) {
song = val;
}
});
console.log(obj.music); // {singer: '周杰倫', music: '七里香'}
obj.music = '聽媽媽的話';
console.log(obj.music);
delete obj.music
console.log(obj);
for(var i in obj) {
console.log(i); // 只有singer 由於music是不可枚舉的
}複製代碼
默認狀況下是hash模式,history須要後臺配置,利用Html5的History API實現的,監聽change變化。緩存
let p = new Proxy(target, handler);複製代碼
var proxy = new Proxy({}, {
get: function(target, key, receiver) {
console.log(`get ${key}`);
return Reflect.get(target, key, receiver);
},
set: function(target, key, value, receiver) {
console.log(`set ${key}`);
return Reflect.set(target, key, value, receiver);
}
});
proxy.name = 'jack';
// set name
console.log(proxy.name);
// get name
// jack複製代碼