Vue3 — опыт работы с Vue Composition API

Vue.js

Vue3.0 в настоящее время находится вне бета-версии и с открытым исходным кодом на github, который называетсяvue-next, в этой статье небольшой проект todoList, разработанный с помощью Vue2.6, преобразуется в Vue3.0, а также рассказывается о различиях между версиями 2.x и 3.x.

нажмите опытАдрес на гитхабе:TodoList версии Vue.js2.6,TodoList версии Vue.js3.0

Vue3.x адаптируется к большинству конфигураций компонентов Vue2.x, что означает, что у нас были некоторые элементы конфигурации для компонентов в Vue2.x, такие как:

export default {
  name: 'test',
  components: {},
  props: {},
  data () {
    return {}
  },
  created(){},
  mounted () {},
  watch:{},
  methods: {}
}

Его также можно адаптировать в Vue3.x, и соответствующие методы жизненного цикла также могут выполняться нормально, но основным ядром Vue3.x является введениеVue Composition API(составной API), который делает большую часть контента компонента доступным черезsetup()метод настройки, а Vue Composition API также можно использовать в Vue2.x, который необходимо использовать, установив @vue/composition-api:

npm install @vue/composition-api
...
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

Далее в основном представлено сравнение старого и нового кода при использовании Vue Composition API для преобразования проекта todoList, разработанного с помощью 2.x.

Как создать проект Vue3.0

Сначала установите последнюю версию vue cli, обычно vue cli 4. После успешной установки вызовите:

vue create myapp

Создайте проект на основе Vue2.x, затем войдите в корневой каталог проекта и выполните:

vue add vue-next

Тогда он будет установлен автоматическиvue-cli-plugin-vue-nextПосле того, как надстройка будет завершена, проект myapp станет структурой проекта на основе версии Vue3.0Beta.

Инициализация корневого экземпляра:

Пройти в 2.xnew Vue()метод инициализации:

import App from './App.vue'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

В 3.x Vue больше не является конструктором, который инициализируется через метод createApp:

import App from './App.vue'
createApp(App).use(store).mount('#app')

ref или реактивный вместо переменных в данных:

В версии 2.x некоторые данные текущего компонента определяются методом данных компонента:

...
data() {
  return {
    name: 'test',
    list: [],
  }
},
...

Создайте реактивные объекты по ref или реактивным в 3.x:

import {ref,reactive} from 'vue'
...
setup(){
  const name = ref('test')
  const state = reactive({
    list: []
  })
  return {
      name,
      state
  }
}
...

ref создает реактивный объект данных с заданным значением и присваивает начальное значение (int или string).reactive может напрямую определять сложные реактивные объекты.

Методы, определенные в method, также могут быть записаны в setup():

В методах 2.x для определения некоторых внутренних методов текущего компонента:

...
methods: {
  fetchData() {
    
  },
}
...

Определите и верните прямо в методе установки в 3.x:

...
setup(){
  const fetchData = ()=>{
      console.log('fetchData')
  }

  return {
      fetchData
  }
}
...

Невозможно использовать EventBus:

Взаимодействие компонентов реализовано в версии 2.x через метод EventBus:

var EventBus = new Vue()
Vue.prototype.$EventBus = EventBus
...
this.$EventBus.$on()  this.$EventBus.$emit()

Удалено в 3.x$on, $offи другие методы (см.rfc), рекомендуется использоватьmittпрограмма вместо:

import mitt from 'mitt'
const emitter = mitt()
// listen to an event
emitter.on('foo', e => console.log('foo', e) )
// fire an event
emitter.emit('foo', { a: 'b' })

Поскольку 3.x больше не поддерживает способ установки глобального метода прототипа, вы можете передатьapp.config.globalProperties.mitt = () => {}строить планы.

Используйте реквизиты и это в setup():

В 2.x метод компонента может получить через него экземпляр текущего компонента и выполнить модификацию переменной данных, вызов метода, связь компонента и т. д., но в 3.x , setup() используется в beforeCreate и было вызвано созданное время, и то же самое, что и 2.x, нельзя использовать, но его можно получить, получивsetup(props,ctx)метод для получения экземпляра и реквизита текущего компонента:

export default {
  props: {
    name: String,
  },
  setup(props,ctx) {
    console.log(props.name)
    ctx.emit('event')
  },
}

Обратите внимание, что это в ctx и 2.x не совсем то же самое, но выборочно предоставляет некоторые свойства, в основном в том числе[attrs,emit,slots].

смотреть, чтобы слушать изменения объекта

В версии 2.x watch можно использовать для отслеживания того, изменилось ли свойство объекта:

...
data(){
  return {
    name: 'a'  
  }
},
watch: {
  name(val) {
    console.log(val)
  }
}
...

В 3.x в setup() вы можете использовать watch для прослушивания:

...
import {watch} from 'vue'
setup(){
  let state = reactive({
    name: 'a'
  })
  watch(
    () => state.name,
    (val, oldVal) => {
      console.log(val)
    }
  )
  state.name = 'b'
  return {
      state
  }
}
...

В версии 3.x, если часы являются объектом-массивом, то при вызове метода array.push() для добавления фрагмента данных метод часов не сработает, и массив необходимо будет переназначить:

 let state = reactive({
    list: []
 })
 watch(
    () => state.list,
    (val, oldVal) => {
      console.log(val)
    }
  )
  
  state.list.push(1) // 不会触发watch
  
  state.list = [1] // 会触发watch

Я не знаю, намеренно ли эта проблема была добавлена ​​Vue3.x, и она будет проверена после выпуска официальной версии.

вычисленные вычисляемые свойства:

В версии 2.x:

...
computed: {
    storeData () {
      return this.$store.state.storeData
    },
},
...

В 3.x:

...
import {computed} from 'vue'
setup(){
  const storeData = computed(() => store.state.storeData)

  return {
      storeData
  }
}
...

Конечно, для полного API Vue Composition студенты могут обратиться кДокументация. На данный момент Vue3.0 не выпустил официальную версию, поэтому многие способы использования и реализации могут быть неизвестны, но я все еще с нетерпением жду новых идей методов кодирования, представленных в новой версии.

Категории