Запись интервью в марте (незаконченная)

опрос
  • Вот реальные вопросы, которые задавали все компании, с которыми я беседовал в марте.
  • Есть еще много людей, которые не написали резюме ответа, но написали ответ.Если ответ не очень хороший, пожалуйста, дайте мне еще совет.
  • Я сошел на берег, я надеюсь, что вы все развеселитесь!

личные вопросы компании

  • Самостоятельное введение
  • Размер команды компании
  • Бизнес компании
  • твоя основная работа
  • Фронтальная технология Бэкэнд технология
  • Как убедить начальника провести рефакторинг проекта
  • Расскажите мне о проекте, который вы считаете хорошим
  • Процесс разработки проекта
  • Как выполнить развертывание проекта
  • Проводился ли мониторинг производительности и анализ данных?
    • В основном отслеживается через навигатор Timing api.
    • Платформа мониторинга Yueying представлена ​​для мониторинга
  • Управление кодом и проверка между командами

Css

карта флип

css блочная модель

Блочная модель включает в себя содержимое элемента, состоящее из границы, отступов и полей. Стандартный размер модели коробки = ширина (содержимое) + граница + отступ + поле Странный размер поля = ширина (содержимое + граница + отступ) + поле

css левое и правое расположение

BFC

  • Что такое BFC и как он применяется?
    • Контекст блочного формата, форматирование на уровне блока.
    • Независимая область рендеринга, рендеринг внутренних элементов не повлияет на элементы за границей
  • Общие условия образования БФК
    • плавать не никто
    • позиция абсолютная или фиксированная
    • перелив не виден
    • дисплей гибкий встроенный блок
  • Общие приложения BFC
    • очистить поплавок

Основы Js

Определить тип данных

1. typeof

  • Определить все типы значений (неопределенное, строковое, числовое, логическое, символ)
  • Определяем, является ли это функцией // функция
  • Определите, является ли это объектом ссылочного типа (null, [1,2,3], {a: 2})

image.png image.png

2. instanceof

  • Используется для определения того, является ли A экземпляром B, например A instanceof B
  • instance можно использовать только для определения того, принадлежат ли два объекта отношениям экземпляра, но не для определения того, к какому типу принадлежит экземпляр объекта.
  • Таким образом, обычно используется, чтобы судить, является ли это массивом, [] instanceof Array

3. Object.prototype.toString.call()

developer.Mozilla.org/this-cn/docs/…

  • toString() — это метод-прототип Object. При вызове этого метода он по умолчанию возвращает [Class] текущего объекта. Это внутреннее свойство, формат которого — [object Xxx], где Xxx — тип объекта.
  • Для объектов Object прямой вызов toString() может вернуть [object Object], в то время как для других объектов вам необходимо вызывать через call/apply, чтобы вернуть правильную информацию о типе.
let obj = new Object()
obj.toString()  // [object Object]

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用

4. constructor

Конструктор является свойством прототипа прототипа.Когда функция определена, движок js добавит прототип прототипа к функции, а свойство конструктора в прототипе указывает на ссылку на функцию, поэтому при переписывании прототипа исходный конструктор будет потерян. Уведомление: 1: null и undefined не имеют конструктора, этот метод не может судить. 2: Кроме того, если вы настраиваете объект, после того, как разработчик переписывает прототип, исходный конструктор будет потерян.Поэтому для стандартизации разработки, как правило, необходимо переназначить конструктор при переписывании прототипа объекта, чтобы обеспечить тип экземпляра объекта.image.png

что такое закрытие

  • Областью действия внутренней функции, которая может получить доступ к внешней функции, является замыкание

Отличие стрелочных функций от обычных функций

у-у-у. Краткое описание.com/afraid/231 ах 6 волос 58 ой...

  1. Стрелочные функции — это анонимные функции, их нельзя использовать в качестве конструкторов и нельзя использовать новые значения.
  2. Стрелочные функции не могут связывать аргументы, вместо этого используйте остальные параметры... Решено
  3. this стрелочной функции всегда указывает на this своего контекста, и изменить его невозможно, this обычной функции указывает на объект, вызвавший ее.
  4. Стрелочная функция не привязывает this, она будет захватывать значение this контекста, в котором оно находится, как собственное значение this.

