Еще не Vue3? Заметка, чтобы взять вас быстро

внешний интерфейс Vue.js
Еще не Vue3? Заметка, чтобы взять вас быстро

Предисловие:

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

Введение в Vue3

проблема, с которой мы сталкиваемся: код сложных компонентов становится сложно поддерживать по мере роста функциональности,Vue3следует,TypeScriptвсе больше и больше используется,Vue3этоTSНаписано, чтобы лучше поддерживатьTypeScript

Это так просто представить здесь

vue2Подавляющее большинство характеристикVue3ведь можно использоватьVueЭто прогрессивно

Используйте принцип отзывчивостиProxyвыполнить,v-modelВы можете передавать параметры и т. д. новые функции

основная работа

использоватьVue3, то вы должны создатьVue3проект

Установить vue-кли

# npm
npm install -g @vue/cli
# yarn
yarn global add @vue/cli

Создать проект

использоватьcreateсоздание командной строки или с помощьюuiВизуальное создание

для каждогоVueОни используются так долго, что я не буду говорить, как их создать один за другим.

# create
vue create 项目名
# 可视化
vue ui

Конечно, вы также можете выбратьvite,viteСкорость создания немного выше, чем у вышеописанного метода

npm init vite-app 项目名
cd 项目名
npm install
npm run dev

Начало работы с Vue3

Composition API

Vue3придумалComposition API

существуетVue2.Xмы используемOptionAPIЕсть знакомыеdata,computed,methods,watch...

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

существуетVue2, мы реализуем функцию, чтобы забивать в разные места, помещаем данные вdata ,computedметод вmethodsВнутри слишком разрозненно разделение, немного функций ладно, десятки или сотни, это немного...

такVue3придумалComposition API, это может поставить一个逻辑的代码都收集在一起писать в одиночкуhook, а затем повторно представить это, чтобы он не распределял повсюду, и он выглядит очень грязным

Fragment

существуетtemplateОболочка корневого элемента больше не требуется в

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</template>

На самом деле несколько тегов будут содержаться внутри одного.Fragmentв виртуальном элементе

Преимущества: Уменьшите количество меток, уменьшите использование памяти.

scriptразница

приди и посмотриscriptиVue2разница

<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    return {
        // 这里的属性 和 方法 会合并到 data 函数 和 methods 对象里
    }
  },
})
</script>
  • может сноваscriptиспользоватьtsПросто установитеlangПросто
  • defineComponentметод создания компонента
  • export defaultНепосредственный экспорт компонента

setup

setupдаComposition APIВход

setupисполнительный лист

это вbeforeCreateвыполнить один раз перед,beforeCreateЗадача этого хука — инициализироваться и выполниться перед ним, затемthisне инициализированthis = undefinedэто не пройдетthisдля вызова методов и получения свойств

image-20210811132514039

setupвозвращаемое значение

setupвозвращаетобъект, свойства этого объекта будут такими же, как и в компонентеdataОбъект, возвращаемый функцией,сливаться, метод, который возвращает иmethodsСлияние, его можно использовать прямо в шаблоне после слияния, если есть повторяющееся имя, оно будет использованоsetupвозвращениеАтрибутыиметод,methodsиdataможет получитьsetupМетоды в должны быть объединены, в противном случаеsetupНе могу получить их свойства и методы, потому что на этот разthis = undefined

image-20210811134028917

Suspenseкомпоненты

setupиспользоватьasync/await

нам нужноsetupвозвращает данные, то их точно нельзя использоватьasyncИзменено, это возвращаетpromiseзаключается в том, что мы не хотим видеть ситуацию, если мы настаиваемasyncМодификация, мы должны использовать вложенный во внешнем слое его родительского компонентаsuspense(Не уверен) Встроенные компоненты, которые размещают какие-то неопределенные операции, например, мы можем поставить в него асинхронные компоненты

