Каковы различия между vue3 и vue2 в использовании API?

Vue.js

1. Резюме

Содержание статьи многовато, а стиль не добавить.Все посмотрят.

на прошлой неделе,vue3 one pieceОфициальная версия выпущена (другими словами, когда в Хокаге придет обычай определять номер версии с аниме-именами), называя Ю Да сумасшедшим, нам также пора начать учиться.

я сравнилvue2а такжеvue3, перечислите использование, функцию или некоторые устаревшие здесьapi. для некоторыхvue2студентов быстро понимают и приступают к работеvue3. В этой статье,Перечислен только некоторый контент, который отличается в использовании, а исходный код не задействован.

В дополнение к установке и VUE3 одном из новых подходов, API, я буду следоватьОфициальная документация API vue2список в порядке каталога.

  • Установить
  • vue3 новый контент
  • Конфигурация приложения (исходная глобальная конфигурация и глобальный API)
  • Глобальный API
  • Опции/Данные
  • опционы/ДОМ
  • Опции/хуки жизненного цикла
  • Опции/Ресурсы
  • Опции/Комбинации
  • Опции/Другое
  • свойство экземпляра
  • метод/данные экземпляра
  • метод/событие экземпляра
  • Методы экземпляра/жизненный цикл
  • инструкция
  • специальный атрибут
  • встроенные компоненты

Моя технология ограничена, и некоторые из представленных здесь API могут использоваться нечасто или использоваться не очень часто, поэтому, если есть ошибки или упущения, пожалуйста, прокомментируйте ниже, и я внесу изменения вовремя.

Вот мое личное понимание и запись, сейчасофициальная документация vue3Он был выпущен, вы также можете перейти на официальный сайт, чтобы просмотреть содержимое миграции vue2.

2. Установка

Теперь проекты устанавливаются тремя способами.

  • Представлено сценарием
<script src="https://unpkg.com/vue@next"></script>
  • Леса vue-cli
// vue-cli在4.5.0的版本才开始支持创建vue3项目
npm install -g @vue/cli
vue create hello-vue3
  • строительные леса
npm init vite-app hello-vue3

vite - это новый инструмент Youda с открытым исходным кодом, заимствующий оригинальные слова Youda.

Сервер разработки, основанный на собственном импорте ES браузера. Используйте браузер для анализа импорта, компиляции и возврата по запросу на стороне сервера, полностью пропуская концепцию упаковки, и сервер можно использовать по мере необходимости. При этом он не только поддерживает файлы Vue, но и обрабатывает горячие обновления, причем скорость горячих обновлений не будет замедляться по мере увеличения количества модулей. Для производственных сред тот же код можно упаковать с помощью свертки. Несмотря на то, что пока это относительно грубо, я думаю, что у этого направления есть потенциал, и если оно будет сделано хорошо, оно может полностью решить проблему полдня горячих обновлений, таких как изменение строки кода.

Как правило, введение js использует собственный метод импорта браузера es. В режиме разработки упаковка не требуется, нужно только скомпилировать измененные файлы. Используйте накопительную упаковку в производственной среде.

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

3. vue3 новый контент

1.Composition API

Записывайте данные, методы, вычисляемые функции и функции жизненного цикла в одном месте.

1.1 setup()

setup()как используется в компонентеComposition APIвходная точка. время выполненияbeforeCreateа такжеcreatedВ промежутках вы не можете использовать это для получения других переменных компонента, и это не может быть асинхронным.setupВозвращенные объекты и методы можно использовать в шаблонах.

setup имеет два параметра,props,context.

<script lang="js">
import {toRefs} from 'vue'
export default {
    name: 'demo',
    props:{
      name: String,
    },
    setup(props, context){
      // 这里需要使用toRefs来进行解构
      // 这里的props与vue2基本一致,当然这里的name也可以直接在template中使用
      const { name }=toRefs(props);
      console.log(name.value);
      // 只能获取到这三个属性,也是不能使用ES6的解构
      // 属性，同vue2的$attrs
      console.log(context.attrs);
      // 插槽
      console.log(context.slots);
      // 事件，同vue2的$emit
      console.log(context.emit);
  }
}
</script>

