Writing in the front

Good evening, dear friends, I have been writing the most basic function of Vue3 recently. I hope to help those who have just come into contact with Vue3 to refer to it. Reactive functions in the composition API.

Reactive function

Reactive is a function that defines a complex data type as reactive data.

Sample code:

<template> <div> <div> <hr> <div>{{obj. MSG}}</div> < button@click ='handleClick'> </button> </div> </div> </template> <script> import { reactive } from 'vue' export default { name: // let MSG = 'hello' // reactive(const obj = reactive({MSG: 'hello', info: 'hi' }) const handleClick = () => { // msg = 'nihao' // console.log(msg) obj.msg = 'nihao' } return { obj, handleClick } } } </script> <style lang="less"> </style>Copy the code

conclusion

The normal data that setup returns by default is not reactive.

2. If you want the data to be reactive, one way to do this is to wrap the data around reactive methods.

Write in the last

That’s all the content of this issue, hope to help MOE new ~

When the path is long and obstructed, it will come.