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