Detailed explanation of the usage of setUp and reactive functions in vue3

1. When to execute setUp

We all know that vue3 can now use methods normally.
But we cannot call methods in methods in setUp.
Why? ? ?
Let's first understand the following two life cycle functions, namely:
beforeCreate means that the data in data has not been initialized yet and cannot be used
Created : data has been initialized and can be used
setUp is between the beforeCreate and Created functions.
Do you know why you cannot call methods in methods in setUp?

2. The data in data and the methods in methods cannot be used in setUp

<script>
export default {
  name: 'App',
  data:function(){
    return {
      mess: "I am data"
    }
  },
  methods:{
    func(){
      console.log("func in methods")
    },
  },
  setup(){
    console.log('this',this);//undefined
    this.func();//Cannot be called},
}
</script>

3. Notes on the setUp function

(1) Because we cannot use data and methods in the setUp function.
So in order to avoid our incorrect use, Vue directly sets this in the setUp function
Modified to undefined

(2) The setUp function can only be synchronous, not asynchronous.

That means you can't do this.
async setup(){

},
This will cause the interface to be blank.

4 Reactivity in Vue3

In Vue2, responsive data is implemented through de fineProperty.
In Vue3, responsive data is implemented through ES6 Proxy

Reactive points to note
The reactive parameter must be an object (json/arr)
If you pass other objects to reactive, by default, the interface will not be automatically updated if you modify the object. If you want to update it, you can reassign it.

5 Reactive string data is not updated

<template>
 <div>
    <div>
      <li>{{str}}</li>
      <button @click="func1">Button</button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    // The essence of reactive is to wrap the incoming data into a proxy object. // Since an object is not passed when it is created, responsiveness will not be achieved.
    let str = reactive(123)
    function func1(){
      console.log(str);//123
      str=666;
    }
    return {str,func1}
  },
}
</script>

We found that when the button was clicked, the view was not updated.
Because we are not passing an object. If you want to update the view.
The ref function should be used

6 reactive array

<template>
 <div>
    <div>
      <li>{{arr}}</li>
      <button @click="func1">Button</button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    let arr=reactive([{name:'张三',age:19},{name:'李四',age:39}])
    function func1(){
      arr[0].name="I am Zhang San's brother"
    }
    return {arr,func1 }
  },
}
</script> 

7. Reactive updates other objects

<template>
 <div>
    <div>
      <li>{{sate.time}}</li>
      <button @click="func1">Button</button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    let sate = reactive({
      time:new Date()
    })
    function func1(){
      //Other objects are passed in, and sate.time is directly updated="2021年-6月-9日";
    }
    return {sate,func1 }
  },
}
</script>

The above is a detailed explanation of the vue3 setUp and reactive functions. For more information about vue3 setUp and reactive functions, please pay attention to other related articles on 123WORDPRESS.COM!