1. Подкомпоненты
<template>
  {{ res }}
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Son',
  async setup() {
    const res = await axios.get('地址')
    return {
      res,
    }
  },
})
</script>
2. Родительский компонент
<template>
    <Suspense>
        <!-- 子组件-->
        <Son></Son>
    </Suspense>
</template>

setupпараметр

setup(props, context)

setupПервый параметр в функцииprops. Он получает значение, переданное родительским компонентом, да, это информация, переданная родительским и дочерним компонентами.props

Второй параметрcontextОн содержит 3 свойства{ attrs, slots, emit }, вы должны знать, что представляют собой эти три атрибута, глядя на названия.this.$attrs,this.$slots,this.$emit

  • attrs: Кромеpropsдругие объекты в
  • slots: Объект, который родительский компонент передает в содержимое слота
  • emit: и используется для связи между родительскими и дочерними компонентами.

ref

Определить/превратить в реактивный

наверхуsetupписьменные данныене отвечает, измените данные, представление не будет обновляться

существуетVue3Есть два способа определить адаптивные данные, давайте сначала представимref

Импортироватьrefметод

import { defineComponent, ref } from 'vue'
  • Вы можете сначала объявитьбазовый типпеременная какrefФормальные параметры проходят через
  • или непосредственно вrefвходящий
  setup() {
    // 方式一
    let number1 = ref(10)
    let num = 0
    // 方式二
    let number2 = ref(num)
    return {}
  },

прийти проверить этоnumber1что это

image-20210811183344632

То, что можно увидеть,number1ЯвляетсяRefобъект, мы устанавливаем10Это значение находится в этом объектеvalueатрибут

То есть, когда мы модифицируем, мы должны модифицироватьnumber1.value

Даваяvalueатрибут добавленgetter/setterукрасть данные

Но когда вы используете его в шаблоне, вам не нужно писатьnumber1.valueнаписать напрямуюnumber1Просто

Он автоматически добавляется при компиляции шаблона.value

<template>
  {{ number1 }}
  <button @click="updateNum">+</button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'Son',
  setup() {
    let number1 = ref(10)

    // 修改 number1
    function updateNum() {
      number1.value++
    }
    return {
      number1,
      updateNum,
    }
  },
})
</script>

35

Это не проблема использовать

просто подчеркнулrefПолучать данные базовых типов, может ли он принимать сложные типы,objectтипа и т.д., конечно

даватьrefПередача в сложном типе, по сути, это вызовreactiveдостигать

reactiveбудет упомянуто ниже

refполучить элемент

такой жеrefВы также можете использовать элемент get

каждыйVue2.XКак его получить, сначала определите его на этикетке:ref='XXX'потомthis.$refs.XXXполучить

существуетVue3Это немного отличается, чтобы получить элементы на

1. Сначала на элементе шаблонаref='XXX'здесь не нужноv-bind

<template>
  <div id="haha" ref="haha"></div>
</template>

2. Вsetupсередина

должен датьrefУкажите типHTMLElement

setup() {
  let haha = ref<HTMLElement|null>(null)
  console.log(haha)
    
  return {
    haha,
  }
},

Если вам нужно использовать в компонентеhaha, Это должно бытьhaha returnвыйти и слитьсяdata

Посмотрим что напечатают

image-20210811230220185

То, что можно увидеть,hahaЯвляетсяRefобъект,valueЗначение — это элемент, который мы хотим получить

Тогда мы можемhahaэтоDOMЭлемент для работы, такой как этот

haha.style.fontSize = '20px'

reactive

reactiveРеактивный, который принимает простой объект и возвращает этот простой объект代理对象

Верно, нижний слой его использоватьProxyпрокси

Просто напишите адаптивный пример Vue3, чтобы обсудитьProxy

new Proxy(target, handler)

  • target: нужно использоватьProxyОбернутый целевой объект (может быть объект любого типа, включая собственные массивы, функции или даже другой прокси)
  • handler: объект, который обычно имеет функции в качестве атрибутов, и функции в каждом атрибуте определяют прокси при выполнении различных операций.p 