Просто скажите, что это указывает на проблему

1. Обычный вызов функции указывает на окна; 2. Объектная функция call this указывает на этот объект; 3. Конструктор вызывает this, чтобы указать на сам текущий экземпляр (вновь созданный объект); 4. вызов и применение, привязка вызова Что передается, чтобы указать на что, какие параметры передаются (вызов может передавать несколько параметров, применить может передавать два параметра, второй массив, иначе будет сообщено об ошибке TypeError) 5. Вызов функции со стрелкой указывает на значение верхней области видимости (текущий контекст функции);

Js-массив

Найти указанный элемент в массиве

Наггетс.Талант/пост/687784…

1. includes

developer.Mozilla.org/en-US/docs/… includes()Метод используется для определения того, содержит ли массив указанное значение, и возвращает true, если он есть, и false в противном случае.

var a = [1,2,3,4,5,6]

a.includes(2)  // true
a.includes(2,3)  // false
a.includes(5,-2)  // true
a.includes(5,-1)  // false

2. indexOf

developer.Mozilla.org/en-US/docs/… indexOf()Метод возвращает первый индекс указанного элемента в массиве или -1, если он не существует.

var array = [2, 5, 9];

array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

3. lastIndexOf

developer.Mozilla.org/en-US/docs/… lastIndexOf()Метод возвращает индекс последнего указанного элемента в массиве или -1, если он не существует. Поиск вперед с конца массива, начиная сfromIndexначать в .

var array = [2, 5, 9, 2];

array.lastIndexOf(2);      // 3
array.lastIndexOf(7);      // -1
array.lastIndexOf(2, 3);   // 3
array.lastIndexOf(2, 2);   // 0
array.lastIndexOf(2, -2);  // 0
array.lastIndexOf(2, -1);  // 3

4. some

developer.Mozilla.org/this-cn/docs/… some()Метод проверяет, проходит ли хотя бы один элемент в массиве предоставленный функциональный тест. Он возвращает значение логического типа.

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

5. every

developer.Mozilla.org/this-cn/docs/… every()Метод проверяет, проходят ли все элементы массива тест указанной функции. Он возвращает логическое значение.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

6. filter

developer.Mozilla.org/this-cn/docs/… filter()Метод создает новый массив, содержащий все элементы теста, реализованного предоставленной функцией.

function isBigEnough(element) {
  return element >= 10;
}

var filtered = [12, 5, 8, 130, 35].filter(isBigEnough);
// filtered is [12, 130, 35]

7.find

developer.Mozilla.org/this-cn/docs/… find()Метод возвращает значение первого элемента массива, удовлетворяющего предоставленной тестовой функции. В противном случае вернуть неопределенное значение.

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'orange', quantity: 5}
];

function findOranges(fruit) { 
    return fruit.name === 'orange';
}

console.log(inventory.find(findOrange));
// { name: 'orange', quantity: 5 }

8. findIndex

developer.Mozilla.org/this-cn/docs/… findIndex()Метод возвращает индекс первого элемента в массиве, который удовлетворяет предоставленной тестовой функции. Возвращает -1, если соответствующий элемент не найден.

var inventory = [
    {name: 'apple', quantity: 2},
    {name: 'banana', quantity: 0},
    {name: 'orange', quantity: 5}
];

function findOrange(fruit) { 
    return fruit.name === 'orange';
}

console.log(inventory.findIndex(findOrange));

image.png

Сортировка объектов массива

Отсортируйте следующие данные

var person = [{name:"Rom",age:12},{name:"Bob",age:22},{name:"Ma",age:5},{name:"Tony",age:25}]

sort

developer.Mozilla.org/this-cn/docs/…

  • по возрастаниюЭто упорядочить данные от малого к большему (1, 2, 3, 4, 5)
  • сортировка по убываниюЭто упорядочить данные от больших к маленьким (5, 4, 3, 2, 1)
person.sort((a,b)=>{ return a.age-b.age})//升序
 
person.sort((a,b)=>{ return b.age-a.age})//降序

1. Если функция compareFunction не указана, элементы сортируются в соответствии с позицией Unicode символов преобразованной строки. 2. Если указано compareFunction, массив будет отсортирован в соответствии с возвращаемым значением вызова функции. т. е. a и b — два сравниваемых элемента:

а. Если compareFunction(a, b) меньше 0, то a будет располагаться перед b; б) Если compareFunction(a, b) равно 0, относительные позиции a и b не изменяются. (Стандарт ECMAScript не гарантирует такого поведения, и не все браузеры гарантируют, например, Mozilla до 2003 г.); в) Если compareFunction(a, b) больше 0, b будет отсортирован перед a. г) функция compareFunction(a, b) всегда должна возвращать один и тот же результат сравнения для одних и тех же входных данных, иначе результат сортировки будет неопределенным. (С помощью этой функции можно добиться случайной сортировки)

Разница между for-of и for-in

for-in — это стандарт ES5, он проходит через ключ (ключ, который может проходить через объект, массив или строку); for-of — это стандарт ES6, он проходит через значение (значение объекта, массива или строки может быть пройдено)

for-in

var arr = [1, 2, 4, 5, 7];
for (var index in arr) {
　　console.log(myArray[index]);
}

из-за недостатков

1. Индекс представляет собой число строкового типа (обратите внимание, что это не число), и геометрические операции нельзя выполнять напрямую. 2. Порядок обхода может не соответствовать внутреннему порядку фактического массива (может быть случайным). 3. Использование for-in будет проходить по всем перечислимым свойствам массива, включая прототип. Например, будет пройден метод метода прототипа и свойства имени из приведенного выше примера.Обычно необходимо сотрудничать с методом hasOwnProperty(), чтобы определить, является ли свойство свойством экземпляра объекта, чтобы удалить прототип объект из цикла.

  • Таким образом, for-in больше подходит для обхода объектов, и обычно рекомендуется не использовать for-in для обхода массивов.
for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){
　　　　console.log(key);
　　}
}

for-of

for-of может просто и правильно пройтись по массиву (без обхода метода и имени прототипа). Поэтому рекомендуется использовать for-of для обхода массива, поскольку for-of просматривает только элементы в массиве, исключая метод атрибута прототипа и имя индекса массива.

var myArray = [1, 2, 4, 5, 6, 7];
myArray.name = "数组";
myArray.getName = function() { return this.name; }
for (var value of myArray) {
    console.log(value);
}

сводка различий

  • Для in проходит индекс (т.е. имя ключа) массива, а for of проходит значение элемента массива.
  • for-in всегда получает ключ объекта или индекс массива или строки.
  • for-of всегда получает значение объекта или значение массива, строки, а также может использоваться для обхода Map и Set.

Дедупликация массива

сегмент fault.com/ah/119000001…

1. ES6 Установить дедупликацию

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

// 简化
[...new Set(arr)]

2. для вложенных для, затем склейка для дедупликации

{} и NaN не могут быть дедуплицированы

function unique(arr) {
	for (let i = 0; i < arr.length; i++) {
		for (let j = i + 1; j < arr.length; j++) {
			if (arr[i] === arr[j]) {
				arr.splice(j, 1)
				j-- // 删除一个数据，索引关系变了，需要减1找到没有判断过的那个数据
			}
		}
	}
	return arr
}

var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
console.log(unique(arr))  //NaN和{}没有去重

3. индекс дедупликации

function unique(arr) {
	if (!Array.isArray(arr)) {
		console.log('is not array')
		return
	}
	let array = []
	for (let i = 0; i < arr.length; i++) {
		if (array.indexOf(arr[i]) === -1) {
			array.push(arr[i])
		}
	}
	return array
}

var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
console.log(unique(arr))  // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

4. включает дедупликацию

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重

5. фильтр + дедупликация hasOwnProperty (может дедуплицировать все)

function unique(arr) {
	let obj = {}
	return arr.filter((item, index, arr) => {
		console.log(typeof item + item)
		return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
	})
}

var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了

// if (obj.hasOwnProperty(typeof item + item)) {
// 	return false
// } else {
// 	obj[typeof item + item] = true
// 	return obj[typeof item + item]
// }

// if (!obj.hasOwnProperty(typeof item + item)) {
// 	obj[typeof item + item] = true
// 	return obj[typeof item + item]
// }

6. filter + indexOf

function unique(arr) {
	return arr.filter((item, index, arr) => {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
		return arr.indexOf(item,0) === index
	})
}