1.2 reactive

vue3Отзывчивый код Vue разделяет код и, как отдельные вызовы библиотеки JS. (Помимо прочего JS-структуры любой операции, может быть введена и использоватьсяvue3этой адаптивной функции).

<template>
  <div>{{ state.text }}</div>
  <button @click="test">测试一下？</button>
</template>
<script>
import { reactive } from 'vue';
export default {
  setup() {
    // 通过reactive声明一个可响应式的对象
    const state = reactive({ text: "我帅吗" });
    // 通过reactive声明一个可响应式的数组
    const state1 = reactive([ text: "我帅吗" ]);
    // 声明一个修改方法
    const test = () => state.text = '你很丑';
    // 返回state和方法
    return { state,test };
  }
};
</script>

это следованиеvue2Большая разница заключается в том, что с помощью описанного выше метода можно добиться реагирования на данные. Тогда объекты здесь можно назначать по желанию, а не появлятьсяvue2Проблема в том, что глубокое неопределенное присвоение значения объекта не может быть реактивным. Поскольку нижний слой Vue теперь используетproxyРеализован мониторинг данных.

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

1.3 ref

Объявление реактивных примитивных типов данных

import { ref } from 'vue';
export default {
  setup(){
    const a = ref(1);
    const b = ref('1');
    const c = ref(true);
    // 声明一个修改方法
    const test = () => {
      // 注意：在setup里面修改ref的值是需要通过.value的，template做了解套，所以不需要。
      // ref 作为 reactive的对象的值时不需要.value
      // ref 作为 reactive的数组的值时需要.value
      a.value = 2;
      b.value = '1';
      c.value = false;
    };
    return { a, b, c, test };
  }
}

Получить элемент DOM

<template>
  <div id="test" ref="testDom"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
export default {
  setup(){
    const testDom = ref(null);
    //使用onMounted钩子,类似在vue2的mounted生命周期中操作元素
    onMounted(() => {
      // 记得要加.value
      console.log(testDom.value);
    })
    return { testDom };
  }
}
</script>

1.4 readonly

Вы можете передать объект или ссылку, вернуть объект только для чтения, глубокий только для чтения

const state = reactive({ name: 0 })
const readOnlyState = readonly(state)
// 可以修改
state.name = '帅';
// 无法修改并警告
readOnlyState.name = '帅';

2 API инструмента реактивного класса

2.1 isProxy, isReactive, isReadonly

isProxy — это прокси, который проверяет, создан ли объект реактивными методами или методами только для чтения. Последние два являются отдельными тестами. Примечание. Пока в обнаруженном объекте есть реактив, isReactive имеет значение true, даже если он был обработан только для чтения.

2.2 toRaw

Преобразование проксируемого или реактивного объекта в обычный объект

const state = {}
const stateReactive = reactive(state)
console.log(toRaw(stateReactive) === state) // true

2.3 markRaw

Отключить этот объект от реактивного

const state = markRaw({ name: '帅' })
console.log(isReactive(reactive(state))) // false

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

const state = markRaw({
  data: { id: 123 },
})
const newState = reactive({
  data: state.data,
})
console.log(isReactive(newState.data)) // true

2.4 shallowReactive, shallowReadonly

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

const state = shallowReactive({ name: '123', test: { id: 1 } })
const test = () => {
  // 深层次数据的变化不会触发响应式
  state.test.id = 2;
};

API инструмента класса 3 ref

3.1 isRef

Проверить, является ли значениеrefобъект

3.2 toRef

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