// 模拟 Vue data
let data = {
    msg: '',
    age: '',
}
// 模拟 Vue 的一个实例
// Proxy 第一个
let vm = new Proxy(data, {
    // get() 获取值
    // target 表示需要代理的对象这里指的就是 data
    // key 就是对象的 键
    get(target, key) {
        return target[key]
    },
    // 设置值
    // newValue 是设置的值
    set(target, key, newValue) {
        // 也先判断下是否和之前的值一样 节省性能
        if (target[key] === newValue) return
        // 进行设置值
        target[key] = newValue
        document.querySelector('#app').textContent = target[key]
    },
})

reactiveОсновное использование

Импортировать, конечно, при написании,vscodeавтоматически импортирует для вас

import { defineComponent, reactive } from 'vue'

Простой в использовании

setup() {
    let obj = reactive({
        name: '小浪',
        age: 21,
    })
    return {
        obj,
    }
}

увидеть возвращениеProxyобъект

image-20210811191209064

данные находятся вtargetсередина,

В шаблоне используйте прямой{{obj.name}}Просто

Изменить непосредственно изменитьobj[name] = ‘xxx’

При работе с прокси-объектом соответственно изменятся и данные в obj, в то же время, если вы хотите повторно обновить и отрисовать интерфейс при работе с данными, он также является рабочим прокси-объектом.

Отзывчивые данные глубокие (рекурсивный глубокий отклик)

Также реагирует на несколько уровней вложенных данных

setup() {
    let obj = reactive({
        name: '小浪',
        age: 21,
        phone: {
            p_name: '小米',
            p_apps: {
                app_name: '小米运动',
            },
        },
    })
    function upadateName() {
        obj.phone.p_apps.app_name = '掘金'
    }
    console.log(obj)

    return {
        obj,
        upadateName,
    }
},

36

shallowReactive

Это простой реактив, только объекты на первом слое изменены на реактивные, поэтому я не буду здесь говорить больше.

использоватьrefвходящий объект

setup() {
    let obj = ref({
        name: '小浪',
        age: 21,
    })
    console.log(obj)

    return {
        obj,
    }
}

image-20210811191739873

в действительностиrefиспользоватьreactiveработать

toRefs

Этот метод можетreactiveОтзывчивый объект, преобразованный в обычный объект, каждое свойство нормального объектаRefобъект, что гарантируетreactiveКаждое свойство . по-прежнему является адаптивным, и мы также можем декомпозировать каждое свойство для использования, чтобы не было необходимости использовать его в компоненте.объект [свойство], объем кода уменьшен, yyds

setup() {
  const user = reactive({
    name: '小浪',
    age: 21,
  })

  let userObj = toRefs(user)
  console.log(userObj)

  return {}
}

image-20210811223510320

может видетьnameиageсталRefобъект

мы можем разобратьnameиageИспользовать отдельно

setup() {
  const user = reactive({
    name: '小浪',
    age: 21,
  })

  let userObj = toRefs(user)

  return {
    ...userObj,
  }
}

toRef

есть еще одинtoRefМетод, его роль иtoRefsПочти, но он может конвертировать только реактивные объекты/обычные объектыопределенныйсобственность становитсяRefобъект

Может использоваться для исходных реактивных объектов наpropertyсекс создаетref. Тогда вы можете поставитьrefпройти, тем самым сохранив свой источникpropertyотзывчивое соединение.

export default {
  setup(props) {
    useSomeFeature(toRef(props, 'foo'))
  }
}

function useSomeFeature(foo: Ref) {
  // ...
}

Копирует новое значение данных и работает отдельно, и не влияет друг на друга при обновлении

когда ты хочешьpropизrefПри передаче в составную функциюtoRefОчень полезно