var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

JS продвинутый

Разница между глубоким копированием и поверхностным копированием

Копия объекта

const obj1 = {
	age: 20,
	name: 'xxx',
	address: {
		city: 'beijing'
	},
	arr: ['a', 'b', 'c']
}

Мелкая копия:

  • Скопируйте только свойства объектов в первом слое
  • является копией адреса объекта, и не открывает новый стек
  • Результатом копирования является то, что два объекта указывают на один и тот же адрес, и если свойства одного объекта будут изменены, свойства другого объекта также изменятся.

для... в реализации

function simpleCopy(obj) {
	// 判断结果是对象还是数组
	let result = Array.isArray(obj) ? [] : {}
	for (let i in obj) {
		// for...in遍历的是key
		// console.log(i)
		result[i] = obj[i]
	}
	return result
}
let obj2 = simpleCopy(obj1)
console.log(obj2)

Реализация Object.assign

let obj2 = Object.assign(obj1)
console.log(obj2)

obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])

прямое назначение

Глубокая копия:

  • Рекурсивно копировать свойства на всех уровнях,
  • это открыть новый стек
  • Два объекта соответствуют двум разным адресам, изменение свойств одного объекта не изменит свойства другого объекта.

рекурсивная реализация

function deepClone(obj) {
	// 判断是否是对象，不是对象，返回结果（返回值类型）
  // obj == null判断了null和undefined两种情况  null==undefined
	if (typeof obj !== 'object' || obj == null) {
		return obj
	}
	// 初始化结果数据，如果是数组赋值为[],否则为{}
	let result = Array.isArray(obj) ? [] : {}

	for (let key in obj) {
		// 判断是否是自己的属性方法，而不是原型属性方法
		// 如果是递归复制
		if (obj.hasOwnProperty(key)) {
			result[key] = deepClone(obj[key])
		}
	}
	return result
}

let obj2 = deepClone(obj1)
console.log(obj2)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

Метод отражения

function isObject(obj) {
	if (typeof obj !== 'object' || obj == null) {
		return false
	}
	return true
}

