This is my third article about getting started
Vue3’s new features have been on my mind for a long time, so take this opportunity to make a quick summary.
Project initialization
Vue3 is clearly different from VUe2 when initializing the project
// 1.npm i -g @vue/cli // 2.vue create my-project // 3.npm install @vue/composition-api -S // 4. Import Vue from 'Vue' import VueCompositionApi from '@vue/composition-api' vue.use (VueCompositionApi)Copy the code
The API part
1. The setup method
Setup is a new way to manipulate component properties in vue3. X. It is a unified API that exposes all properties and methods within a component, executed after beforeCreate and before creation
setup(props, ctx) {
console.log('setup')
},
Copy the code
There are two parameters, props and Content.
Receives props data via the first parameter to the setup function.
The second parameter to the setup function is a context object that contains some useful properties that can be accessed through this in vue 2.x.
setup(props, ctx) { console.log(ctx) console.log(this) // undefined }
Note: This is not accessible in the setup() function.
2.reactive
Reactive takes a normal function and returns a reactive data object.
Vue 3.x provides a reactive() function to create a reactive data object. The basic code example is as follows:
<div> <p>{{index}}</p> <button @click="index += 1">+1</button> </div> </template> <script> import {reactive} from '@vue/composition-api' export default { setup(props, ctx) { const state = reactive({ index: 0}) state.index += 1 // The setup function returns the responsive data object for template to use the return state}} </script>Copy the code
3. Ref () function
The ref() function is used to create a responsive data object based on the given value. The return value of the ref() call is an object containing only a.value attribute.
4.isRef()
IsRef () is used to determine whether a value is an object created by ref(). Application scenario: Expand a value that may be created by ref(), for example:
import { ref, reactive, isRef } from "@vue/composition-api";
export default {
setup() {
const unwrapped = isRef(ctx) ? ctx.value : ctx
}
};
Copy the code
5.toRefs
The toRefs() function transforms a reactive object created by Reactive () into a normal object, but each attribute node on that object is reactive data of type REF ().
6.computed Computes attributes
Read-only computing properties:
<div> <h3>04.computed.vue file </h3> <p>refCount: {{refCount}}</p> <p> computedCount: {{computedCount}}</p> <button @click="refCount++">refCount + 1</button> <! < button@click ="computedCount++"> computedCount+ 1</ button@click ="computedCount++"> </button> </div> </template> <script> import { computed, Ref} from '@vue/ coment-api 'export default {setup() {const refCount = ref(1) // read-only let computedCount = computed(() => refCount.value + 1) console.log(computedCount) return { refCount, computedCount } } }; </script>Copy the code
Readable and writable computed properties:
<div> <h3>04.computed.vue file </h3> <p>refCount: {{refCount}}</p> <p> computedCount: {{computedCount}}</p> <button @click="refCount++">refCount + 1</button> </div> </template> <script> import { computed, Ref} from '@vue/ coment-api 'export default {setup() {const refCount = ref(1) // readable writable let computedCount = Computed ({// Value function get: () => refcount. value + 1, // set: Val => {refcount.value = refcount.value -5}}) console.log(computedCount.value) Value = 10 console.log(computedCount.value) // After the set function is triggered, Console. log(refcount. value) return {refCount, computedCount}}; </script>Copy the code
7. Watch () function
The watch() function is used to monitor changes in certain data items to trigger specific operations that need to be imported on demand before use, for example:
<template> <div> <h3>05.watch.vue file </h3> <p>refCount: {{refCount}}</p> </div> </template> <script> import { watch, Ref} from '@vue/composition-api' export default {setup() {const refCount = ref(100) Watch watch(() => console.log(refcount.value), {lazy: false}) setInterval(() => { refCount.value += 2 }, 5000) return { refCount } } }; </script>Copy the code