Detailed explanation of Vue3 functions: Let you quickly get started with Vue3 development

Vue3 is the latest version of the Vue framework. Compared with Vue2, it has great improvements in performance, API, TypeScript support, etc. Therefore, Vue3 has become a hot topic in front-end development. As a front-end developer, if you want to master the development skills of Vue3, then you need to understand and master the functions in it. This article will introduce the common functions of Vue3 so that you can quickly get started with Vue3 development.

1. createApp

createApp() is a new function introduced in Vue3.0. The function of this function is to create a Vue application instance and return that instance. createApp()The function can receive a component, template and configuration object to define a Vue application.

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

2. mount

mount() function is used to mount an application instance to a DOM element. In Vue3, application instances can be bound to an element using the mount() method. When the DOM element is mounted on the page, the application can start rendering.

app.mount('#app');

As you can see, the mount() function receives a CSS selector or a DOM element as a parameter, which defines the element to be bound by the application.

3. props

props function is used to pass data between components. In Vue3, the properties of components become clearer and more explicit. Developers can specify component properties and their types using the props option. The following is an example of using the props option:

export default {
  props: {
    name: String,
    age: Number
  }
}

As you can see, we defined a name## in the props value in the component options # and age attributes. This means that when we use this component, we need to pass the values ​​of name and age through properties.

<my-component name="John" age="25"></my-component>

4. setup

setup() function is a new component API used to define the behavior of the component . In Vue3, the setup() function is similar to the data() function in Vue2, but it provides more flexibility to use the new syntax and Vue3's reactivity system to achieve better performance. The following is a simple example:

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    }
  }
}

As you can see, we use Vue3’s

reactive() function in the setup() function, which can make stateThe object becomes a reactive object. In this way, we can modify the properties in state, and Vue will automatically update the related views. In addition to reactivity, we can also define other functions and variables in the setup() function and return them to the parent component.

5. watch

watch() function is used to monitor changes in component data. It can monitor some specific data and execute corresponding functions when the data changes. watch()The function can receive two parameters. The first parameter is the data we want to monitor, and the second parameter is the function to be executed when the data changes. The following is an example of using the watch() function:

import { watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    watch(() => state.count, (newVal, oldVal) => {
      console.log(`New Value: ${newVal}, Old Value: ${oldVal}`);
    });

    return {
      state
    }
  }
}

Here we use Vue3’s

watch function to monitor changes in state.count . When state.count changes, the callback function passed to the watch() function will be executed and the log information of the old and new values ​​will be output.

6. computed

computed function is the new API for computed properties. In Vue3, we can use the computed function to define computed properties. Computed properties are dependency-based reactive properties that automatically recalculate when the data they depend on changes. The following is an example of using the computed function:

import { computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      height: 180,
      weight: 75
    });

    const bmi = computed(() => state.weight / (state.height / 100) ** 2);
    
    return {
      state,
      bmi
    }
  }
}

Here we use Vue3’s

computed function to define a computed property bmi, and in The returned result is returned to the parent component. In this way, we can move the calculation logic of the calculated property outside the component. When the values ​​of state.height and state.weight change, we do not need to manually recalculate the value of bmi, Vue will automatically complete this task for us. .

7. ref

ref() function is a new API in Vue3, used to create a reactive reference. In Vue3, any value can be wrapped into a reactive value using the ref() function. Here is an example of using the ref() function:

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count
    }
  }
}

Here we wrap the

count variable into a reactive reference, which means that when we modify # When the value of ##count is reached, Vue will automatically update the related view.

toRefs

toRefs()

function is another new API in Vue3, used to create a reactive Reference object. In Vue3, when we use the ref() function to create a reactive reference, we cannot directly obtain its value through destructuring. At this time, we can use Vue3's toRefs() function to convert the responsive reference object into an object so that we can directly obtain its value through destructuring. The following is an example of using the toRefs() function: <pre class='brush:javascript;toolbar:false;'>import { reactive, toRefs } from 'vue'; export default { setup() { const state = reactive({ name: 'John', age: 25 }); return { ...toRefs(state) } } }</pre><p>可以看到，我们使用Vue3的<code>toRefs()函数将响应式对象state转换成了一个响应式引用对象，然后我们使用对象的解构语法来提取state的属性。

总结：

以上就是Vue3.0常用的函数，这些函数对于Vue3开发非常重要。学会这些函数，可以让你更好地了解Vue3的开发方式，更快地掌握Vue3的开发技能。希望本文对你学习Vue3有所帮助。

The above is the detailed content of Detailed explanation of Vue3 functions: Let you quickly get started with Vue3 development. For more information, please follow other related articles on the PHP Chinese website!