function deepClone(obj) {
	// 如果Reflect.ownKeys()方法的第一个参数不是对象，会报错。
	if (!isObject(obj)) {
		throw new Error('obj 不是一个对象')
	}
	let result = Array.isArray(obj) ? [...obj] : { ...obj }
	Reflect.ownKeys(result).forEach(key => {
		console.log(key)
		// 是对象进行递归遍历，不是则直接赋值
		result[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
	})
	return result
}

let obj2 = deepClone(obj1)
console.log(obj2)

Реализация JSON

Недостатки: нельзя реализовать глубокое копирование методов в объектах, оно будет отображаться как неопределенное.

function deepClone2(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}

библиотека lodash реализует глубокую копию

let result = _.cloneDeep(test)

Что такое инкапсулированные общие функции js

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

Краткое введение в механизм сборки мусора js

Блог Woohoo.cn на .com/fun bug/fear/…

представлять

Вообще говоря, объекты, на которые нет ссылок, являются мусором, который подлежит очистке, есть исключение, если несколько ссылок на объекты образуют кольцо и ссылаются друг на друга, но корень не может получить к ним доступ, эти объекты также являются мусором и должны быть удалены. чистый. Базовый алгоритм сборки мусора называется «маркировка-очистка», и периодически выполняются следующие шаги «сборки мусора»:

  • Сборщик мусора берет корни и «помечает» (запоминает) их.
  • Затем он посещает и «отмечает» все ссылки от них.
  • Затем он обращается к отмеченным объектам и отмечает их ссылки. Все объекты, к которым осуществляется доступ, запоминаются, чтобы в будущем к одному и тому же объекту не обращались дважды.
  • И так до тех пор, пока не останутся непросмотренные ссылки (доступные из-под root).
  • Все объекты, кроме отмеченных, удаляются.

производительность сборщика мусора js

Потому что сборщик мусора js выполняет сборку мусора каждый второй цикл. Если объем памяти, выделенный для переменной, невелик, то у сборщика мусора не так много работы по сбору. Однако, когда рабочая нагрузка сборщика мусора слишком велика, очень вероятно, что ситуация застрянет.

js механизм памяти

цикл событий (цикл событий/опрос событий)

что такое цикл событий

  • js работает в одном потоке
  • Асинхронность реализована на основе обратных вызовов
  • цикл событий - принцип асинхронной реализации

процесс цикла событий

Весь процесс включает

  • Стек вызовов,
  • WebApis (API браузера),
  • Callback Queue (очередь функций обратного вызова),
  • цикл событий (опрос событий)

Процесс 1

  • Синхронный код шаг за шагом помещается в стек вызовов
  • В случае асинхронности сначала запишется и дождется возможности (возможно синхронный код выполняется)
  • Когда время истечет, перейдите в очередь обратного вызова

Процесс 2

  • Если синхронный код завершает выполнение, начинает работать цикл обработки событий.
  • Опрос, чтобы найти очередь обратного вызова, если это так, перейти к стеку вызовов для выполнения
  • Затем продолжайте опрос, чтобы найти

Основы Vue

1. Коммуникация компонентов Vue

2. vue загружает компоненты по запросу

  • Асинхронные компоненты
  • функция импорта
  • Загрузка по запросу, асинхронная загрузка больших компонентов
<!-- 异步组件 -->
<FormDemo v-if="showFormDemo"/>
<button @click="showFormDemo = true">show form demo</button>

components: {
    FormDemo: () => import('../BaseUse/FormDemo'),
},
data() {
  return {
      showFormDemo: false,
  }
}
  • Загружать компоненты маршрутизации по требованию
{
  path: '/home',
  name: 'Home',
  component: () => import(/* webpackChunkName: "tabbar" */ '@/views/tabBar/home/index.vue'),
  meta: { title: '首页', keepAlive: false, showTab: true } as IRouterMeta
},

3. Каковы основные компоненты пакета?

4. Как компоненты реализуют v-модель

  • пользовательская v-модель
  • В основном атрибуты модели (реквизит, событие) на компонентах
  • prop - это данные для привязки
  • событие событие для привязки к
自定义 v-model -->
<!-- <p>{{name}}</p>
<CustomVModel v-model="name"/>
  
  
<template>
    <!-- 例如：vue 颜色选择 -->
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
    <!--
        1. 上面的 input 使用了 :value 而不是 v-model
        2. 上面的 change1 和 model.event1 要对应起来
        3. text1 属性对应起来
    -->
</template>

<script>
export default {
    model: {
        prop: 'text1', // 对应 props text1
        event: 'change1'
    },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}
</script>

5. Разница между вычислением и просмотром

Расчетное свойство вычислено

  1. Поддержка кэширования, только при изменении зависимых данных расчет будет пересчитан
  2. Асинхронный режим не поддерживается. Он недействителен, если в вычисляемых данных есть асинхронные операции, и не может отслеживать изменения данных.

3. Значение вычисляемого свойства будет кэшироваться по умолчанию, а вычисляемое свойство кэшируется на основе их зависимых зависимостей, то есть вычисленное значение на основе данных в свойствах, объявленных в данных или переданных родительским компонентом. 4. Если атрибут вычисляется из других атрибутов, и этот атрибут зависит от других атрибутов, то это много-к-одному или один-к-одному, как правило, с использованием вычисляемых 5. Если значением атрибута вычисляемого атрибута является функция, то метод get будет использоваться по умолчанию, возвращаемое значение функции является значением атрибута атрибута, в вычисляемом атрибут имеет get и set При изменении данных вызывается метод set.

слушать имущество смотреть

  1. Не поддерживает кэширование, изменения данных будут напрямую запускать соответствующие операции;

2. часы поддерживают асинхронность; 3. Функция прослушивания получает два параметра, первый параметр — последнее значение, второй параметр — значение до ввода; 4. При изменении атрибута необходимо выполнить соответствующую операцию: один ко многим; 5. Данные мониторинга должны быть данными, объявленными в данных или данными в реквизитах, переданных родительским компонентом.При изменении данных запускаются другие операции.Функция имеет два параметра. Немедленно: загрузка компонента немедленно запускает функцию обратного вызова для выполнения, deep: глубокий мониторинг, чтобы обнаружитьвнутреннее значение объектаОн используется для сложных типов данных, таких как изменение содержимого объектов в массиве.Обратите внимание, что вам не нужно делать это для отслеживания изменений в массиве. Примечание: deep не может отслеживать изменения массива и добавление объектов. Обратитесь к мутации массива vue, которую можно отслеживать только в том случае, если она запускается чувствительным образом. 6. Этот метод наиболее полезен, когда вам нужно выполнять асинхронные или дорогостоящие операции при изменении данных.

сцены, которые будут использоваться

вычисленный Когда на свойство влияют несколько свойств, необходимо использовать вычисляемый Самый типичный пример: когда товары в корзине рассчитываютсяwatchКогда часть данных влияет на несколько частей данных, вам нужно использовать watch данные поиска

Что такое жизненный цикл, в котором страница впервые загружена выполнение

первый рендер

  • beforeCreate
  • created
  • beforeMount
  • mounted

возобновить

  • beforeUpdate
  • updated

разрушать

  • beforeDestroy
  • destroyed

keep-live

  • активация активированного компонента
  • деактивированный компонент деактивирован

Когда делать асинхронный запрос

  • mounted
  • отправить действие

Что такое модификаторы vue

  • модификатор формы
    • .lazyленивая загрузка
    • .trimудалить начальные и конечные пробелы
    • .numberпреобразовать в число
  • модификатор события
    • .stopперестань пузыриться
    • .preventпредотвратить поведение по умолчанию
    • .selfАктивировать собственный элемент
    • .onceзапускать только один раз
    • .capture этап захвата события
    • .пассивное ленивое триггерное событие
    • **.native ** преобразует компонент vue в обычный тег HTML и запускает событие
  • модификаторы кнопок мыши
    • .leftщелчок левой кнопкой мыши
    • .rightщелкните правой кнопкой мыши
    • .middleсредний щелчок
  • модификатор ключ-значение
    • **.keyCode ** соответствует коду ASCII
  • модификатор v-bind (я правда не знаю, как он называется)
    • **.sync ** Двусторонняя привязка реквизита

Почему данные — это функция

  • После того, как компонент .vue скомпилирован, он фактически является классом.
  • Каждое использование этого компонента эквивалентно созданию экземпляра компонента
  • Выполнять данные при создании экземпляра
  • Если данные не являются функцией, то данные каждого экземпляра компонента одинаковы, и данные являются общими.
  • Когда данные одного компонента изменяются, данные других компонентов также будут изменены.

Разница между v-show и v-if

  • Элементы управления v-show отображаются и скрываются с помощью отображения CSS
  • v-если компоненты действительно отображают и уничтожают, а не показывают и скрывают
    • Шаблоны компилируются в рендер с синтаксисом и преобразуются в тернарные операции.
  • Используйте v-show для частого переключения состояния отображения, в противном случае используйте v-if

Почему v-for использует ключ

у-у-у. Краткое описание.com/afraid/4Baidu5Oh745From…

  • Должен использовать ключ и не может быть индексом и случайным (случайным числом)
  • В алгоритме сравнения тег и ключ используются для определения того, является ли это одним и тем же узлом.
  • Сокращение времени рендеринга и повышение производительности рендеринга

Что будет, если ключ повторить

  • Если ключ повторяется, связь между индексом и данными массива будет перепутана при добавлении и удалении операций.
  • Алгоритм diff будет считать, что все узлы после текущего узла были обновлены, что приведет к многократному повторному рендерингу.

defineProperty переопределяет метод массива, повлияет ли это на обычное использование метода массива?

  • Не будет
  • Создайте новый объект через Object.create(), прототип указывает на прототип массива
  • Когда выполняется метод расширенного массива, вызывается метод прототипа массива, и представление обновляется.

Свойства и жизненный цикл keep-live

  • include- Строка или регулярное выражение. Кэшируются только компоненты с совпадающими именами.
  • exclude- Строка или регулярное выражение. Любые компоненты, имена которых совпадают, не будут кэшироваться.
  • max- количество. Максимальное количество экземпляров компонентов, которые можно кэшировать.

1.activated: при первом входе на страницу создается последовательность срабатывания хука->монтируется->активируется 2.deactivated: деактивировано будет срабатывать при выходе со страницы, и только активировано будет срабатывать, когда страница снова перемещается вперед или назад

Какая польза от названия компонентов, сцены

blog.CSDN.net/WeChat_3901…

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

Как аутентификация пользователя, динамический дизайн маршрутизации

nuggets.capable/post/684490…Яма addrouterblog.CSDN.net/WeChat_3417…

Принцип Vue

Внутренняя реализация $nexttick

Принцип внутренней реализации вычислений и часов

Метод маршрутизации и принцип реализации роутера

  • hash - window.onhashchange
  • История H5 — history.pushState и window.onpopstate
  • История H5 требует серверной поддержки

Принцип реализации шины событий, спроектируйте самиon,on,emit

оптимизация производительности

1. Каковы оптимизации производительности?

Общая оптимизация производительности:

  • Ускорьте загрузку:
    • Уменьшение размера ресурса: сжатие кода
    • Уменьшите количество посещений: мерж-код, рендеринг SSR-сервера, кеш (http-кэш, локальный кеш)
    • Используйте более быструю сеть: CDN
  • сделать рендеринг быстрее
    • CSS размещается в голове, JS — внизу тела
    • Выполнить JS как можно скорее, запустить с помощью DomconTenTloadeded
    • Ленивая загрузка (ленивая загрузка изображения, скольжение вверх, чтобы загрузить больше, пейджинг)
    • Кэширование DOM-запросов
    • Частые манипуляции с DOM, объединенные вместе для вставки структуры DOM
    • Защита от дрожания и дроссельная заслонка

Оптимизация производительности Vue

  • Разумное использование v-show и v-if
  • Разумное использование вычислений и часов
  • Добавьте уникальный ключ в v-for, избегайте его использования с v-if
  • Своевременное уничтожение пользовательских событий и событий DOM
  • Используйте асинхронные компоненты с умом
  • Разумное использование Keep-Live
  • Уровень данных не должен быть слишком глубоким
  • Используйте vue-loader для компиляции шаблонов в среде разработки
  • Использовать ССР

Оптимизация производительности WebPack

Woohoo. Yuque.com/docs/share/…«Вопросы для интервью с Webpack и Babel»

2. Разница между антишейком и троттлингом

Woohoo.Краткое описание.com/afraid/from 8 не 86 не 09… zhuanlan.zhihu.com/p/72923073 сегмент fault.com/ah/119000001…

защита от дрожания

дляЗапускается непрерывно в течение короткого периода временисобытия (например, события прокрутки),Смысл защиты от сотрясений заключается в том, чтобы обработчик событий выполнялся только один раз в течение определенного периода времени (например, 1000 миллисекунд выше). Так называемый анти-встряска означает, что функция может быть выполнена только один раз в течение n секунд после срабатывания события.Если событие сработает снова в течение n секунд, время выполнения функции будет пересчитано

  • Непрерывный триггер не выполняется
  • Не запускать в течение определенного периода времени, а затем выполнять
<input type="text" id="input1">

const input1 = document.getElementById('input1')
// 不能用箭头函数
input1.addEventListener('keyup', debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))