Как видно из официальной документации, используется для передачи данных перед компонентом изpropsвыиграть'foo'атрибуты составных функций, составные функцииuseSomeFeature, полученный параметрfooзаRefтип, достаточно, чтобы использоватьtoRefдля преобразования

Решение

Несколько способов определить, какой вид реактивного создания

1.isRef: проверить, является ли значение объектом ссылки

let ref1 = ref(1)
console.log(isRef(ref1))  // true

2.isReactive: Проверить, создан ли объектreactiveСоздал реактивный прокси

let ref2 = reactive({name: '小浪'})
console.log(isReactive(ref2))  // true

3.isReadonly: Проверить, создан ли объектreadonlyСоздан прокси только для чтения

let ref3 = readonly({name: '小浪'})
console.log(isReadonly(ref3))  // true

4.isProxy: Проверить, создан ли объектreactiveилиreadonlyПрокси, созданный по методу

let ref2 = reactive({name: '小浪'})
console.log(isProxy(ref2))  // true
let ref3 = readonly({name: '小浪'})
console.log(isProxy(ref3))  // true

customRef

так много упоминалось вышеRefВсе это встроено в Vue для нас.

мы можем пройтиcustomRefреализовать наши собственныеRef

Создайте пользовательскую ссылку с явным контролем над ее отслеживанием зависимостей и инициированием обновлений. Требуется фабричная функция, которая получаетtrackиtriggerфункция в качестве параметра и должна возвращатьgetиsetОбъект.

В официальном документе приведен пример антишейка, напишем и его

<template>
  <h2>App</h2>
  <input v-model="keyword"/>
  <p>{{keyword}}</p>
</template>

<script lang="ts">
import {
  customRef
} from 'vue'

// 不确定类型所以这里使用泛型
function useDebouncedRef<T>(value: T, delay = 200) {
  // 定时器
  let timeout: number
  return customRef((track, trigger) => {
    return {
      get() {
        // 告诉Vue追踪数据
        track()
        return value
      },
      set(newValue: T) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          // 告诉Vue去触发界面更新
          trigger()
        }, delay)
      }
    }
  })
}

export default {
  setup () {
    const keyword = useDebouncedRef('')
    return {
      keyword
    }
  },
}
</script>

shallowRefиshallowReactive

Неглубокая отзывчивость, как правило, мало используется, мы используемrefиreactiveболее

shallowReactive

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

Это проще понять, я не буду приводить здесь пример.

shallowRef

мы сказали раньшеrefВы также можете передать объект, но на самом деле вызватьreactiveвозвращениеProxyПрокси-объект, если во внутреннем слое есть объекты, все равно используйтеreactiveобрабатывать

ref({ name: '小明' })
// 实际上是调用 reactive 去完成的，把 ref的 value 当作 key ,value的值，当作 key 的值 给 reactive
reactive({ value: { name: '小明' } })

такой жеshallowRefобрабатывать тип объекта, передатьshallowReactiveзаканчивать

shallowRef({ name: '小明' })
// 实际上是调用 reactive 去完成的，把 ref的 value 当作 key ,value的值，当作 key 的值 给 reactive
shallowReactive({ value: { name: '小明' } })

Таким образом, мы поймем, зачем иметь дело только сvalueотзывчивый, без возраженийreactiveОбработка данных, которые будут заменены

【注意】:shallowRefСоздаватьref, будет отслеживать егоvalueизменить операцию, но это не влияет на измененнуюvalueСделать реактивное преобразование прокси

setup() {
  let info1 = ref({
    name: '小浪',
    notebook: {
      name: '小米笔记本',
    },
  })
  let info2 = shallowRef({
    name: '小明',
    notebook: {
      name: '小米笔记本',
    },
  })

  console.log(info1, info2)
  return {
    info1,
    info2,
  }
},

Давайте напечатаем следующие два объекта

image-20210812113721281

То, что можно увидеть,Refизvalueзначение используетсяreactiveвозвращениеProxyобъект,

