Забраковать титульную партию, хахаха, после прочтения можно в принципе начинать разрабатывать, эта статья подходит дляVueначинающий илиVue2Мигрантам, конечно, еще рекомендуетсяVue3Официальный сайт полностью закрыт. Не подходит для мастеров, которые разбираются в принципе и исходном коде.
Сначала порекомендуйте два плагина vscode
Volar
Сначала рекомендуетсяVolar,использоватьvscodeразвиватьVueПартнеры проекта должны знатьVetur这个神级插件，有了它可以让我们得开发如鱼得水。
ТакVolarможно понимать какVue3версияVetur, подсветка кода, подсказки по синтаксису, в основномVeturУ некоторых это есть.
специальная функция
Конечно, как новый плагин, он должен иметь свои уникальные функции.
Редакторы нескольких корневых узлов не будут сообщать об ошибках
Vue3Это позволяет нам иметь несколько корневых узлов, но если мы используем Vetur, мы сообщим об ошибке, которая не повлияет на работу, но выглядит очень раздражающей.
Итак, когда мы обращаемся кVolarТогда этой проблемы не возникнет.
разделение редактора
даже еслиVueКомпонентная разработка одного файла может значительно сократить длину кода одного файла, но это все равно сотни или даже тысячи строк. тогда мы переключаемсяtemplate,scriptиstyleВам нужно часто листать вверх и вниз, хотя некоторые плагины могут напрямую находитьcss, но вы не можете вернуться! Так что эта функция просто слишком удобна для пользователя.
установленVolarПозже откройте.vueфайл, см.vscodeВ правом верхнем углу есть такая иконка, нажмите на нее.
Он автоматически разделит вас на три страницы, соответствующиеtemplate,scriptиstyle, это так удобно, не так ли?
Есть много новых функций, вы можете обратиться к следующей статье
Volar — совершенный артефакт разработки VUE!
Vue 3 Snippets
Второй рекомендуемый плагин называетсяVue 3 Snippets, так же у него есть свояVue2Версия. Что он делает? Давайте посмотрим на эту картинку, я только печатаю.“v3”, в нем много подсказок, мы просто выбираемv3computed, выберите Ввод.
Затем он автоматически написал нам следующий код
Разве это не супер просто, и время на рыбалку увеличилось! Есть более интересные способы его использования, друзья, исследуйте его самостоятельно.
Создайте проект Vue3
Тогда официально приступайте к изучению нашегоVue3, начните с создания проекта.
Создано с помощью vue-cli
Введите следующую команду, а затем выберите элемент конфигурации для установки, обратите внимание здесьvue-cliВерсия должна быть в4.5.0выше
// 安装或者升级
npm install -g @vue/cli
//查看版本 保证 vue cli 版本在 4.5.0 以上
vue --version
// 创建项目
vue create my-project
//然后根据提示一步一步傻瓜式操作就行了
...
Создано с помощью Vite
сказатьVue3.0иVite2Больше соответствий, различных оптимизаций и различных скоростей, но они не являются частью содержания этой статьи.Для целей этой статьи нам нужно только знать, насколько это просто и как его использовать. У меня есть много вариантов здесьTS, каждая строка имеет комментарий, с первого взгляда.
// 初始化viete项目
npm init vite-app <project-name>
// 进入项目文件夹
cd <project-name>
// 安装依赖
npm install
//启动项目
npm run dev
После создания давайте посмотрим на входной файлmain.ts
// 引入createApp函数,创建对应的应用,产生应用的实例对象
import { createApp } from 'vue';
// 引入app组件(所有组件的父级组件)
import App from './App.vue';
// 创建app应用返回对应的实例对象,调用mount方法进行挂载 挂载到#app节点上去
createApp(App).mount('#app');
Затем посмотрите на корневой компонентapp.vue
//Vue2组件中的html模板中必须要有一对根标签,Vue3组件的html模板中可以没有根标签
<template>
<img alt="Vue logo" src="./assets/logo.png">
<!-- 使用子级组件 -->
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</template>
<script lang="ts">
// 这里可以书写TS代码
// defineComponent函数,目的是定义一个组件 内部可以传入一个配置对象
import { defineComponent } from 'vue';
//引入子级组件
import HelloWorld from './components/HelloWorld.vue';
// 暴露出去一个定义好的组件
export default defineComponent({
// 当前组件的名字
name: 'App',
// 注册组件
components: {
// 注册一个子级组件
HelloWorld,
},
});
</script>
Composition API
Теперь наступает главное событие,Vue3особенности подписи,Composition API
оComposition APIВот демонстрационная анимация, сделанная большим парнем, которую мы настоятельно рекомендуем.
Эта анимация Vue3, которая работала всю ночь, хороша, но слишком короткая.
Composition APIУдобнее извлекать общую логику, но не стоит уделять слишком много внимания повторному использованию кода логики, также идея извлекать код по функциям.
Кстати,Vue3Совместимость с большинствомVue2синтаксис, поэтому вVue3написано наVue2Синтаксис в порядке (за исключением отмены), но так как мы обновилиVue3Теперь не рекомендуется смешивать и использовать, если только некоторые крупные специальные проекты не должны быть совместимы с обеими версиями.
setup
setupпредставляет собой комбинациюComposition APIФункция входа также является первой используемой функцией.
setupВыполняется только один раз при инициализации, всеComposition APIЗдесь используются функции.
setup() {
console.log('我执行了') //我执行了
},
в состоянии пройтиconsole.logВидетьsetupвbeforeCreateВыполняется перед жизненным циклом (выполняется только один раз)
beforeCreate() {
console.log('beforeCreate执行了');
},
setup() {
console.log('setup执行了');
return {};
},
//setup执行了
//beforeCreate执行了
Отсюда можно сделать вывод, чтоsetupПри выполнении объект компонента не был создан, объект экземпляра компонентаthisпока нет в наличииthisдаundefined, не могу пройтиthisпосещатьdata/computed/methods/props.
Свойства возвращаемого объекта будут такими же, какdataСвойства объекта, возвращаемого функцией, объединяются со свойствами объекта-компонента, а методы в возвращаемом объекте объединяются сmethodsМетод в методе объединяет метод успешного объекта компонента, если есть повторяющееся имя,setupприоритет. Так какsetupсерединаthisнедоступен,methodsдоступный вsetupпредоставленные свойства и методы, но вsetupметод недоступенdataиmethodsсодержания, поэтому не рекомендуется их смешивать.
setupЕсли функция возвращает объект,Атрибутыилиметод , шаблонможно использовать непосредственно в
//templete
<div>{{number}}</div>
//JS
setup() {
const number = 18;
return {
number,
};
},
Уведомление:setupне может быть однимasyncфункция: потому что возвращаемое значение больше неreturnобъект, ноpromise, нельзя использовать в шаблонахreturnВозвращаются данные объекта.
Параметры настройки (реквизит, контекст)`
props: это объект, который содержит данные, передаваемые из родительского компонента в дочерний компонент, и используется в дочернем компоненте.propsВсе свойства получены
context: объект контекста, к которому можно получить доступ черезes6Грамматическая деконструкция setup(props, {attrs, slots, emit})
-
attrs: получить все элементы на текущей метке компонента, которые не прошли
propsОбъект полученных свойств, эквивалентныйthis.$attrs -
slots: объект, содержащий содержимое всех входящих слотов, эквивалентный
this.$slots -
emit: функция, используемая для отправки пользовательских событий, эквивалентная
this.$emit
демоattrsиprops
//父组件
<template>
<child :msg="msg" msg2='哈哈哈' />
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue';
// 引入子组件
import Child from './components/Child.vue';
export default defineComponent({
name: 'App',
components: {
Child,
},
setup() {
const msg = ref('hello,vue3');
return {
msg,
};
},
});
</script>
//子组件
<template>
<h2>子组件</h2>
<h3>msg:{{ msg }}</h3>
</template>
<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Child',
props: ['msg'],
setup(props, {attrs, slots, emit}) {
console.log('props:', props);//msg: "hello,vue3"
console.log('attrs:', attrs);//msg2: "哈哈哈"
return {};
},
});
</script>
демоemit
//父组件
<template>
<child @show="show" />
</template>
<script lang='ts'>
setup() {
const show = () => {
console.log('name:', 'hzw');
};
return {
show,
};
},
</script>
//子组件
<template>
<button @click='emitFn'>事件分发</button>
</template>
<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Child',
setup(props, { emit }) {
const emitFn = () => {
emit('show');
};
return {
emitFn,
};
},
});
</script>
ref
эффект
Определить адаптивные данные (обычно используется для определения базового типа адаптивных данных).Undefined,Null,Boolean,NumberиString)
грамматика
const xxx = ref(initValue):
Уведомление:scriptЭксплуатационные данные в необходимости использованияxxx.valueформы, и шаблон не нужно добавлять.value
Продемонстрируйте на примере: реализуйте кнопку, нажмите, чтобы увеличить количество
<template>
<div>{{count}}</div>
<button @click='updateCount'>增加</button>
</template>
в Vue2
data() {
return {
conunt: 0,
};
},
methods: {
updateCount() {
this.conunt++;
},
},
в Vue3
setup() {
// ref用于定义一个响应式的数据，返回的是一个Ref对象，对象中有一个value属性
//如果需要对数据进行操作，需要使用该Ref对象的value属性
const count = ref(0);
function updateCount() {
count.value++;
}
return {
count,
updateCount,
};
},
существуетVue2в котором мы проходимthis.$refsполучитьdomузел,Vue3в котором мы проходимrefчтобы получить узел
Сначала нужно добавить на этикеткуref='xxx',после этогоsetupОпределите начальное значение вnullизrefтип, имя и этикеткаrefАтрибуты согласованы
const xxx = ref(null)
Уведомление: должен быть вsetupизreturnвернуться, иначе будет сообщено об ошибке.
Или используйте пример для демонстрации: пусть поле ввода автоматически получает фокус
<template>
<h2>App</h2>
<input type="text">---
<input type="text" ref="inputRef">
</template>
<script lang="ts">
import { onMounted, ref } from 'vue'
/*
ref获取元素: 利用ref函数获取组件中的标签元素
功能需求: 让输入框自动获取焦点
*/
export default {
setup() {
const inputRef = ref<HTMLElement|null>(null)
onMounted(() => {
inputRef.value && inputRef.value.focus()
})
return {
inputRef
}
},
}
</script>
reactive
грамматика
const proxy = reactive(obj)
эффект
Реактивный прокси-объект, который определяет несколько данных, принимает обычный объект и возвращает обычный объект.(Proxy), адаптивное преобразование является «глубоким»: оно влияет на все вложенные свойства внутри объекта, и все данные являются адаптивными.
демонстрация кода
<template>
<h3>姓名:{{user.name}}</h3>
<h3>年龄:{{user.age}}</h3>
<h3>wife:{{user.wife}}</h3>
<button @click="updateUser">更新</button>
</template>
setup() {
const user = reactive({
name: 'hzw',
age: 18,
wife: {
name: 'xioaohong',
age: 18,
books: ['红宝书', '设计模式', '算法与数据结构'],
},
});
const updateUser = () => {
user.name = '小红';
user.age += 2;
user.wife.books[0] = '金瓶梅';
};
return {
user,
updateUser,
};
},
вычисляемая функция:
иVue2серединаcomputedФункция конфигурации та же самая, а возвращаемыйrefтип объекта
Если в функцию вычисляемого свойства передается только одна функция обратного вызова, это означает, чтоgetдействовать
import { computed } from 'vue';
const user = reactive({
firstName: '韩',
lastName: '志伟',
});
const fullName1 = computed(() => {
return user.firstName + user.lastName;
});
return {
user,
fullName1,
};
В функцию вычисляемого свойства можно передать объект, который может содержатьsetиgetФункции, выполняющие операции чтения и изменения
const fullName2 = computed({
get() {
return user.firstName + '_' + user.lastName;
},
set(val: string) {
const names = val.split('_');
user.firstName = names[0];
user.lastName = names[1];
},
});
return {
user,
fullName2,
};
функция часов:
иVue2серединаwatchФункция конфигурации является последовательной,
- Параметр 1: данные для мониторинга
- Параметр 2: функция обратного вызова
- Параметр 3: Конфигурация
эффект
Отслеживайте указанные один или несколько реактивных данных и автоматически выполняйте обратный вызов мониторинга после изменения данных.
По умолчанию обратный вызов изначально не выполняется, но его можно настроить с помощьюimmediateзаtrue, чтобы указать первое выполнение сразу в начальный момент времени
по конфигурацииdeepзаtrue, чтобы задать мониторинг глубины
import { watch, ref } from 'vue';
const user = reactive({
firstName: '韩',
lastName: '志伟',
});
const fullName3 = ref('');
watch(
user,
({ firstName, lastName }) => {
fullName3.value = firstName + '_' + lastName;
},
{ immediate: true, deep: true }
);
return {
user,
fullName3,
};
watchСлушайте несколько данных, используйте массив
watchПри прослушивании не отвечающих данных вам необходимо использовать форму функции обратного вызова
watch([()=>user.firstName,()=>user.lastName,fullName3],()=>{console.log('我执行了')})
функция watchEffect:
эффект
Выполнять обратный вызов при изменении данных мониторинга, без прямого указания данных для мониторинга, ответные данные, используемые в функции обратного вызова, будут отслеживаться для ответных данных.По умолчанию он будет выполняться в первый раз, так что данные могут быть собраны для мониторинга.
import { watchEffect, ref } from 'vue';
const user = reactive({
firstName: '韩',
lastName: '志伟',
});
const fullName4 = ref('');
watchEffect(() => {
fullName4.value = user.firstName + '_' + user.lastName;
});
return {
user,
fullName4,
};
watchEffect可以实现计算属性set方法
watchEffect(() => {
const names = fullName3.value.split('_');
user.firstName = names[0];
user.lastName = names[1];
});
Сравнение жизненного цикла:
Уведомление:3.0Крючки жизненного цикла в2.XХуки с одинаковым жизненным циклом работают быстрее в
Composition APIТакже были добавлены следующие функции ловушки отладки: но не очень часто используемые
- onRenderTracked
- onRenderTriggered
демонстрация кода
setup() {
onBeforeMount(() => {
console.log('--onBeforeMount')
})
onMounted(() => {
console.log('--onMounted')
})
onBeforeUpdate(() => {
console.log('--onBeforeUpdate')
})
onUpdated(() => {
console.log('--onUpdated')
})
onBeforeUnmount(() => {
console.log('--onBeforeUnmount')
})
onUnmounted(() => {
console.log('--onUnmounted')
})
}
toRefs
эффект
Преобразует реактивный объект в обычный объект, где каждое свойство нормального объекта является ref
применение
Мы используемreactiveСозданный объект, если вы хотите использовать его в шаблоне, вы должны использоватьxxx.xxxвиде, все еще очень хлопотно, если он используется в больших количествах, но с использованиемes6После деконструкции он потеряет отзывчивость, тогдаtoRefsРоль отражена в этом, используяtoRefsОтзывчивыйreactive Все примитивные свойства объекта преобразуются в реактивныеrefАтрибуты. Конечно, друзья могут сами разработать больше сценариев приложений.
демонстрация кода
<template>
<div>
name:{{name}}
</div>
</template>
<script lang='ts'>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
name: '',
setup() {
const state = reactive({
name: 'hzw',
});
const state2 = toRefs(state);
setInterval(() => {
state.name += '===';
}, 1000);
return {
//通过toRefs返回的对象,解构出来的属性也是响应式的
...state2,
};
},
});
</script>
обеспечить и ввести
эффект
Реализовать связь между межуровневыми компонентами (внуками)
демонстрация кода
родительский компонент
<template>
<h1>父组件</h1>
<p>当前颜色: {{color}}</p>
<button @click="color='red'">红</button>
<button @click="color='yellow'">黄</button>
<button @click="color='blue'">蓝</button>
<hr>
<Son />
</template>
<script lang="ts">
import { provide, ref } from 'vue'
import Son from './Son.vue'
export default {
name: 'ProvideInject',
components: {
Son
},
setup() {
const color = ref('red')
provide('color', color)
return {
color
}
}
}
</script>
Подсборка
<template>
<div>
<h2>子组件</h2>
<hr>
<GrandSon />
</div>
</template>
<script lang="ts">
import GrandSon from './GrandSon.vue'
export default {
components: {
GrandSon
},
}
</script>
компонент внука
<template>
<h3 :style="{color}">孙子组件: {{color}}</h3>
</template>
<script lang="ts">
import { inject } from 'vue'
export default {
setup() {
const color = inject('color')
return {
color
}
}
}
</script>
Другие особенности
Телепорт
эффект
TeleportОбеспечивает чистый способ позволить компонентуhtmlконкретная метка вне интерфейса родительского компонента (вероятноbody) в разделе «Вставить дисплей»
Другими словами, можноПодсборкаилиузел домВставляйте куда хотите.
грамматика
использоватьtoАтрибуты используют селекторы в кавычках
<teleport to="body">
</teleport>
демонстрация кода
//父组件
<template>
<div class="father">
<h2>App</h2>
<modal-button></modal-button>
</div>
</template>
<script lang="ts">
import ModalButton from './components/ModalButton.vue'
export default {
setup() {
return {}
},
components: {
ModalButton,
},
}
</script>
//子组件
<template>
<div class="son">
<button @click="modalOpen = true">
点我打开对话框
</button>
<teleport to="body">
<div v-if="modalOpen"
class="looklook">
看看我出现在了哪里
<button @click="modalOpen = false">
Close
</button>
</div>
</teleport>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'modal-button',
setup() {
const modalOpen = ref(false)
return {
modalOpen,
}
},
}
</script>
можно увидеть в дочернем компонентеlooklookэлемент побежалbodyНиже, и две строки комментариев появляются по умолчанию в предыдущей позиции
Саспенс (неопределенно)
эффект
Они позволяют нашему приложению отображать некоторый резервный контент в ожидании асинхронных компонентов, что позволяет нам создать удобный пользовательский интерфейс.
грамматика
<Suspense>
<template v-slot:default>
<!-- 异步组件 -->
<AsyncComp />
</template>
<template v-slot:fallback>
<!-- 后备内容 -->
<h1>LOADING...</h1>
</template>
</Suspense>
vue3Способ внедрения асинхронных компонентов в
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
демонстрация кода
родительский компонент
<template>
<Suspense>
<!-- v-slot:defaul可以简写成#defaul -->
<template v-slot:default>
<AsyncComp/>
</template>
<template v-slot:fallback>
<h1>LOADING...</h1>
</template>
</Suspense>
</template>
<script lang="ts">
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
export default {
setup() {
return {
}
},
components: {
AsyncComp,
}
}
</script>
Подсборка
<template>
<h2>AsyncComp22</h2>
<p>{{msg}}</p>
</template>
<script lang="ts">
export default {
name: 'AsyncComp',
setup () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
msg: 'abc'
})
}, 2000)
})
}
}
</script>
На рисунке ниже видно, что перед загрузкой асинхронного компонента дисплейfallbackсодержание в
Оценка ответных данных
эффект
-
isRef: проверить, является ли значение
refобъект -
isReactive: Проверить, создан ли объект
reactiveСоздал реактивный прокси -
isReadonly: Проверить, создан ли объект
readonlyСоздан прокси только для чтения -
isProxy: Проверить, создан ли объект
reactiveилиreadonlyПрокси, созданный по методу
демонстрация кода
setup() {
const state1 = ref(1);
console.log('isref:', isRef(state1));//isref: true
const state2 = reactive({});
console.log('isReactive:', isReactive(state2));//isReactive: true
const state3 = readonly({});
console.log('isReadonly:', isReadonly(state3));//isReadonly: true
const state4 = reactive({});
console.log('isProxy:', isProxy(state2));//isProxy: true
console.log('isProxy:', isProxy(state4));//isProxy: true
return {};
},
Другие необычные особенности
Есть много, много новых функций, которые обычно не используются. Я не использую их в повседневной разработке. Многие из них используются для оптимизации. Заинтересованные друзья могут зайти на официальный сайт, чтобы проверить их, или большие ребята могут представить сценарии применения.
- shallowReactive
- shallowRef
- readonly
- shallowReadonly
- markRaw
- customRef
- ...
синтаксический сахар
Несмотря на то чтоComposition APIЭто уже очень удобно в использовании, но у нас есть еще очень раздражающее место, например
- Компонент введен и нуждается в регистрации
- свойства и методы должны быть
setupreturn в функции, иногда только одинreturnВсего дюжина или даже десятки строк - ...
- Я не хочу писать, что мне делать?
легко сделать,Vue3официально предоставленscript setupсинтаксический сахар
просто нужноscriptдобавить меткуsetup, компонент нужно только внедрить без регистрации, а свойства и методы возвращать не нужно.setupфункция не нужна, дажеexport defaultНе нужно писать, не только данные, вычисляемые свойства и методы, но даже пользовательские инструкции также могут быть использованы в нашемtemplateполучен автоматически.
Но такой приятный грамматический сахар все же добавляет немного умственной нагрузки, ведь больше нетsetupфункция, тоprops,emit,attrsКак его получить, мы должны ввести новый синтаксис.
setup scriptсинтаксический сахар обеспечивает три новыхAPIдля нашего использования:defineProps,defineEmitиuseContext
-
definePropsИспользуется для получения значения от родительского компонента
props. - defineEmitИспользуется для объявления таблицы инициированных событий.
-
useContextИспользуется для получения контекста компонента
context.
демонстрация кода
родительский компонент
<template>
<div>
<h2>我是父组件！</h2>
<Child msg="hello"
@child-click="handleClick" />
</div>
</template>
<script setup>
import Child from './components/Child.vue'
const handleClick = (ctx) => {
console.log(ctx)
}
</script>
Подсборка
<template>
<span @click="sonClick">msg: {{ props.msg }}</span>
</template>
<script setup>
import { useContext, defineProps, defineEmit } from 'vue'
const emit = defineEmit(['child-click'])
const ctx = useContext()
const props = defineProps({
msg: String,
})
const sonClick = () => {
emit('child-click', ctx)
}
</script>
Щелкаем дочерний компонентможно увидеть
contextраспечатывается, гдеattrs,emit,slots,exposeСвойства и методы по-прежнему доступны.propsЕго также можно вывести на страницу, и событие будет успешно отправлено.
Другие точки знаний
Далее я расскажу, как я используюVue3Проблемы или советы, возникающие в процессе, не исчерпывающие, просто напишите, что вы думаете.
сахар синтаксиса настройки скрипта обратите внимание
если передается в родительский компонентref='xxx'метод для получения экземпляра дочернего компонента, дочерний компонент используетscript setupСинтаксический сахар, то данные подкомпонента нужно экспортировать в виде expose, иначе будет сообщено об ошибке, потому что данные не могут быть получены.
демонстрация кода
родительский компонент
<template>
<div>
<h2>我是父组件！</h2>
<Child ref='son' />
</div>
</template>
<script setup>
import Child from './components/Child.vue'
import { ref } from 'vue'
const son = ref(null)
console.log('🚀🚀~ son:', son)
</script>
Подкомпоненты не используют сначала синтаксический сахар
<template>
<div>
我是子组件{{msg}}
</div>
</template>
<script >
import { ref } from 'vue'
export default {
setup() {
const msg = ref('hello')
return {
msg,
}
},
}
Вы можете видеть, что мы можем получить то, что мы определили в подкомпонентеmsgатрибут
Теперь замените дочерний компонент на
script setupСинтаксический сахар, попробуйте еще раз
<template>
<div>
我是子组件{{msg}}
</div>
</template>
<script setup>
import { ref } from 'vue'
const msg = ref('hello')
</script>
Вы можете видеть, что определение подкомпонента теперь не может быть полученоmsgатрибут
Мы видим, что Йода должен сказать
Дополнение из раздела комментариевПользователь 2150817567886Компоненты, определенные синтаксическим сахаром установки, по умолчанию не вызываются внутренней внешней разработкой.Он должен использовать функцию expose(), чтобы определить, какие данные разрешено открывать для внешнего мира.Ссылка на конкретный контент
Отправка событий отправки может проверять параметры
родительский компонент
<template>
<div>
<h2>我是父组件！</h2>
<Child @sonClick='sonClick' />
</div>
</template>
<script setup>
import Child from './components/Child.vue'
import { ref } from 'vue'
const sonClick = (value) => {
console.log(value)
}
</script>
Подсборка
<template>
<div>
我是子组件{{ msg }}
</div>
<button @click="handleClick(1)">我是按钮1</button>
<button @click="handleClick(2)">我是按钮2</button>
</template>
<script>
import { ref } from 'vue'
export default {
name: '',
emits: {
sonClick: (value) => {
if (value === 1) {
return true
} else {
return false
}
},
},
setup(props, { emit }) {
const msg = ref('hello')
const handleClick = (value) => {
emit('sonClick', value)
}
return {
msg,
handleClick,
}
},
}
</script>
Мы нажимаем кнопку 1 и кнопку 2 соответственно, и мы видим, что при нажатии кнопки 2 консоль выдаст предупреждение, но программа продолжит выполнение.Я не придумал никаких подходящих сценариев применения, но вы должны знать эта точка знаний, ребята, вы можете делать вещи здесь.
Взаимодействие mitt.js между компонентами
Vue2Как добиться межкомпонентной связи в Китае, первая мысль многих людейevent bus. ноVue3удаленный$on,$once,$offЭтот метод нельзя использовать. ноVueОфициально рекомендуетсяmitt.js, принцип которогоevent bus.
демонстрация кода
Установить первым
npm i mitt -s
затем инкапсулироватьhook
//mitt.js
import mitt from 'mitt'
const emitter = mitt();
export default emitter;
родительский компонент
<template>
<div>
<h2>我是父组件！</h2>
<Child1 />
<Child2 />
</div>
</template>
<script setup>
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
</script>
подкомпонент 1
<template>
<div>
我是子组件1
<h1>{{msg}}</h1>
</div>
</template>
<script>
import { ref, onUnmounted } from 'vue'
import emitter from '../mitt'
export default {
name: '',
setup() {
//初始化
const msg = ref('hello')
const changeMsg = () => {
msg.value = 'world'
}
// 监听事件,更新数据
emitter.on('change-msg', changeMsg)
// 显式卸载
onUnmounted(() => {
emitter.off('change-msg', changeMsg)
})
return {
msg,
changeMsg,
}
},
}
</script>
подкомпонент 2
<template>
<div>
我是子组件2
</div>
<button @click='changeMsg'>点击修改msg</button>
</template>
<script>
import { ref } from 'vue'
import emitter from '../mitt'
export default {
name: '',
setup() {
const changeMsg = () => {
emitter.emit('change-msg')
}
return {
changeMsg,
}
},
}
</script>
демо
пользовательская директива
Первый взглядVue2Хуки для пользовательских директив
- bind: срабатывает, когда директива привязана к соответствующему элементу. сработает только один раз.
-
inserted: Когда соответствующий элемент вставлен в
DOMЗапускается, когда родительский элемент . - update: этот хук будет срабатывать при обновлении элемента (потомки элемента еще не запустили обновление).
- componentUpdated: этот хук срабатывает, когда весь компонент (включая подкомпоненты) завершает обновление.
- unbind: Этот хук срабатывает, когда директива удаляется из элемента. Тоже срабатывает только один раз.
существует Vue3Чтобы улучшить читабельность кода и унифицировать стиль, официальный представитель изменил имя хука пользовательской инструкции, чтобы оно больше походило на жизненный цикл компонента, хотя это две разные вещи.
- bind => beforeMount
- inserted => mounted
- beforeUpdate: Новый хук, который срабатывает перед обновлением самого элемента
- update => Удалить!
- componentUpdated => updated
- beforeUnmount: Новый хук, который срабатывает до размонтирования самого элемента
- unbind => unmounted
анимация перехода
Это не серьезное изменение, всего два измененияclassНазвание, именно потому, что нет серьезных изменений, я сделал здесь большой кульбит. После того, как написал его, это не правильно. Я узнал, проверив официальный сайт.
Далее прямая цитатаОригинальный текст официального сайта
v-enter-from: определяет начальное состояние перехода в. Вступает в силу до вставки элемента и удаляется в следующем кадре после вставки элемента.
v-enter-active: Определяет состояние, когда входной переход вступает в силу. Применяется на протяжении всего перехода входа, вступает в силу до вставки элемента и удаляется после завершения перехода/анимации. Этот класс можно использовать для определения времени процесса перехода входа, задержек и функций кривой.
v-enter-to: определяет конечное состояние перехода в. Вступает в силу в следующем кадре после вставки элемента (при этом v-enter-from удаляется), удаляется после завершения перехода/анимации.
v-leave-from: определяет начальное состояние перехода перехода. Вступает в силу немедленно, когда запускается переход выхода, и удаляется в следующем кадре.
v-leave-active: Определяет состояние, когда вступает в силу переход выхода. Применяется в течение всей фазы перехода при выходе, вступает в силу сразу после запуска перехода при выходе и удаляется после завершения перехода/анимации. Этот класс можно использовать для определения времени обработки, задержек и функций кривых для выходных переходов.
v-leave-to: Выход из конечного состояния перехода. Вступает в силу в следующем кадре после запуска перехода leave (с удаленным v-leave-from), удаляется после завершения перехода/анимации.
Особо следует отметить, чтоv-enterизменился наv-enter-form,v-leaveизменился наv-leave-from.
Другие маленькие знания
Vue3удаленныйfilter
Получить метод экземпляра компонента
getCurrentInstance()
Этот метод может получить экземпляр текущего компонента, что эквивалентноVue2серединаthisДополнительные сведения см. в следующей статье.
Дополнение к методу getCurrentInstance Vue3 для получения текущего экземпляра компонента.
В конце концов, все-таки это личное резюме, и неизбежно будут огрехи и ошибки.Я с нетерпением жду добавления и исправления великих богов из всех слоев общества.
Ссылаться на
Официальная китайская документация Vue3
Скорость света Vue3.0 для начала
Volar — совершенный артефакт разработки VUE!
Новые функции Vue3.0 и сводка опыта использования
Эта анимация Vue3, которая работала всю ночь, хороша, но слишком короткая.
Дополнение к методу getCurrentInstance Vue3 для получения текущего экземпляра компонента.
Мой проект с открытым исходным кодом, поддержите его👉👉Славка Закладка