Features of the setup function

  • Use the Composition API entry
  • Called before beforeCreate
  • There is no this in setup
  • Returns attributes in the object to be used in the template
  • The setup function is a function between the lifecycle beforeCreate and Created hook functions, so data and methods cannot be used in the setup function
  • The setup function is the entry point to the Composition API
  • Variables and methods defined in the setup function must eventually be returned or not used in the template

Setup defines variables and methods ref and reactive

Ref takes an internal value and returns a reactive and mutable REF object. The ref object has a single property.value pointing to an internal value

Reactive is a reactive copy of the returned object

Ref is recommended for simple data types (String, Number, etc.)

Import {ref} from ‘vue’; let count = ref(1); To change or retrieve a value, use count.value

2. For complex data types (Array and Object), reactive is recommended

Let arr = reactive({age: 18}). If you pass in an object, the vUE will package it as a Proxy object and use the methods in it to implement the reactive data

Note: If you do not need to do reactive data, such as data retrieved from interfaces, you can simply declare variables and store them without calling ref or Reactive

The code:

<template> <div class="word"> <div>ref:{{count}}</div> < button@click ="addRefFun"> </button> <div>reactive:{{ <div> <div>reactive :{{state.arr}}</div> < button@click =" reactive "</button> </div> </template> <script> import { reactive, ref, toRef } from "vue"; export default { components: {}, setup() { const count = ref(1); const state = reactive({ reactivelist: 1, arr: [1, 2], }); const addRefFun = () => { count.value++; }; const addReactiveFun = () => { state.reactivelist++; state.arr.push(3, 4, 5); }; let age = toRef(state, "age"); state.age = 1; console.log(state); return { count, state, age, addRefFun, addReactiveFun, }; }}; </script>Copy the code

With all that said, we’ve been doing the same thing, two-way data binding. Vue provides two types of data-responsive listening, which smacks of React Hooks. The ref function passes in a value as an argument and returns a responsive REF object based on that value, which is tracked whenever its value is changed or accessed. Just like in our modified example code, changing the count.value value triggers a re-rendering of the template to display the latest value. In addition to the REF function, Vue3.0 provides another function that can create reactive objects: reactive.

Why provide both apis? Let’s talk about it.

1. It is to adapt to people with different writing styles

Some people like it this way:

const a = 1
const b = 2
Copy the code

Others like it this way:

const field = {
  a : 1,
  b : 1    
}
Copy the code

How to write, see yourself with people. Both styles of code are fine. The key is personal preference.

2. Ref can only listen to simple data, while Reactive can listen to all data

Ref is a simple writing method, but it also has disadvantages. After trying, I found that it can only listen to some simple data such as numbers, strings, booleans and so on. Some complex data or objects can be implemented using Reactive

3. Use them differently

Count. Value = XXX and reactive only needs state.reactiveField= XXX

2. The template reference is reactiveField and does not require state, so the reactive object should be used directly

Reactive requires toRefs to convert a reactive object when it returns

Ref and Reactive:

  1. If we use ref type data in the template, Vue will automatically add.value for us
  2. If the template uses data of type reactive, Vue will not automatically add the.value for us

We can use the isRef/isReactive method to determine whether data isRef or reactive

Setup declaration cycle

Lifecycle hook registration functions imported from ‘vue’. These lifecycle hook registration functions can only be used synchronously during setup() because they rely on internal global state to locate the current component instance (the component instance that is calling setup()). Not calling these functions on the current component will throw an error. That is, you can import life-cycle functions from other files and execute them in Setup

The lifecycle functions inside setUp are referred to in preference to the external lifecycle functions

vue2.0 vue3.0
beforeCreate setup
beforeCreate setup
created setup
BeforeMount (Before mounting) onBeforeMount
Mounted (after mounted) onMounted
BeforeUpdate (Before data update) onBeforeUpdate
Updated (Data updated) onUpdated
BeforeDestroy (Before destroying) onBeforeUnmount
Destroyed (after destruction) onUnmounted 
<script> import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered, } from "vue"; export default { components: {}, data() { return {}; }, Setup () {// Create onBeforeMount(() => {console.log("onBefore ====> vue2.0 ") x beforemount"); }); OnMounted (() => {console.log("onMounted ====> vue2.0x mount"); }); OnBeforeUpdate (() => {console.log("onBeforeUpdate ====> vue2.0x beforeUpdate"); }); OnUpdated (() => {console.log("onUpdated ====> vue2.0x update"); }); OnBeforeUnmount (() => {// Called before unmounting the component instance. At this stage, the instance is still perfectly normal. Console. log("onBeforeUnmount ====> vue2.0x beforeDestroy"); }); OnUnmounted (() => {// After the component instance is unmounted. When this hook is invoked, all directives of the component instance are unbound, all event listeners are removed, and all child component instances are unmounted. Console. log("onUnmounted ====> vue2.0 x destroyed"); }); OnRenderTracked (({key, target, action tracked)); onRenderTracked(({key, target, action tracked)); Type}) => {// called when the trace virtual DOM is rerendered. The hook receives a Debugger event that tells you which action traces the component and the target object and key for that action. // target: rerendered key console.log("onRenderTracked"); // Type :set/get action // key: tracked key // Target: rerendered key console.log("onRenderTracked"); }); OnRenderTriggered (({key, target, Type}) => {// Called when a virtual DOM rerender is triggered, similar to renderTracked, receives a debugger event as an argument, // This event tells you what triggered the rerendering operation and the target object and key console.log("onRenderTriggered"); }); return {}; }}; </script>Copy the code

A link to the