shallowRefизvalueэто обычный объект

readonlyиshallowReadonly

readonlyтолько глубокое чтение

Установите обычные объекты или реагирующие объекты как доступные только для чтения и не могут быть изменены. Вы можете увидеть глубину, посмотрев на имя выше. Все знают концепцию глубины. Рекурсивно установите каждый атрибут внутреннего слоя только для чтения и продолжите модификацию операция сообщит об ошибке, что повышает безопасность

Основное использование:

Импортируйте то, что вы используете

import { defineComponent, readonly } from 'vue'

Конечно же, он выдал ошибку перед компиляциейError: 无法分配到 "name" ，因为它是只读属性

И внутренний, и внешний слои доступны только для чтения и глубоко обнаруживаются.

image-20210812121429275

shallowReadonlyмелкий только для чтения

Если он неглубокий, то только для самого внешнего слоя и не заботится о внутреннем слое.

Вы можете увидеть пример ниже, только внешний слойnameСообщить об ошибке, ошибки при изменении внутреннего слоя нет

image-20210812121747662

toRawиmarkRaw

Эти два используются меньше

Я просто пройдусь по этому здесь

toRaw: преобразовать реактивный объект в обычный объект.

Простой в использовании:

setup() {
  let info1 = reactive({
    name: '小浪',
    notebook: {
      name: '小米笔记本',
    },
  })
  const rawInfo = toRaw(info1) // 返回普通对象
  console.log(info1)
  console.log(rawInfo)

  return {}
},

image-20210812123328497

Два распечатаны, один реактивный объект, черезtoRawПосле превращения в обычный объект

markRaw: пометить объект, чтобы он никогда не превратился в реактивный объект, возвращаемое значение само

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

Простой в использовании:

Здесь используются два одинаковых объекта, один дляmarkRawобработка, никто не продолжаетmarkRawиметь дело с

затем используйте тот жеreactiveреагировать

setup() {
  let obj = {
    name: '小浪',
    notebook: {
      name: '小米笔记本',
    },
  }
  // 进行标记
  let markRawObj = markRaw(obj)
  // 尝试转为响应式
  let reactObj = reactive(markRawObj)

  let obj2 = {
    name: '小浪',
    notebook: {
      name: '小米笔记本',
    },
  }
  // 转为响应式
  let reactObj2 = reactive(obj2)

  console.log(reactObj)
  console.log(reactObj2)

  return {}
}

Вы можете посмотреть распечатанные, отмеченныеobjне превратился вProxyреактивный прокси-объект

image-20210812124720404

computedвычисляемое свойство

существуетVue3используется вcomputedиVue2.Xчто-то другое, здесьcomputedэто метод

Сначала вам нужно импортироватьcomputedметод

import { defineComponent, computed } from 'vue'

Параметр является обратным вызовом, по умолчаниюget

<template>
  <div class="box">
    <input type="text" v-model="name" />
    <br />
    <input type="text" v-model="age" />
    <br />
    <input type="text" v-model="getInfo" />
  </div>
</template>

setup() {
    let name = ref('小浪')
    let age = ref(21)
	
    //计算属性
    let getInfo = computed(() => {
        return `我的名字：${name.value},今年${age.value}，请多多指教`
    })
    return {
        name,
        age,
        getInfo,
    }
}

37

здесь не реализованоsetметод, поэтому изменение следующего бесполезно

параметр являетсяобъектПишите здесьget set

Шаблон тот же, что и выше

