1. Ref () function

The ref() function creates a responsive data object based on a given value, passing in basic data types such as string, number, Boolean, etc. The return value is an object containing only one value attribute

Ref defines variables that change value to.value, and we don’t have to write.value in template

<div>{{MSG}}</div> < button@click ="changeMsg()"> </button> import {reactive,ref,toRefs} from 'vue' setup() {// define Const MSG = ref(' hello ') // change const changeMsg =()=>{MSG. Value =' MSG changed '} return {MSG, changeMsg}}Copy the code

Reactive () function

Reactive functions pass in reference types, such as arrays and objects, but do not delegate primitive values and return a reactive data object. It is also very easy to use reactive data created by the setup function and call it directly from the template function.

<div>{{state.msg}}</div> < button@click ="changeMsg()"> ToRefs} from 'vue' setup() {// define const state = reactive({MSG: Const changeMsg = () => {state. MSG = 'MSG is changed'} return {state, changeMsg}}Copy the code

3. ToRefs () function

The toRefs() function converts reactive objects created by Reactive () into regular objects, like refs (). ToRefs and Reactive () are used to return data.

<div>{{MSG}}</div> < button@click ="changeMsg()"> ToRefs} from 'vue' setup() {// define const state = reactive({MSG: 'hello', msg2:'hello'}) const changeMsg = () => {state. MSG = 'MSG is changed'} toRefs(state), changeMsg } }Copy the code