// 防抖
function debounce(fn, delay = 500) {
    // timer 是闭包中的
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

дроссель

Если одно и то же событие происходит в большом количестве за короткий промежуток времени, тоПосле того, как функция выполняется один раз, она больше не работает в течение указанного периода времени., он не вступит в силу до истечения этого периода. Регулирование означает, что функция выполняется умеренно, а не запускается без модерации и выполняется один раз. Что такое модерация? Он выполняется только один раз за период времени.

  • Непрерывный запуск не выполняется много раз
  • выполнить его через определенное время
<div id="div1" draggable="true">可拖拽<div>
  
const div1 = document.getElementById('div1')

div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))

// 节流
function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

Приложения

поля изменения размера, прокрутки, перемещения мыши и ввода продолжают ввод, удаленно проверяют введенное содержимое и запускают события щелчка несколько раз

Инжиниринг

В чем разница между git rebase и git merge

Вуууу.. Краткое описание.com/afraid/4079284 в конце концов…

рукописные вопросы

верхний регистр в нижний регистр нижний регистр в верхний регистр

Array.prototype.map.call(str,a=>a.toUpperCase(a)==a?a.toLowerCase():a.toUpperCase()).join('');

function upLower(str) {
	return str.split('').map(item => {
		console.log(item)
		return item.toUpperCase() === item ? item.toLowerCase() : item.toUpperCase()
	})
}