setup() {
    let name = ref('小浪')
    let age = ref(21)

    let getInfo = computed({
        // get 方法
        get() {
            return `${name.value},${age.value}`
        },
        // set 方法
        set(val: string) {
            let arr = val.split(',')
            name.value = arr[0]
            age.value = parseInt(arr[1])
        },
    })
    return {
        name,
        age,
        getInfo,
    }

38

watchслушатель

Аналогично использованию Watch в Vue2.X.

вводить

watch(data,handler,object)

  1. data: может быть возвращаемым значениемgetterфункция илиref
  2. handler:Перезвони
  3. object: необязательный элемент конфигурации{ immediate: true }

вводить

import { defineComponent, watch } from 'vue'

dataдляref

Аргументы функции обратного вызова (новое значение, старое значение)

setup() {
    let name = ref('小浪')
    let age = ref(21)

    let watchName = ref('')
    watch(name, (newName, oldName) => {
        watchName.value = `我是新姓名${newName}
		我是老姓名${oldName}`
    })
    return {
        name,
        age,
        watchName,
    }
},

image-20210811204502523

Видно, что третья колонка страницы не отображается, т.к.nameЗначение не изменилось, поэтому менять его не нужно,watchТретий параметр — это объект конфигурации, которому мы можем задать выполнение сразу{ immediate: true }

будет выполнен один раз, конечно на этот разoldNameзаundefined

watch(
  name,
  (newName, oldName) => {
    watchName.value = `我是新姓名${newName}
  我是老姓名${oldName}`
  },
  { immediate: true }
)

39

dataдляgetter

watch(()=>haha,(newName, oldName)=>{
  // 处理...
})

()=> hahaвозвращает значение напрямую, эквивалентноеgetterстенография,hahaмогут быть не отвечающие данные

dataдля несколькихref

Шаблон тот же, что и раньше

<template>
  <div class="box">
    <input type="text" v-model="name" />
    <br />
    <input type="text" v-model="age" />
    <br />
    <input type="text" v-model="getInfo" />
  </div>
</template>

Мы можем поставить несколькоrefв массив

newNameAndAge,oldNameAndAgeсодержит новое и старое [имя, возраст] для массива

setup() {
    let name = ref('小浪')
    let age = ref(21)

    let watchName = ref('')
    watch(
      [name, age],
      (newNameAndAge, oldNameAndAge) => {
        watchName.value = `new: ${newNameAndAge}
        old: ${oldNameAndAge}`
      },
      { immediate: true }
    )
    return {
        name,
        age,
        watchName,
    }
},

40

dataзаreactive

setup() {
  let user = reactive({
    name: '小浪',
    age: 21,
  })

  let watchInfo = ref('')
  watch(
    user,
    (newInfo, oldInfo) => {
      console.log(newInfo === oldInfo)  // true
    }
  )
}

Вот объект, который пойдет не так, сразу после выполнения,

Если добавлено, выполнить немедленно, за исключением первого разаnewInfoза{name: '小浪',age: 21}

oldInfoзаundefined,послевсегда возвращает текущее значение этого объекта

такnewInfo = oldInfo

Для этой проблемы мы должны добавить объект конфигурации{deep: true}Проведите глубокую проверку

Обнаружение глубины также может определять множественное вложение

watch(
  user,
  (newInfo, oldInfo) => {
    console.log(newInfo === oldInfo) // false
  },
  { deep: true }
)

watchEffect

Это также используется для мониторинга изменений данных, оно будет выполнено один раз по умолчанию, поэтому здесь не требуется никакой настройки, и не нужно указыватьdata, какие ответные данные использовать для мониторинга

let user = reactive({
    name: '小浪',
    age: 21,
})
// 只有 user.name 发生改变这个就会执行
watchEffect(() => {
    console.log(user.name)
});

provide / inject

Предоставление и введение просты для понимания

Реализовать связь между межуровневыми компонентами (внуками)

Используется в многоуровневых вложенных компонентах, нет необходимости передавать данные вниз слой за слоем

Может реализовать межуровневую коммуникацию компонентов

в родительском компоненте

setup() {
    const info = reactive({
        title: 'Vue3学习'
        date: '2021/7/23'
    })
    // 提供数据 提供的数据名，数据值
    provide('info', info)
    
    return {
        info
    }
}

Его можно получить, используя инъекцию в компоненте уровня потомка.

setup() {
    //获取对应数据的值
    const color = inject('info')

    return {
        info
    }
}

Teleportкомпонент доставки

Этот компонент особенно интересен, вы можете перенести компонент

<teleport v-if="flag" to=".test">
    <div class="dog">狗子</div>
</teleport>

toэто адрес целиbody , #XXX , .XXXвсе этоcssСелектор

Напишите пример ниже и вы все поймете

шаблон

<template>
  <ul>
    <li class="li_1"></li>
    <li class="li_2"></li>
    <li class="li_3"></li>
  </ul>
  <teleport :to="target">
    <img src="https://img0.baidu.com/it/u=3077713857,1222307962&fm=26&fmt=auto&gp=0.jpg" />
  </teleport>
  <div class="btnGroup">
    <button @click="target = '.li_1'">传送1</button>
    <button @click="target = '.li_2'">传送2</button>
    <button @click="target = '.li_3'">传送3</button>
  </div>
</template>

setup

setup() {
  // target
  let target = ref('.li_1')
  return {
    target,
  }
},

Управление нажатием кнопкиteleportотображать ли,teleportПосле рендеринга он будет запущен вliпод

42

Vue3жизненный цикл

Vue2.XсоответствоватьVue3Объединение API

Vue2.X Vue3
beforeCreate ---> setup()
created ---> setup()
beforeMount ---> onBeforeMount
mounted ---> onMounted
beforeUpdate ---> onBeforeUpdate
updated ---> onUpdated
beforeDestroy ---> onBeforeUnmount
destroyed ---> onUnmounted
activated ---> onActivated
deactivated ---> onDeactivated
errorCaptured ---> onErrorCaptured
onRenderTriggered
onRenderTracked

Как можно видеть

beforeCreateиcreatedЕго все еще можно нормально использовать в Vu3, в Vue3 мы можем использовать лучше и быстрее.setupзаменять

onНачало жизненного цикла должно пройтиimportимпорт, вsetupиспользуется в функции

Vue3коэффициент жизненного циклаVue2.Xбыстрый жизненный цикл

Например:onBeforeMountСравниватьbeforeMountбыстрый другой такой же

Есть также еще два крючка:

  • onRenderTriggeredВызывается при отслеживании повторного рендеринга виртуальной модели DOM.
  • onRenderTrackedВызывается, когда запускается повторный рендеринг виртуального DOM.

ГлобальныйAPI перечислить

Vue2.XсерединаVueГлобальный API выше, например, пользовательские директивыVue.directive, глобальная компонентаVue.componentИзменения были внесены в Vue3 и больше не доступныVue, но предоставитьapp

Конкретные изменения можно увидеть ниже

Vue2.X Vue3
Vue.config app.config
Vue.config.productionTip Удалить
Vue.config.ignoredElements app.config.isCustomElement
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use
Vue.prototype app.config.globalProperties
new Vue().$mount('#app') createApp(App).mount('#app')

Эпилог

На данный момент мы в основном знаемVue3некоторые особенности

  • Новый инструмент для строительных лесовvite
  • существуетVue3все еще поддерживаетсяVue2большинство функций в
  • VueкомбинацияAPiвместоVue2серединаoption API, та же логика централизована, а переиспользование сильнее
  • Vue3использоватьTSНапишите лучше поддержку ТС
  • Vue3использоватьProxyвместоVue2серединаObject.defineProperty()Внедряйте принципы гибкости
  • Введены новые компоненты:Fragment Teleport Suspense

здесь не упоминаетсяVue3переписанныйвиртуальный DOM, что повышает производительность

Я надеюсь, что эта заметка поможет вам.Если я не понимаю, что я написал, я должен прочитать подробности.官方文档yyds, школа недавно началась, и в школе много дел...

(о゜▽゜)о☆

Использованная литература:

Документация официального сайта Vue3

Информация о станции B

Категории