Эх, если честно, мне немного стыдно за две простые вещи в плохом состоянии. . . Итак, я два дня на выходных смотрел видео одноклассника. . . После того, как я глубоко почувствовал, что я мусор, я решил изменить свое прошлое (по крайней мере, я до сих пор так думаю)
Путь падшего человека к самоискуплению
Некоторые концептуальные проблемы, возможно, были мне привычны раньше и не изменились.Если есть какая-то ошибка, надеюсь на совет, спасибо
Tucao: Я только что добрался до книги по D3 и планирую изучить ее Техническая тема этого выпуска — визуализация. Я устала Я такая жадная, весь день смотрю, как начальство расчесывает подарки Я такая кислая. Увы, сейчас я не могу сосредоточить свои силы на D3, и мне не везет с кубком.
1. Настроитьv-model
Я верю, что каждыйv-modelЭта команда очень знакома. на самом деле это <input type="text" :value="num" @input="num=$event.target.value">синтаксический сахар.
Однако мы также обнаружили, что эту директиву можно применить только к нескольким элементам управления формы. ноv-modelТакая функция привязки данных очень полезна, как мы можем применить такие вещи к нашим собственным компонентам?
Предварительный
Давайте просто реализуем следующее
Просто используйте две вещи:
1. Родительский компонент в vue может прослушивать события дочернего компонента
2, использование подкомпонентов$eventдля запуска событий, которые прослушивает его родительский компонент
Давайте напишемmy-inputкомпоненты
<template>
<div>
<input type="text" :value="value" @input="$emit('input',$event.target.value)">
</div>
</template>
<script>
export default {
props:['value']
}
</script>
родительский компонент
<template>
<div id="app">
{{value}}
<my-input :value='value' @input="value=$event"></my-input>
</div>
</template>
<script>
import myInput from './components/myInput'
export default {
data() {
return {
value:'gxb'
}
},
components: {
myInput
}
}
</script>
Улучшать
Я также хочу использовать его непосредственно в компоненте, например, в инструкции vue.v-model. Синтаксический сахар такой лаконичный, вот кто не любит его использовать, как я могу его улучшить?
Вот оно: на компонентеv-modelбудет использовать имя по умолчаниюvalueизpropи назвалinputиз事件, поэтому используйте параметр модели для указания атрибутов и событий.
Поэтому: для каштанов выше прямо ставить<my-input :value='value' @input="value=$event"></my-input>заменить <my-input v-model="value"></my-input>Только что
То есть этоv-model, то есть свойство с именем value будет передано дочернему компоненту, и он также будет прослушивать событие ввода, инициированное дочерним компонентом.
Но есть некоторые элементы управления формы, которым не нужны значения и ввод. Как и флажок, он хочет быть отмеченным. В то же время событие также становится изменением.
Как это изменить?
Поскольку v-model по умолчанию передает значение от родительского компонента и прослушивает событие ввода, значение по умолчанию означает, что мы все еще можем указать его.
Давай, посмотри на каштаны
Сначала посмотрите на родительский компонент (изменений почти нет, то есть переданное значение превращается в логическое значение)
<template>
<div id="app">
{{value}}
<my-input v-model="value"></my-input>
</div>
</template>
<script>
import myInput from './components/myInput'
export default {
data() {
return {
value:true
}
},
components: {
myInput
}
}
</script>
Подкомпонент, добавьте параметр модели, чтобы указать переданное имя свойства и указать событие, которое будет использоваться этой v-моделью.
То есть то, что передается v-model по умолчанию, называется value, поэтому вы можете получить его как props:['value'], но сейчас это не так, вы должны указать его
Получается, что v-model по умолчанию использует событие ввода, то есть слушает событие ввода по умолчанию, здесь вы хотите вызвать событие изменения, вы должны ему сказать
<template>
<div>
<input type="checkbox" :checked='checked' @change="$emit('change',$event.target.checked)">
</div>
</template>
<script>
export default {
model:{
prop:'checked',
event:'change'
},
props:['checked'],
}
</script>
2. nextTick
vue асинхронное обновление DOM
Прежде всего, мы все должны понимать: операция обновления DOM Vue выполняется асинхронно для обеспечения производительности.
Больше говорить бесполезно, давай посмотрим каштаны
<template>
<div id="app">
<ul ref="ul">
<li v-for="(item, index) in arr" :key="index">{{item}}</li>
</ul>
<button @click="add">add</button>
</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4],
};
},
methods: {
add() {
this.arr.push(Math.random());
this.arr.push(Math.random());
this.arr.push(Math.random());
console.log(this.arr);
console.log(this.$refs.ul.childNodes.length);
},
},
};
</script>
Наблюдайте за эффектом, даже если наш оператор печати размещен после добавления в коде, а потому, что даже если данные были помещены в arr в это время, vue, очевидно, не отображает новое дополнение сразу. Поэтому в настоящее время ul в DOM все еще имеет только исходные узлы li.
В том-то и проблема, что иногда нам просто нужен эффект, похожий на синхронный рендеринг. Мы просто хотим иметь возможность вовремя получать нужные нам данные, что нам делать?
Основное использование nextTick
Поэтому vue предоставляет nextTickAPI в глобальном (и экземпляре), который должен помочь нам сделать это.
Давайте сначала разберемся с использованием: сначала получаем callback в качестве параметра, то есть этот callback будет выполняться после обновления DOM. Если обратный вызов не предоставлен, а среда в это время поддерживает Promise, будет возвращен Promise.
Улучшить приведенный выше код
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4],
};
},
methods: {
add() {
this.arr.push(Math.random());
this.arr.push(Math.random());
this.arr.push(Math.random());
console.log(this.arr);
this.$nextTick(() => {
console.log(this.$refs.ul.childNodes.length);
});
},
},
};
</script>
увидеть эффект
Очевидно, что для простого в использовании API невозможно позволить Сяобаю оставаться только в тех аспектах, которые он может использовать. Посмотрим, как это работает
Анализ принципа nextTick
Здесь есть что-то захватывающее
Предзнаменование первых знаний
Я надеюсь, что вы сможете ответить на принцип полного типа данных (в основном зависит от сбора и распространения обновления, самое главное, что вы должны знать, что делать внутри часы) -> цикл событий JS
Я написал рукописный ответ Vue и статью Diff, давайте посмотрим на вещь, написанную в Watch (вот я это написал, вы должны поставить их в очередь microsense)
В начале я написал так, когда меняется состояние свойства, часы обновляются напрямую.
Но стоит подумать об этом, в версии vue2.x виртуальный DOM используется для рендеринга, а обнаружение изменений в это время может быть уведомлено только на уровне компонентов. Что это значит, то есть все состояния в этом компоненте обнаруживаются только одним наблюдателем.
Какая разница, нужно знать, что при сборе зависимостей все состояния (свойства) нашего компонента есть в каждом отпе. При изменении состояния, то есть набора данных, все отложения в компоненте, которые необходимо обновить, отправляются, и в итоге они называются методом обновления того же наблюдателя.
Говоря более просто, то есть, если есть изменение данных, метод обновления будет удален. Но иногда мы можем работать с атрибутом несколько раз из-за определенного требования.
так
methods: {
test() {
for (let i = 0; i < 10; i++) {
this.test = i;
}
},
}
Разве нам не нужно использовать десять методов обновления, но мы должны знать, что, хотя виртуальный дом намного сильнее, чем настоящий Дом, не забывайте, что он должен пройти через десять дифференциров.
На этот раз выходит преимущества использования асинхронных обновлений, потому что это асинхронное обновление, хотя этот атрибут DEP все еще уведомляет Watcher10, но вы уведомляете синхронный код, я только беру свой последний.
Конечно, это для множественных изменений одного и того же атрибута, и то же самое верно для изменений нескольких атрибутов; когда данные изменяются, наблюдатель помещает эти операции обновления уведомления в очередь асинхронного обновления и выполняет операцию обновления после выполняется синхронный код.
Еще одно предложение для подведения итогов: в компоненте, независимо от того, как изменяются ваши данные, наблюдатель, соответствующий этому компоненту, будет обновляться только один раз в последнем наборе.
проанализировать его принципы
Увидев это, вы можете иметь небольшое представление о реализации nextTick.Самая простая идея — поставить callback, полученный nextTick, в асинхронную очередь (здесь мы не собираемся вынимать исходный код, чтобы объяснить это снова, если кому интересно, можете зайти посмотреть Глядя на исходник, там больше 1000 строчек.Главная его идея в том, что он много не занимает, поэтому я не стал его писать, если мне лень)
Но с приведенными выше основами и циклом событий, я думаю, вы должны понять суть этого сейчас.
Операция обновления DOM vue, упомянутая выше, помещается в очередь микрозадач.В соответствии с порядком выполнения макросов и микрозадач в браузере вы можете поместить обратный вызов nextTick непосредственно в задачу микромакроса.
Хорошо ставить в микрофитмент, потому что сама структура данных этих задач очередь, это первый аванс?
Посмотрите на каштан: поместите функцию-обработчик в очередь микрозадач
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4],
};
},
methods: {
add() {
this.arr.push(Math.random());
this.arr.push(Math.random());
this.arr.push(Math.random());
console.log(this.arr);
new Promise(resole => {
resole();
}).then(() => {
console.log(this.$refs.ul.childNodes.length);
});
},
},
};
</script>
Посмотрите еще раз на каштан: поместите функцию-обработчик в очередь задач макроса
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4],
};
},
methods: {
add() {
this.arr.push(Math.random());
this.arr.push(Math.random());
this.arr.push(Math.random());
console.log(this.arr);
setTimeout(()=> {
console.log(this.$refs.ul.childNodes.length);
}, 0);
},
},
};
</script>
Обратите внимание на приоритет отправки
Здесь из-за простоты можно достичь и того, и другого. Но в немного законченном маленьком проекте асинхронная очередь (будь то макро или микро) в браузере в это время все еще использует множество других задач.
Поэтому в этой части есть еще один ключевой момент — проблема диспетчеризации функции обработки. Поскольку приоритет микрозадач относительно высок, легко вызвать проблемы, поэтому ниже приведен один каштан, который не может использовать микрозадачи для диспетчеризации.
Есть данные в макросе, прежде чем они могут получить (эта ситуация иногда встречается)
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4],
};
},
methods: {
add() {
this.arr.push(Math.random());
this.arr.push(Math.random());
setTimeout(() => {
this.arr.push(Math.random());
}, 0);
new Promise((resole) => {
resole();
}).then(() => {
console.log(this.$refs.ul.childNodes.length);
});
this.arr.push(Math.random());
},
},
};
</script>
Эффект, а другие данные не могут быть получены вовремя
На этом этапе вы можете использовать макросы для отправки.
3. Слот
знакомство
Мы более знакомы с этим материалом
То есть данные в тегах нашего компонента по умолчанию игнорируются.
так
<template>
<div id="app">
<test>这是插槽内容</test>
</div>
</template>
<script>
import Test from './components/test01'
export default {
components:{
Test
}
};
</script>
Но на странице пока только то, что есть в тестовом компоненте
Но нам просто нужны данные в этом теге компонента.
vue дает нам метку слота<slot></slot>, сюда будут помещаться вещи в родительском компоненте нашего тега компонента
тестовый компонент
<template>
<div>
test
<slot></slot>
</div>
</template>
<script>
export default {
};
</script>
друг
Установить содержимое по умолчанию для слота
Выше в компонентном тесте мы прямо кидаем один вslotэтикетка, этоslotДанные также можно размещать в тегах.
То есть, если в тестовом теге есть данные, данные будут отображаться в слоте.
Если нет, посмотрите, есть ли что-то внутри тега слота
каштан
тестовый компонент
<template>
<div>
<slot>插槽默认内容</slot>
</div>
</template>
<script>
export default {
data() {
return {
test:'son'
}
},
};
</script>
В родительском компоненте поместите вещи в тестовый тег
<test>插槽数据</test>
ничего внутри тестового тега
<test></test>
именованный слот
Вы должны знать, что в слот могут быть помещены не только строки, но и его данные могут быть html или даже другими компонентами.
Это еще одна проблема.Если данные, которые мы планируем поместить в слот, представляют собой макет домашней страницы, он может иметь заголовок, тело и нижний колонтитул. Как я могу гарантировать, что данные, пропущенные через слот, могут войти в указанное местоположение компонента
Реализация этой функции зависит от именованного слота.
каштан
Метод записи слота: используйте тег шаблона, чтобы обернуть размещаемые данные, и используйте параметр v-slot, чтобы помочь вам поместить его в конкретный слот тестового компонента «яма».
Обратите внимание, что нет данных, завернутых в шаблон и указанное имя слота, что эквивалентно<template v-slot:default> 身体 </template>
Он также будет помещен в яму безымянного слота в тестовом компоненте.
<test>
<template v-slot:header>
头部
</template>
<template v-slot:body>
身体
</template>
<template v-slot:footer>
尾部
</template>
</test>
тестовый компонент: назначьте атрибут имени слоту pit
template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="body"></slot>
</main>
<font>
<slot name="footer"></slot>
</font>
</div>
</template>
Укажите имя слота динамически в родительском компоненте
<test>
<template v-slot:[名字]>
头部
<template
<test>
слот с прицелом
Первый взгляд
<template>
<div id="app">
<test>
{{test}}
</test>
</div>
</template>
<script>
import Test from './components/test01'
export default {
data() {
return {
test:'fa'
}
},
components:{
Test
}
};
</script>
Вы делаете это в тестовом слоте{{test}}Полученные данные должны быть только данными текущего компонента (компонент можно понимать как имеющий область действия компонента)
Однако я также думаю, что пространство в тестовом теге также можно рассматривать как имеющее какое-то отношение к тестовому компоненту (ведь это пространство принадлежит чужим слотам)
Итак, могу ли я получить данные самого моего тестового компонента в этом тестовом слоте?
Слоты с заданной областью помогают нам решить эту проблему
увидеть каштаны
Давайте сначала посмотрим, как тестовый компонент передает данные
Эта функция аналогична взаимодействию родитель-потомок между компонентами, и она также передается слоту посредством связывания атрибутов (компоненты являются родителем-потомком, что здесь немного наоборот)
<template>
<div>
<slot :test="test"></slot>
</div>
</template>
<script>
export default {
data() {
return {
test: "son",
};
},
};
</script>
Давайте посмотрим, как получить в родительском компоненте
Он по-прежнему указывается v-slot, потому что яма, из которой передаются данные, не имеет имени. Поэтому мы напрямую используемv-slot="testProps", данные, переданные в это время, помещаются в testProps (эта переменная названа нами). Тест формата данных: «сын» (пройден путем привязки тестового атрибута)
Если есть имя, подобное следующему, оно должно указывать имя в виде параметра.
v-slot="testProps" эквивалентен v-slot:default="testProps" (рекомендуется однозначное соответствие)
<template>
<div id="app">
<test>
<template v-slot="testProps">{{testProps.test}}</template>
</test>
</div>
</template>
<script>
import Test from "./components/test01";
export default {
data() {
return {
test: "fa",
};
},
components: {
Test,
},
};
</script>
Кроме того, поскольку слоты с областью действия работают, принимая содержимое слота как функцию с одним параметром, переданным в
как понять
<template v-slot:default="testProps">
插槽内容
{{testProps.test}}
</template>
function (testProps){
//插槽内容
}
То есть можно понять так, этот кастомный testProps — это формальный параметр функции, а содержимое слота ниже — это тело этой функции
Итак, теперь вы можете делать небольшие операции
Деконструкция реквизита
<template v-slot:default="{test}">{{test}}</template>
Существуют и другие операции, связанные с параметрами функции, и здесь также можно использовать переименование значения по умолчанию.
наконец
Краткая форма v-образного слота
Замените все перед параметром (v-slot:) на #. (Используйте, когда есть параметры, то есть когда нужно указать имя)
Такие как
<test>
<template #default="{test}">{{test}}</template>
</test>
4. Динамические и асинхронные компоненты
динамические компоненты
Давайте взглянем на самый простой переключатель панели вкладок каштана динамических компонентов.
Переключаем компоненты test01, 02, 03 соответственно
Вы не можете использовать отображение и скрытие, как раньше.
Vue предоставляет нам очень простой способ выполнить эту операцию.
то есть использовать<component>Элемент привязывает к себе другойisсвойства для реализации. Значение может быть зарегистрированным именем компонента или объектом опций компонента.
Код вышеуказанного эффекта
<template>
<div id="app">
<ul @click="change">
<li>test01</li>
<li>test02</li>
<li>test03</li>
</ul>
<div class="zhan"></div>
<component :is="componentId"></component>
</div>
</template>
<script>
import Test01 from "./components/test01";
import Test02 from "./components/test02";
import Test03 from "./components/test03";
export default {
data() {
return {
componentId: "Test01",
};
},
methods: {
change(e) {
this.componentId = e.target.innerText;
},
},
components: {
Test01,
Test02,
Test03,
},
};
</script>
<style lang="css">
.zhan {
height: 50px;
}
ul{
margin: 0;
padding: 0;
}
li {
float: left;
margin-left: 5ox;
width: 50px;
list-style: none;
}
</style>
Асинхронные компоненты
Проблема асинхронной загрузки кажется бесчисленной.Позавчера в vue-router Tianshui компоненты в объекте маршрутизации также занимались асинхронной загрузкой.
Его преимущества все те же.Когда вы его используете, он вам не нужен, когда вы его не используете.Вы не можете убрать все ресурсы компонента с самого начала.
Например, в случае с вкладкой выше вы запрашиваете корневой компонент, который содержит вкладку.Если вы не используете асинхронные компоненты, вам нужно получить все компоненты, содержащиеся на панели вкладок, одновременно, test01, 02 , 03. Во-первых, это вопрос количества, лучше сказать, что здесь меньше, если это большой сайт. Во-вторых, некоторые могут вообще не запрашиваться.Например, не используется компонент test03.Это трата, если брать его с самого начала?
Проблемы, вызванные этим, также очень серьезны, одна проблема времени, а другая - ненужные накладные расходы.
Возьмите его, как вам нужно, и используйте его снова, это лучше?
Это также проще в использовании
components: {
Test01:()=>import('./components/test01'),//返回的是promise
Test02:()=>import('./components/test02'),
Test03:()=>import('./components/test03'),
},
5. keep-alive
первое знакомство
Мы должны начать с каштанов в столбце вкладок выше, на этот раз мы добавим несколько функций крючка для каждого каштана.
так
<template>
<div>
test01
</div>
</template>
<script>
export default {
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
};
</script>
увидеть эффект
Каждый из их компонентов должен пройти процесс создания заново, но этот метод определенно не хорош для производительности. Я, очевидно, взял его один раз, и мне придется бежать, чтобы получить его снова в следующий раз, когда я использую его. Усталый глупый мальчик?
Я не могу взять его и положить в карман, как хорошо в следующий раз взять его из кармана
keep-alive здесь, чтобы сделать это
Он проще в использовании, с<keep-alive>Метка оборачивает динамическую цель
<keep-alive>
<component :is="componentId"></component>
</keep-alive>
Посмотрите на эффект: вы просто используете кеш позже?Есть еще одно преимущество использования кеша, который может записывать информацию о просмотре исходного компонента.
Компонент keep-alive также может получать три свойства.
-
include- Строка или регулярное выражение. Кэшируются только компоненты с совпадающими именами. -
exclude- Строка или регулярное выражение. Любые компоненты, имена которых совпадают, не будут кэшироваться. -
max- количество. Максимальное количество экземпляров компонентов, которые можно кэшировать.
Это относительно просто, достаточно посмотреть на каштаны на официальном сайте.
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
Стоит отметить: при совпадении сначала проверяется собственный компонентnameВариант, еслиnameопция недоступна, она соответствует своему локально зарегистрированному имени (родительский компонентcomponentsключ выбора). Анонимные компоненты не могут быть сопоставлены.
Принцип реализации
keep-alive — это встроенный компонент vue, и его принцип не слишком сложен.
Главное реализовать кеширование компонентов, давайте рассмотрим его основной принцип (я лишь объясняю, что делают некоторые функции инструмента, и не буду их подробно расписывать. За подробностями обращайтесь к исходникам vue)
Сначала напишите базовую полку этого компонента
export default {
name: 'keep-alive',
props: {
include: [String, RegExp, Array],
exclude: [String, RegExp, Array],
max: [String, Number]
},
created() {},
mounted() {},
destroyed() {},
render() {}
}
Прежде всего, этот компонент должен получить три переданных параметра атрибута. Во-первых, мы не можем использовать здесь синтаксис шаблона (и реализацию vue-router, для которой требуется версия с компилятором), поэтому нам нужно использовать функцию рендеринга.
Нашей конечной целью является хранение компонентов, затем нам нужно рассмотреть, какую структуру данных использовать для сохранения, когда создать эту структуру создания, и три переданных значения атрибута, чтобы изменить, какой хук мы обрабатываем, и после поддержания активности компонент уничтожен, все сохраненные компоненты также уничтожены
что делает созданный хук
Прежде всего, мы решили создать структуру данных компонента хранилища в созданном хуке, и мы можем использовать хранилище объектов.
created () {
this.cache = Object.create(null)//[key：组件]
this.keys = []//只保存所有需要缓存组件key的数组
},
Что делает навесной крюк
Во-первых, мы знаем, что монтирование завершается после выполнения монтируемого хука, а этот хук стоит за хуком обновления и должен иметь возможность получить значения последних трех атрибутов при повторном срабатывании хука.
Итак, мы имеем дело с логикой изменения атрибутов здесь
mounted () {
this.$watch('include', val => {
pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
}
Функция pruneCache предназначена для определения необходимости сохранения сохраненных компонентов в соответствии с последними изменениями включения или исключения без удаления объекта кеша.
Что делает разрушенный хук
Это также для уничтожения всех компонентов в кеше.
Самый важный рендер
первое, что нужно знатьkeep-aliveОбрабатывается только первый подкомпонент, соответствующий ему vnode мы можем получить через слот
Получить имя этого компонента, чтобы оно совпадало с включением и исключением (может быть, если нет имени, то взять тег)
То есть, если он соответствует исключению, значит, он не закеширован, и вы можете напрямую вернуться к vnode.
Если он совпадает с включенным, это означает, что его нужно поместить в объект кеша.
Тогда при отображении внутреннего содержимого keep-alive в будущем он будет сначала проверять кеш по имени компонента, полученному слотом, и использовать его напрямую. Мне жаль, если ты не
На этом основные идеи заканчиваются, но есть еще один момент. Когда вы тестируете вкладку каштана в начале, вы обнаружите, что компонент, который отображается в начале, не кэшируется.
Здесь он использует стратегию устранения кэша LRU (вы можете узнать это автоматически. Забудьте об этом и о группе original или os, одно из попаданий почти невозможно запомнить)
6. Смешайте
Мы уже использовали эту штуку слишком много раз.
Сначала рассмотрим его концепцию:
Миксины предоставляют очень гибкий способ распространения повторно используемой функциональности в компонентах Vue. Объект миксина может содержать произвольные параметры компонента. Когда компонент использует примесь, все опции примеси будут «смешаны» с собственными опциями компонента.
Эта вещь относительно проста, то есть вы можете создать объект с тем же именем, что и опция компонента. Данные в нем могут быть смешаны в компонент
Больше говорить бесполезно, посмотрите на каштаны.
смешать данные
Напишите объект примеси и смешайте данные в функции данных в этом объекте с компонентом. (в основном для одноименного компонента)
<template>
<div>test01</div>
</template>
<script>
const mixin = {
data() {
return {
foo: "foo",
name: "zs",
};
},
};
export default {
mixins: [mixin],
data() {
return {
foo: "foo组件",
};
},
created() {
console.log(this.$data)
},
};
</script>
крючок для подмешивания
Конструкторы с одинаковыми именами будут объединены в массив, то есть будут вызваны два хука с одинаковым именем на компоненте или смешанном объекте (смешанный хук будет первым на компоненте)
<template>
<div>test01</div>
</template>
<script>
const mixin = {
created() {
console.log('混进来的')
},
};
export default {
mixins: [mixin],
created() {
console.log('组件上的')
},
};
</script>
Остальные значения являются опциями объекта
Такие какmethods,componentsЭто то же самое, что и данные в данных. Компоненты, которые не микшируются напрямую, некоторые компоненты (с тем же названием) все еще используют компоненты
То же самое относится и к глобальным миксинам, но это влияет на каждый экземпляр Vue, созданный после него.
Принцип этого - все виды проблем слияния, когда слиться? Как слиться? проблема с весом?
Я оставлю это на потом, потому что я планирую написать реализацию 11 глобальных API vue в следующем резюме, поэтому я не хочу повторяться здесь.
пиши до конца
На самом деле, он все еще обобщается в соответствии с упомянутой ранее серией контента, но написано не так уж много js-вещей и немало статей о колесах. Поэтому, после суммирования структуры данных, есть какие-то знания во всем колесе, сразу будут написаны js и несколько очень важных пунктов знаний Ниже должны быть оставшиеся части знаний js, некоторые вещи в применении vue и принципиальная реализация некоторых из наиболее важных API-интерфейсов vue.
Одним словом: Старлайт не спрашивает прохожих, время окупается, давайте работать вместе и с нетерпением ждать нашей следующей встречи.
Спасибо:
официальный сайт вью
внутренности поддержания активности
Сценарии и практики использования асинхронных компонентов Vue (расширенные асинхронные компоненты)