const state = reactive({
  a: 0
})
// 作为一个reactive对象的属性
const aRef = toRef(state, 'a')
// 在这里修改读取Ref要使用.value
aRef.value++
console.log(state.a) // 1

state.a++
console.log(aRef.value) // 2

3.3 toRefs

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

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })
  return toRefs(state)
}
export default {
  setup() {
    // 可以在不失去响应式的情况下复用
    const { foo, bar } = useFeatureX()
    return {
      foo,
      bar
    }
  }
}

3.4 unref

Синтаксический сахар для получения значения ref

val = isRef(val) ? val.value : val

3.5 customRef

создать обычайref, вручную управлять его чтением и записью. Вот пример дебаунса из документации

<input v-model="text" />

function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        // 读值的时候,触发依赖
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          // 写值的时候，进行防抖，触发依赖
          trigger()
        }, delay)
      }
    }
  })
}

export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}

3.6 shallowRef, triggerRef

Данные smallRef не являются реактивными, но могут быть запущены вручную с помощью triggerRef.

const shallow = shallowRef({
  greet: 'Hello, world'
})
shallow.value.greet = 'Hello, universe'
triggerRef(shallow) //手动触发响应式

4. computed and watch

4.1 computed

  • Передайте функцию получения, которая возвращает объект ref, который по умолчанию нельзя изменить вручную.
  • Объект с функциями get и set для создания объектов ref с возможностью записи.
const count = ref(1)
// 只读的
const plusOne = computed(() => count.value + 1)
// 可更改的
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0

4.2 watchEffect

Немедленно выполняет переданную функцию, реактивно отслеживает ее зависимости и повторно запускает функцию при изменении ее зависимостей.

const count = ref(0)
watchEffect(() => console.log(count.value))
// 打印出 0,初始化的时候就会打印
setTimeout(() => {
  count.value++
  // -> 打印出 1
}, 100)

перестань смотреть

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

const stop = watchEffect(() => {
  /* ... */
})
// 停止监听程序
stop()

побочный эффект

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

Продолжительность

// 初始化运行需要读取dom
onMounted(() => {
  watchEffect(() => {
  })
})
//设置运行时机
watchEffect(
  () => {/* ... */},
  {flush: 'pre'}
)
// pre是默认，组件更新前执行
// post, 组件更新后执行
// sync, 同步运行

4.3 watch

В соответствии с часами vue2

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

Слушайте несколько источников данных

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

Поведение, которым поделились с watchEffect

Прекращение прослушивания, очистка побочных эффектов, время обновления побочных эффектов и отладка прослушивателя аналогичны параметрам watchEffect.

4. Конфигурация приложения (исходная глобальная конфигурация и глобальный API)

Примечание. Глобально настроенный Vue заменяется экземпляром, сгенерированным текущим приложением createApp.

СОЗДАТЬ ПРИЛОЖЕНИЕ (новое)

// vue2挂载dom方法
new Vue({
  render: (h) => h(App)
}).$mount("#app");
// vue3
createApp(App).mount('#app')

Обратите внимание, что ранее использовавшийся глобально настроенный Vue заменяется экземпляром, сгенерированным текущим приложением createApp.

import { createApp } from 'vue'
const app = createApp({})

// 比如注册全局组件
app.component('my-component', {
  /* ... */
})
// 是否允许devtools检查代码
app.config.devtools = true

глобальные свойства (новое)

app.config.globalProperties.foo = 'bar'
app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})
  • Добавьте глобальные свойства, к которым можно получить доступ в любом экземпляре компонента в программе. При наличии конфликта ключей приоритет имеют свойства компонента.
  • Замените свойство Vue.prototype Vue2.x и поместите его в прототип.

размонтировать (новое)

Размонтировать корневой компонент экземпляра приложения в элементе DOM.

const app = createApp(App)
app.mount('#app')
// 5秒之后，卸载APP组件
setTimeout(() => app.unmount('#app'), 5000)

5. Глобальный API (новый)

createApp

