Подготовка к фронтенд-интервью — статьи на Vue

1. MVC && MVVM  
2. 数据双向绑定
3. Vue的生命周期
4. 虚拟dom的实现原理
5. vue-router
6. Proxy
7. vuex

MVC && MVVM

Принцип реализации V-Show и V-if

Когда V-Show имеет значение false, DISPLAY: '' устанавливается JS, устанавливая Display: ''; поэтому для того, чтобы JS установил свойства отображения недействительными.

V-If - вручную добавлять или удалять элементы DOM через JS.

Связь между компонентами

Связь между компонентами делится на следующие виды:

1. Родитель --> Ребенок:

Родительский элемент передается в формате атрибутов, а дочерний элемент принимается с атрибутом props;

// 父元素
<editor :name='data'></editor>

// 子元素
props: {
    name: {
        type: Object,
        defalut: function(){
        
        }
    }
}

2. Ребенок --> Отец:

Привяжите событие к родительскому компоненту и используйте $emit для запуска события из компонента.

3. Компоненты Brother:

4. Когда компоненты глубоко вложены: vuex

Двусторонняя привязка данных Vue

• Модель публикации-подписки:

1. Вся модель публикации-подписки похожа на платформу, которая позволяет пользователям подписываться и публиковать, что похоже на платформу общедоступных учетных записей WeChat.
2. Подписчики могут подписаться на несколько операций, так же как мы можем подписаться на несколько официальных учетных записей, но нам нужно предоставить платформе имя, на которое мы хотим подписаться, а также некоторую информацию о самих подписчиках.
3. Как издатель, это фактически как публичный аккаунт, ему все равно, кто является конкретными подписчиками, пока подписанные пользователи будут получать опубликованную информацию. Вся операция публикации должна информировать платформу о том, какую официальную учетную запись необходимо опубликовать и какую информацию опубликовать.
4. Подписчики также могут отменить подписку, поэтому платформе необходимо знать, какой пользователь инициировал отмену и как называется отмененная официальная учетная запись.

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事件');

• Как использовать Object.defineProperty

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是不可枚举的
}

1. Невозможно отслеживать изменения массива

1. Соблюдайте: слушатель данных, который контролирует все свойства объекта данных, включая суб-свойства, и если он меняется, получает новейшее значение и уведомляет подписчиков
2. компиляция: парсер инструкций, который сканирует и анализирует инструкции узла каждого элемента, заменяет данные в соответствии с шаблоном инструкции и связывает соответствующие функции.
3. наблюдатель: подписчик, который будет действовать как мост между прослушивателем данных и синтаксическим анализатором директив. Возможность подписываться на изменения данных каждого атрибута, получать уведомления об изменениях данных, выполнять функции обратного вызова и обновлять страницы пользовательского интерфейса.
4. Функция входа Mvvm объединяет три

Жизненный цикл Vue

Vue виртуальный DOM

1. создать дерево дома
2. Используйте алгоритм diff для сравнения, сохраните объект различий исправлений и нажмите следующие четыре формата.

• Изменение типа узла
• изменение свойства
• изменение текста
• добавить/переместить/удалить дочерние узлы

• Пройдите патчи и удалите узлы, которые необходимо изменить.
• Частично обновите дом, используйте document.fragments для работы с домом и выполните однократное обновление браузера.

document.fragment:

nextTick

vue-router

1. this.$router.push()
2. <router-link to=''></router-link>
3. this.$router.replace()

По умолчанию он находится в режиме HASH, а история требует конфигурации фона, которая реализована с помощью API истории HTML5 для мониторинга изменений.

Proxy

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

1. Вы можете отслеживать изменения в массиве, чего не может сделать defineProperty
2. Слушайте непосредственно объект, а не свойства объекта, и создавайте новый объект

Vuex

• Что такое Векс?

• Основные свойства Vuex:

• процесс передачи данных vuex

1. Когда компонент изменяет данные, вызовите диспетчеризацию, чтобы вызвать метод в действии;
2. Каждое действие имеет метод фиксации, который можно использовать для изменения методов в мутациях посредством фиксации для изменения данных.
3. В мутации будет параметр состояния, чтобы данные состояния можно было изменить с помощью мутации.
4. После изменения данных страница меняется

• Зачем использовать vuex?

1. Когда компоненты вложены в несколько слоев, передача данных между родительскими и дочерними компонентами усложняется.
2. Повышение удобочитаемости и ремонтопригодности кода
3. Данные реагируют, сокращая операции по распространению данных;