console.log(upLower('ABc'))

проблема алгоритма

1. Найдите наиболее часто встречающееся число в массиве

// 找出数组中出现次数最多的数
const arr = [1, 2, 3, 4, 5, 2, 1]
function fn(arr) {
	let map = new Map()
	let maxIndex = 0
	for (let i = 0; i < arr.length; i++) {
		if (!map.get(arr[i])) {
			map.set(arr[i], 1)
		} else {
			map.set(arr[i], map.get(arr[i]) + 1)
		}
		maxIndex = Math.max(maxIndex, map.get(arr[i]))
	}
	let result = []
	for (let [key, value] of map) {
		if (value === maxIndex) {
			result.push(key)
		}
	}
	return result
}

console.log(fn(arr))
  • Внешний междоменный подход
  • cors
  • захват данных
  • алгоритм сравнения, виртуальный DOM, реальный DOM,
  • Новые возможности html5 и css3
  • новые возможности es6
  • общий загрузчик webpack
  • Сеть прототипов
  • наследование реализации es5, реализация es6, наследование,
  • 2 рукописных кода:
    • глубокая копия
    • Преобразование строки URL в объект
  • Принцип: фреймворк Vue требует большего
  • Коммуникация компонента назначения
  • Аутентификация по определению компонента, как выполнить
  • принцип обещания
  • что такое векс
  • Мини-страница программы Связь
  • Оптимизация производительности апплета (что делать, если загрузка страницы слишком медленная)
  • Способ хранения данных апплета
  • Мини-программа в прямом эфире
  • Разница между двусторонней привязкой апплета и двусторонней привязкой Vue
  • Метод аутентификации пользователя в мини-программе (как определить, вошел ли пользователь в систему)
  • токен, анализ токенов, шифрование токенов
  • ты пользуешься юниап?
  • Разница между файлами cookie и хранилищем
  • что установлено для
  • Функция генератора
  • Разница между promise и await, какая проблема решается
  • Через какой API реализуется ajax?
  • Reflect
  • Какие есть методы массива, разница между некоторыми и каждым
  • Что делать, если после обновления страницы vuex нет данных
  • Как судить о кроссдоменности, если не смотреть в консоль
  • Размер команды компании
  • Бизнес компании
  • Фронтальная технология Бэкэнд технология
  • Как убедить начальника провести рефакторинг проекта
  • Расскажите мне о проекте, который вы считаете хорошим
  • Процесс разработки проекта
  • твоя основная работа
  • Как выполнить развертывание проекта
  • Проводился ли мониторинг производительности и анализ данных?
  • Управление кодом и проверка между командами
  • git использует слияние или базу
  • 20000 не конвертируются в часы, минуты и секунды без апи, модуля и остатка
  • Какую работу вы проделали по выбору техники?
  • Спецификации, используемые Eslint
  • Будет ли v-for сообщать об ошибке, если ключ не добавлен?
  • Какие компоненты вы сделали?
  • Как вы обеспечиваете гибкость компонентов, инкапсулированных сторонними библиотеками, например инкапсуляция форматированного текста?
  • Если компонент поиска, мне нужно два или более полей ввода, если гарантируется гибкость
  • Передайте параметры, пройдитесь по параметрам, а затем выполните рендеринг, будут ли в нем какие-то ямы?
  • В чем разница между Vue3 и Vue2
  • Что такое перекомпоновка и перерисовка
  • Каковы свойства flex и что означают три свойства дочернего элемента flex?
  • flex обрабатывает перенос списка
  • Какие свойства можно наследовать в css
  • Es6 часто используемые методы атрибутов
  • Разница между let, const и var
  • Отличие стрелочных функций от обычных функций
  • это указывает на проблему
  • image.png
  • Как использовать async/await для обработки ошибок
  • Разница между макрозадачами и микрозадачами
  • image.png
  • Что делают обычно используемые жизненные циклы?
  • Разница между addEventListenter и традиционными прослушивателями событий
  • Какова функция клавиши v-for, можно ли использовать индекс?
  • что такое виртуальный дом
Категории