Первые последователи Vue3

Vue.js
Первые последователи Vue3
Исходный код на гитхабе:vue-next
предисловие

Поскольку vue не совместим с демо в тексте после обновления, позвольте мне еще раз объяснить, что все содержание этой статьи основано на3.0.0-alpha.1Версия написана, друзья, обратите внимание на следующую версию при изучении

在这里插入图片描述

Какие изменения в Vue3 по сравнению с Vue2?
  • Object.defineProperty => Proxy
  • Рефакторинг виртуального DOM
  • OptionApi => Composition API

Как отлаживать (пропустите, чтобы создать проект с помощью vite [2020.6.1])

Сначала загрузите последний код на GitHub.

$ git pull https://github.com/vuejs/vue-next.git
$ cd vue-next && yarn

После завершения загрузки откройте код и откройте исходную карту. 1. tsconfig.json Измените поле sourceMap наtrue

在这里插入图片描述
2, Rollup.config.js. существуетrollup.config.jsВ середине типаoutput.sourcemap = true
在这里插入图片描述
3.yarn dev
在这里插入图片描述
4. Создайте демонстрационный каталог в корневом каталоге для хранения примера кода и создайте файлы html и js в демонстрационном каталоге и импортируйте созданный файл vue.
在这里插入图片描述

Первый Привет Мир! ! !

/demo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            text-align: center;
            font-size: 24px;
            padding: 32px;
        }
    </style>
    <script src="../packages/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script src="./index.js"></script>
</html>

/demo/index.js

const { reactive } = Vue
var App = {
  template: `
    <div class="container">
         {{message}}
    </div>`,
  setup() {
  	const state = reactive({message: "Hello World!!!"})
	return {
		...state
	}
  }
}
Vue.createApp().mount(App, '#app')

Открываем написанный нами html файл в браузере,

在这里插入图片描述
Серверная среда здесь используетserveСоздано библиотекой, если интересно, можете посмотреть на нееserve

в любом случае, давайте посмотрим наши/demo/index.jsфайл, как видите, мы использовалиsetup, reactiveи другие функции, это то, что делает Vue3Composition API, по сравнению с компонентами Vue2, 3 позволяет нам легко создавать отзывчивое веб-приложение на основе Vue3, комбинируя API. Ниже я подробно объясню эти API в демонстрациях одну за другой.

Далее, давайте реализуем демонстрацию двусторонней привязки! ! !

Демонстрация двусторонней привязки

const { reactive } = Vue
let App = {
  template: `
    <div class="container">
        <input v-model="state.value"/>{{state.value}}
    </div>`,
  setup() {
    const state = reactive({ value: '' })
    return { state }
  }
}
Vue.createApp().mount(App, '#app')

在这里插入图片描述
setupДля чего это? ?setup на самом деле является точкой входа компонента, он запускается при создании экземпляра компонента, после определения свойства props, он фактически эквивалентен версии 2.beforeCreateа такжеCreatedэти два жизненных цикла.

setup принимает два параметра, первый параметрprops, другой параметрcontext, так что когда вы используете 2.0, вы привыкли кthisСпособ получения атрибутов ниже, в vue3.0, становится:

setup(props, ctx) {
  console.log(props, ctx)
}

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


let Child = {
  template: `<div>{{title}}</div>`,
  setup(props, context) {
    console.log(props)
  }
}

let App = {
  template: `
    <div class="container">
      <Child title="test props"/>
    </div>`,
  components: { Child }
}
Vue.createApp().mount(App, '#app')

在这里插入图片描述
在这里插入图片描述

Этоreactive? ? ? использовался раньшеdataШерстяная ткань? ? ?В Vue3 мы можем превращать данные в реагирующие объекты посредством реактивной обработки, которые используются для данных рендеринга шаблонов, Конечно, обратная совместимость Vue по-прежнему позволяет нам использовать данные, но поскольку у Vue3 есть новый способ записи, почему бы не попробовать?

Демонстрация счетчика

const { reactive, toRefs } = Vue
let App = {
  template: `
    <div class="container">
        count: {{count}}
        <button @click="handlerCountAdd"> Click ++ </button>
    </div>`,
  setup() {
    const state = reactive({ count: 0 })
    const handlerCountAdd = () => {
      state.count++
    }
    return { ...toRefs(state), handlerCountAdd }
  }
}
Vue.createApp().mount(App, '#app')

在这里插入图片描述
этоtoRefsДа? ? ? ? ? ? ? ? ? ? ?Перед этим я хотел бы сказать, что в соответствии с предложением ref, ref vue3 дает нам возможность создать единый отзывчивый объект, после чего возврат в функцию настройки может быть доступен непосредственно в шаблоне, например:

const App = {
  template: `
      <div class="container">
        {{value}}     
      </div>`,
  setup() {
    const value = ref(1)
    return { value }
  }
}
Vue.createApp().mount(App, '#app')

在这里插入图片描述
Вы можете видеть, что vulue был отображен на странице. упомянутое вышеreactiveЕсли созданный адаптивный объект доступен в шаблоне, вам необходимоstate.xxx, пример:

const App = {
  template: `
      <div class="container">
        {{state.value}}
      </div>`,
  setup() {
    const state = reactive({ value: 'reactive' })
    return { state }
  }
}
Vue.createApp().mount(App, '#app')

