Vue3– The Vue Composition API experience

Vue3.0 is currently out in beta and open source on Github called Vue-Next. This article takes the small project todoList developed in Vue2.6 and turns it into vue 3.0, and introduces the differences between 2.x and 3.x.

Vue.js2.6 todoList, vue. js3.0 todoList

Vue3.x fits most of vue2.x’s component configurations. That is, we used to configure components in vue2.x, for example:

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

It is also applicable in Vue3. X, and the corresponding lifecycle methods work fine, but one of the core aspects of Vue3. X is the introduction of the Vue Composition API, which allows most components to be configured using the setup() method. Vue Composition API is also available in Vue2.x. To use Vue Composition API, install @vue/ comcomposition API:

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

Vue.use(VueCompositionApi);
Copy the code

Here’s a look at how the Vue Composition API can be used to transform a 2.x todoList project.

How to create a Vue3.0 project

First, install the latest version of vue CLI, usually vue CLI 4, after successful installation, call:

vue create myapp
Copy the code

Create a project based on vue2.x, then go to the project root directory and execute:

vue add vue-next
Copy the code

The Vue-cli-plugin-Vue-Next plug-in will then be automatically installed, and the MyApp project will become a project framework based on the Vue3.0Beta.

Root instance initialization:

The new Vue() method is used to initialize 2.x:

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

In 3.x Vue is no longer a constructor, initialized with the createApp method:

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

Replace variables in data with ref or reactive:

2. X defines some data for the current component using the component data method:

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

Create reactive objects using ref or reactive in 3.x:

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

Ref to the given value to create a responsive data objects and initial value assignment (int or string), reactive can define complex reactive object directly.

Methods defined in methods can also be written in setup() :

2. X methods to define some of the current component’s internal methods:

.methods: {
  fetchData(){},}...Copy the code

In 3.x, define directly in the setup method and return:

.setup(){
  const fetchData = () = >{
      console.log('fetchData')}return {
      fetchData
  }
}
...
Copy the code

Cannot use EventBus:

Component communication is realized in 2.x using EventBus method:

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

In 3.x, methods such as $on and $off are removed (refer to RFC), and the MITT scheme is recommended to be used instead:

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' })
Copy the code

The way that no longer support the prototype with 3 x set the global method, can through the app. Config. GlobalProperties. Mitt = () = > {}.

Setup () uses props and this:

In 2.x, the component method can obtain the current instance of the component using this, and perform data variable changes, method calls, component communication, etc., but in 3.x, setup() is already called at beforeCreate and created time, and cannot use this as in 2.x. We can, however, obtain the props and instances of the current component by receiving the setup(props, CTX) method:

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

Note that CTX is not exactly the same as 2.x, but selectively exposes properties such as [attrs, Emit,slots].

Watch to listen for changes

2. In x, we can use watch to listen for changes to an object property:

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

3. In x, in setup(), you can use watch to listen:

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

In 3.x, if the watch object is an array object, then if the array.push() method is called to add a piece of data, the watch method does not trigger and must be reassigned to the array:

 let state = reactive({
    list: []
 })
 watch(
    () = > state.list,
    (val, oldVal) = > {
      console.log(val)
    }
  )
  
  state.list.push(1) // Does not trigger watch
  
  state.list = [1] // Will trigger watch
Copy the code

I do not know whether this problem is deliberately added by Vue3. X, to be verified after the official version.

Computed computing attributes:

2. X:

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

3. X:

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

  return {
      storeData
  }
}
...
Copy the code

Of course, you can refer to the documentation for the full Vue Composition API. As of now, there is no official version of Vue3.0, so many uses and implementations may be unknown, but we are looking forward to new ideas about how the new version will code.