Как и в предыдущей глобальной переменной Vue, контекст которой используется всем деревом компонентов, второй параметр передается как значение реквизита.

h

Это предыдущий createElement.

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

render() {
  return Vue.h('h1', {}, 'Some title')
}

определитьКомпонент (компонент)

Создать компонент

import { defineComponent } from 'vue'
const MyComponent = defineComponent({
  data() {
    return { count: 1 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

defineAsyncComponent (асинхронный компонент)

Создайте асинхронный компонент

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
   /*或者*/
  import('./components/AsyncComponent.vue')
   /*或者*/
  new Promise((resolve, reject) => {
  /*可以reject*/
      resolve({
        template: '<div>I am async!</div>'
      })
    })
)

app.component('async-component', AsyncComp)

resolveComponent

только вrenderа такжеsetupиспользуется в , чтобы найти компоненты по имени

app.component('MyComponent', {
  /* ... */
})
const MyComponent = resolveComponent('MyComponent')

resolveDynamicComponent

только вrenderа такжеsetupИспользуется при разборе активного компонента active

resolveDirective

только вrenderа такжеsetupиспользуется в , позволяет разрешать директивы по имени

withDirectives

только вrenderа такжеsetupиспользуется в, позволяя директивам приложенияVNode. возвращаетVNode

const bar = resolveDirective('bar')

return withDirectives(h('div'), [
  [bar, this.y]
])

createRenderer

Принимает два общих параметра:HostNodeа такжеHostElement, соответствующийNodeа такжеElementТипы.

Эта вещь не очень ясна в отношении конкретного варианта использования

6. ОПЦИИ/ДАННЫЕ

испускает (новое)

Проверяйте параметры до того, как $emit запустит событие

const app = Vue.createApp({})

// 对象语法
app.component('reply-form', {
  created() {
    this.$emit('check')
  },
  emits: {
    // 没有验证函数
    click: null,

    // 带有验证函数
    submit: payload => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`Invalid submit event payload!`)
        return false
      }
    }
  }
})

7. Параметры/DOM (без изменений)

8. Крючки опций/жизненного цикла

  • beforeDestroy -> beforeUnmount
  • destroyed -> unmounted
  • рендертрекед (новый)

Сообщает вам, какое действие отслеживает компонент, целевой объект и ключ для этого действия.

renderTracked({ key, target, type }) {
  // 这里的target为更新之前的值,type是get
  console.log({ key, target, type })
}
  • рендертриггеред (новое)

Сообщает вам, какое действие вызвало повторный рендеринг, а также целевой объект и ключ для этого действия. target — это обновленное значение, тип установлен

Эти жизненные циклы также можно использовать в setup() через API.

  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

9. Варианты/Ресурсы

Фильтры

Фильтры все еще используются

10. Варианты/комбинации

родитель (брошенный)

Это свойство обычно не используется при нормальной разработке.

настройка (подробнее см. выше)

11. Опции/Другое

разделители (устарело)

функциональный (устаревший)

Использование нового метода генерации асинхронных компонентов

модель (устаревшая)

изменена v-модель, не требуются фиксированные имена атрибутов и имена событий, требуется ручная обработка

комментарии (устарело)

12. Свойство экземпляра

vm.$attrs (изменено)

Сейчас$attrsМало того, что он получит компонент, который не находится в родительской областиpropsЗначение , вы также можете получить пользовательские события (включая функцию $listeners).

vm.$children (устарело)

vm.$scopedSlots (устарело)

VM. $ ISSERVER (устаревший)

vm.$listeners (устарело)

13. Методы экземпляра/данные

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

vm.$set (устарело)

vm.$delete (устарело)

14. Методы/события экземпляра

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

vm.$on (устарело)

vm.$once (устарело)

vm.$off (устарело)

15. Методы экземпляра/жизненный цикл

vm.$mount (устарело)

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

vm.$destroy (устарело)

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