Доступ к свойствам таким образом, предоставляемый vue3, немного проблематичен.toRefsИменно для того, чтобы решить эту проблему для нас, toRefs разбивает набор реактивных объектов на один реактивный объект, доступ к которому можно получить непосредственно в шаблоне, и:

const App = {
  template: `
      <div class="container">
        {{value}}
      </div>`,
  setup() {
    const state = reactive({ value: 'reactive' })
    return toRefs(state)
  }
}
Vue.createApp().mount(App, '#app')

демонстрация обратной строки

let App = {
  template: `
    <div class="container">
        value: <input v-model="value"/>
        <br/>
        rvalue: {{rvalue}}
    </div>`,
  setup() {
    const state = reactive({
      value: '',
      rvalue: computed(() =>
        state.value
          .split('')
          .reverse()
          .join('')
      )
    })
    return toRefs(state)
  }
}
Vue.createApp().mount(App, '#app')

在这里插入图片描述
В этой демонстрации мы используемcomputedВычисляемые свойства реализуют функцию обращения строк.Хотя эта функция проста, она очень мощная.Как сказано на официальном сайте Vue: для любой сложной логики вы должны использовать вычисляемые свойства.

данные реагируют

Как мы все знаем, решение, реагирующее на данные, в Vue 3 было заменено Proxy из Object.defineProperty в Vue 2. Выше я упомянул некоторые API, реагирующие на данные, но до сих пор нет упоминания об эффекте и наблюдении. важная часть отзывчивости, часы и вычисления основаны на эффекте, давайте взглянем на код ниже

let App = {
  template: `
    <div class="container">
        count: {{count}}
        <button @click="handlerCountAdd"> Click ++ </button>
    </div>`,
  setup() {
    const state = reactive({ count: 0, value: 1 })
    const handlerCountAdd = () => {
      state.count++
    }
    watch(
      () => state.count,
      val => {
        console.log('watch', state.count)
        console.log('watch', state.value)
      }
    )
    effect(() => {
      console.log('effect', state.count)
      console.log('effect', state.value)
    })
    return { ...toRefs(state), handlerCountAdd }
  }
}
Vue.createApp().mount(App, '#app')

在这里插入图片描述
Код реализован на основе приведенной выше демонстрации счетчика. Вы можете видеть, что когда мы нажимаем кнопку ++, как эффект, так и часы могут отслеживать изменения наших данных, чтобы выполнять соответствующие операции в соответствии с бизнесом. Когда вы видите это, у вас может возникнуть вопрос, то есть, поскольку и эффект, и часы могут отслеживать изменения данных, в чем разница между ними?

Во-первых, эффект будет выполняться при изменении реагирующих данных, а количество исполнений зависит от количества реагирующих данных, например

let App = {
  template: `
    <div class="container">
        <button @click="handlerCountAdd"> Click ++ </button>
    </div>`,
  setup() {
    const r = ref(1)
    const s = ref(1)
    const t = ref(1)
    const handlerCountAdd = () => {
      r.value *= 1
      s.value *= 2
      t.value *= 3
    }
    effect(() => {
      console.log('effect', [r.value, s.value, t.value])
    })
    return { handlerCountAdd }
  }
}
Vue.createApp().mount(App, '#app')

在这里插入图片描述
Как показано на рисунке выше: Мы нажимаем один раз, чтобы обновить три ссылки одновременно, и эффект будет выполнен три раза.

Часы затем щелкните один раз, это только запускает выполнение

let App = {
  template: `
    <div class="container">
        <button @click="handlerCountAdd"> Click ++ </button>
    </div>`,
  setup() {
    const state = reactive({ count: 0, value: 1 })
    const r = ref(1)
    const s = ref(1)
    const t = ref(1)
    const handlerCountAdd = () => {
      r.value *= 1
      s.value *= 2
      t.value *= 3
    }
    watch([r, s, t], val => {
      console.log('watch', val)
    })
    return { handlerCountAdd }
  }
}
Vue.createApp().mount(App, '#app')

在这里插入图片描述
Исходный код vue3 Watch находится вздесьЗаинтересованные партнеры могут изучить

Хорошо, vue3Composition ApiНекоторые из часто используемых функций используются в демонстрации выше.Далее давайте сравним изменения в функциях жизненного цикла 2 и 3.

Vue2 Vue3
beforeCreate установка (альтернативный вариант)
created установка (альтернативный вариант)
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured
Советы: почему бы не запускать yarn dev напрямую, а сначала включить sourceMap?

Хотя Vue официально говорит, что вы можете напрямую запустить run dev для его отладки, но после запуска этой команды это сгенерированный код, а исходный код ts, написанный ею, не может быть отлажен.

在这里插入图片描述
После того, как исходная карта включена, соответствующий файл исходной карты будет сгенерирован во время компиляции, а затем вы можете с радостью использовать точки останова в браузере для отладки исходного кода Vue.

Thank You

Объем очень большой.Спасибо за терпение.Если есть ошибки в тексте прошу поправить меня.

在这里插入图片描述

яColin, вы можете отсканировать QR-код ниже, чтобы добавить меня в WeChat, комментарии и обмены.

благодарныйH5 зверь супер эволюция передний конец куриный зверьИсправьте ошибку в статье

Категории