Getting Started with Vue3 Functions from Zero Basics: Quickly Master the Core Methods of Vue3

With the continuous development of front-end technology, Vue.js has become a very popular front-end framework. In Vue 3, the latest version of Vue.js, new functions and methods were introduced and existing functions and methods were upgraded. In this article, we will introduce some core functions and methods of Vue 3 to help readers quickly get started with the Vue 3 framework.

1. createApp

In Vue 3, we use the createApp function to create a Vue instance. The createApp function takes one parameter, which is an object containing application options. The sample code for using the createApp function to create a Vue instance is as follows:

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
})

app.mount('#app')

In the above code, we use the data object data to declare a message variable, and then use the createApp function to create a Vue instance. Finally, use the mount function to mount the Vue instance to the element with the id app.

2. reactive

In Vue 3, we can use the reactive function to convert JavaScript objects into reactive objects. Reactive objects allow us to easily monitor changes in objects and automatically update the view when any properties of the object change. The sample code for using the reactive function to create a responsive object is as follows:

const obj = { count: 0 }
const reactiveObj = Vue.reactive(obj)

console.log(reactiveObj.count) // 输出0

reactiveObj.count++

console.log(reactiveObj.count) // 输出1

In the above code, we use the reactive function to convert the JavaScript object obj into a responsive object reactiveObj. We can then verify that the reactive object is working properly by outputting the count property of reactiveObj.

3. computed

In Vue 3, we can use the computed function to create computed properties. A computed property is a property that depends on the value of other properties, and its value is calculated based on other values. The sample code for using the computed function to create a computed property is as follows:

const reactiveObj = Vue.reactive({
  count: 0
})

const computedVal = Vue.computed(() => {
  return reactiveObj.count * 2
})

console.log(computedVal.value) // 输出0

reactiveObj.count++

console.log(computedVal.value) // 输出2

In the above code, we define a computed property computedVal whose value is twice that of reactiveObj.count. When the value of reactiveObj.count changes, the value of computedVal is automatically updated.

4. watch

In Vue 3, we can use the watch function to monitor data in the Vue instance. When data changes, we can perform specific actions. The sample code for using the watch function to monitor data in a Vue instance is as follows:

const reactiveObj = Vue.reactive({
  count: 0
})

Vue.watch(() => {
  return reactiveObj.count
}, (newVal, oldVal) => {
  console.log(`count变化了：${oldVal} -> ${newVal}`)
})

reactiveObj.count++ // 输出"count变化了：0 -> 1"

In the above code, we define a watch function to monitor changes in reactiveObj.count. When the value of reactiveObj.count changes, the watch function will execute the corresponding callback function.

5. provide and inject

In Vue 3, we can use the provide and inject functions to implement dependency injection between components. The provide and inject functions allow parent components to pass data to child components without passing it through props and events. The sample code for dependency injection using the provide and inject functions is as follows:

const theme = Vue.reactive({
  color: 'red'
})

const ThemeProvider = {
  provide: {
    theme
  },
  template: `
    <div>
      <slot></slot>
    </div>
  `
}

const ThemeConsumer = {
  inject: ['theme'],
  template: `
    <div :style="{ color: theme.color }">
      <slot></slot>
    </div>
  `
}

const app = Vue.createApp({
  components: {
    ThemeProvider,
    ThemeConsumer
  }
})

app.mount('#app')

In the above code, we define a ThemeProvider component and a ThemeConsumer component. The ThemeProvider component uses the provide function to provide theme data to the sub-component ThemeConsumer. The ThemeConsumer component uses the inject function to obtain the theme data from the parent component ThemeProvider. Finally, register the ThemeProvider and ThemeConsumer components to the Vue instance.

Summary

The above are the five core functions and methods of Vue 3. By learning these core functions and methods, we can have a deeper understanding of the framework structure and functional features of Vue 3. At the same time, we can also better use Vue 3 to build efficient, stable and flexible front-end applications.

The above is the detailed content of Getting Started with Vue3 Functions from Zero Basics: Quickly Master the Core Methods of Vue3. For more information, please follow other related articles on the PHP Chinese website!