16. Инструкции

v-связать (изменить)

  • .propУдалить
  • .syncУдалить (теперь требуется ручная рассинхронизация)
  • .camel преобразует имена атрибутов kebab-case в camelCase.

v-модель (модифицированная)

К компоненту можно привязать несколько значений свойств

<template>
  <!--在vue3.0中，v-model后面需要跟一个modelValue，即要双向绑定的属性名-->
  <!-- 在Vue3.0中也可以继续使用`Vue2.0`的写法 -->
  <a-input v-model:value="value" placeholder="Basic usage" />
</template>

настроить компонент

<template>
  <div class="custom-input">
    <input :value="value" @input="_handleChangeValue" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  name: "CustomInput",
  setup(props, { emit }) {
    function _handleChangeValue(e) {
      // vue3.0 是通过emit事件名为 update:modelValue来更新v-model的
      emit("update:value", e.target.value);
    }
    return {
      _handleChangeValue
    };
  }
};
</script>

в-он (модифицированный)

.{keyAlias} — запускает обратный вызов, только если событие запускается с определенной клавиши. Больше не запускается модификаторами кодов клавиш.

v-это (новый)

Подобно связыванию :is в vue2, он позволяет отображать компоненты в некоторых определенных тегах html, таких как table и ul.

<!-- 不正确，不会渲染任何内容 -->
<tr v-is="blog-post-row"></tr>
<!-- 正确 -->
<tr v-is="'blog-post-row'"></tr>

17. Особый атрибут

ключ (модифицированный)

При зацикливании,keyбыть установленным вtemplateначальство.

<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

ссылка (изменено)

v-forиспользуется вrefМассивы больше не будут создаваться автоматически

Решение:

<div v-for="item in list" :ref="setItemRef"></div>

export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      this.itemRefs.push(el)
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs)
  }
}

18. Встроенные компоненты

переход (изменить)

  • Добавлен реквизит:

persisted - boolean Если true, это означает, что это переход, который на самом деле не вставляет/удаляет элемент, а переключает состояние отображения/скрытия. хуки перехода вводятся, но пропускаются визуализатором. Вместо этого пользовательские директивы могут управлять переходами, вызывая встроенные хуки (например, v-show).

enter-class ->enter-from-class

leave-class ->leave-from-class

  • мероприятие

before appear

телепорт (новое)

Вставьте содержимое в целевой элемент

<teleport to="#popup" :disabled="displayVideoInline">
  <h1>999999</h1>
</teleport>

toОбязательный атрибут должен быть допустимым селектором запроса или элементом (если используется в среде браузера). будет помещен в указанный целевой элемент

disabledЭто необязательная функция, которую можно использовать для отключения, что означает, что содержимое его слота никуда не переместится, а будет отображаться так, как если бы не было компонентов телепорта [по умолчанию false]

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

19. Резюме

В основном,vue3максимально совместимыйvue2В то же время вводится новый комбинированный метод программирования API, Этот новый режим чем-то похож на идею реакции, которая решает проблему, состоящую в том, что в предыдущей версии сложно повторно использовать бизнес-код, а для страницы другая функция коды можно лучше различать, и не будет проблем, что различные переменные и методы скучены в прошлом, что сложно поддерживать в более позднем периоде. плюс хорошоtsПоддержка, очень хорошая и сильная.

Некоторые компоненты вокругvue Router4.0, vuex4.0также предоставляетсяvue3служба поддержки. библиотека компонентов,ant design vueа такжеvantуже поддерживаетсяvue3.

Однако, как предлагается в официальной документации, не рекомендуется переносить некоторые важные проекты на vue3, потому что vue3 еще многое нужно улучшить, и он не поддерживает т.е. совместим с ie11.

Ниже приведены некоторые рекомендации по разработке.vue3После того, как вы сделаете конкретный проект, подведите итоги.

20. Спасибо

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

Категории