1, the setup ()

The most important composition API in Vue3 is the setup method, which is the entry point to the component. All composition apis must be used in setup().

Setup is performed before the component instance is initialized (beforeCreated) and is the entry function for the entire component. Data and methods are not yet mounted, so this does not execute the current component instance in setup and cannot be used to retrieve data and methods from the component.

Variables and methods used in templates must be returned in setup to be used.

Export default {setup(){let name=" zhang "return {name}}Copy the code

Since setup is executed before beforeCreate, this in setup does not point to the current component instance. The value of this is undefined. So how do we communicate with the parent component (previously triggered by this.$emit)? This is where the setup argument comes in.

Setup has two parameters. The first parameter is props, which contains props passed by the parent component to the current component. The second parameter is context, which contains attrs,emit, and slots.

Ref is used to define the basic type of responsive data

Variables defined directly in SETUP are not reactive; if you need to define reactive variables of the underlying type, you need to define them using ref

Import {ref} from "vue" export default {setup(){let name = 'zhang 3 '; SetTimeout (() => {name = 'li si '; console.log(name); // The view is not updated}, 2000); return { name }; }}Copy the code
Import {ref} from "vue" export default {let name = ref(' zhang 3 '); SetTimeout (() => {name. Value = 'name '; console.log(name.value); // Li Si}, 2000); return { name }; }Copy the code

Note that variables defined by ref need to be obtained or set by.value when used in JS, but do not need to add.value when used in template. Vue already handles this for us.

Get the DOM element or component instance from ref

To get a DOM element or component instance in vue2, add ref=”refName” to the dom element or component, and call this.$refs.refName in js. In VUE3, it is used slightly differently.

  1. Add ref=”refName” directly to the DOM element or component
  2. Define ref in setup with the initial value null, and let refName=ref(null). Note that the variable name must be the same as the ref name on the DOM or component.
  3. Get the DOM element or component instance from refname. value in js
  4. Note that the ref variable needs to be used in the setup total return
<template> <div ref="name"> </div> < button@click ="change">add</button> <hr /> </template> <script> import {ref} from  'vue'; export default { setup() { let name = ref(null); const change = () => { console.log(name.value); Name.value. innerText = 'innerText '; }; return { name, change }; }}; </script>Copy the code

Reactive is used to define reference type reactive data

import { reactive } from 'vue'; Export default {setup() {let obj = reactive({name: 'reactive ', age: 18}); SetTimeout (() => {obj. console.log(obj); // Li Si}, 2000); return { obj }; }};Copy the code

You can access the data directly in the template with {{obj.name}}

4. Computed attributes

Create a read-only compute property

import {ref,computed} from "vue"
export default {
    setup(){
        let count=ref(0)
        let newCount=computed(()=>count.value+10)
        return {count,newCount}
    }
}
Copy the code

Create computable properties that can be read and written, pass an object in computed, and create computable properties that can be read and written by setting the GET and set methods.

import { ref, computed } from 'vue'; export default { setup() { let count = ref(1); let newCount = computed({ get: () => count.value + 100, set: val => (count.value = val - 1), }); let change = () => (newCount.value += 100); Set return {count, newCount, change}; }},Copy the code

5

Listen for individual data of type REF

import { ref, computed, watch } from 'vue'; export default { setup() { let count = ref(1); let newCount = computed({ get: () => count.value + 100, set: val => (count.value = val - 1), }); let change = () => (newCount.value += 100); watch(count, (newVal, oldVal) => { console.log(newVal, oldVal); }); return { count, newCount, change }; }};Copy the code

Listen for multiple values of type REF

import { ref, watch } from 'vue'; Export default {setup() {let name = ref(' zhang 3 '); let age = ref(18); SetTimeout (() => {name. Value = 'name '; age.value = 22; }, 2000); watch([name, age], ([newName, newAge], [oldName, oldAge]) => { console.log(newName, newAge); // 22 console.log(oldName, oldAge); // Zhang 3}); return { name, age }; }};Copy the code

Listen for a single value of type Reactive

import { reactive, watch } from 'vue'; Export default {setup() {let obj = reactive({name: 'reactive ', age: 18}); SetTimeout (() => {obj. }, 2000); watch( () => obj.name, (newVal, oldVal) => { console.log(newVal, oldVal); }); return { obj }; }};Copy the code

Listen for multiple values of type Reactive

import { reactive, watch } from 'vue'; Export default {setup() {let obj = reactive({name: 'reactive ', age: 18}); SetTimeout (() => {obj. obj.age = 22; }, 2000); watch( [() => obj.name, () => obj.age], ([newName, newAge], [oldName, oldAge]) => { console.log(newName, newAge); // 22 console.log(oldName, oldAge); // Zhang 3}); return { obj }; }};Copy the code

In VUe2, if you need to add a configuration item for watch, you need to pass in an object to configure immediate and deep. In VUe3, you can also add a configuration item in the third parameter for Watch

import { ref, watch } from 'vue'; Export default {setup() {let name = ref(' zhang 3 '); let age = ref(18); SetTimeout (() => {name. Value = 'name '; age.value = 22; }, 2000); watch( [name, age], ([newName, newAge], [oldName, oldAge]) => { console.log(newName, newAge); console.log(oldName, oldAge); }, { immediate: true, deep: true, } ); return { name, age }; }};Copy the code

6. WatchEffect listening

import { ref, watch, watchEffect } from 'vue'; Export default {setup() {let name = ref(' zhang 3 '); let age = ref(18); SetTimeout (() => {name. Value = 'name '; age.value = 22; }, 2000); watchEffect(() => { console.log(name.value); console.log(age.value); }); return { name, age }; }};Copy the code

Close monitoring

A listener can be created using a variable to receive the return value of the Watch or watchEffect function, and then closed by calling the anonymous stop() function where the listener needs to be stopped

import { ref, watch, watchEffect } from 'vue'; Export default {setup() {let name = ref(' zhang 3 '); let age = ref(18); SetTimeout (() => {name. Value = 'name '; age.value = 22; }, 2000); setTimeout(() => { stop(); // After 4 seconds, no more information will be printed. Value = 'li si 2'; age.value = 222; }, 4000); let stop = watchEffect(() => { console.log(name.value); console.log(age.value); }); return { name, age }; }};Copy the code

Differences between watchEffect and Watch

  1. Watch is lazy by default and only executes when the listening variable changes. WatchEffect is not lazy and executes when the component is initialized and changes.
  2. Watch needs to specify which variables to listen for (ref and REACTIVE variables are slightly different). WatchEffect does not need to be specified. All reactive variables used in the callback are listened for, and when these variables change, the callback is executed.
  3. Watch can get new and old values when changing, while watchEffect can only get new values.