This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

One, foreword

Can # vue3 setup still be used this way in the previous article? In script setup, you can use the following script: ToRefs is very interesting, today here to share with you, if there is something wrong welcome to point out, big guy do not spray

Second,script setupIn the. toRefs

As you all know, in setup we can define reactive objects through… ToRefs transforms each property in the reactive object into a reactive data

<script>
import {reactive,toRefs} from "vue";
export default {
  name: "test1".setup(){
    const data = reactive({
      name:'inline'.age:18.fun(){
        console.log('I love the Nuggets! ')}})return{
      ...toRefs(data)
    }
  }
}
</script>
Copy the code

Then we can use it directly in the template by… The responsive data after toRefs conversion is as follows:

<div>
  <button>Name: {{name}}</button>
  <button>Age: {{age}}</button>
  <button @click="fun">Am I</button>
</div>
Copy the code

We all know that when using Script Setup, the top-level bindings of a declaration (including declared variables, function declarations, and import imports) can be used directly in the template, no return export is required.

So if you want to use script Setup… ToRefs to turn our responsive objects into responsive data? How do you do that? The answer is: No

The small voice bbOr maybe it’s mine. You’re welcome

As you can see, we define a responsive object here, and then want to pass… ToRefs to turn properties in an object into responsive data

<script setup>
import {reactive,toRefs} from "vue";
  const data = reactive({
    name:'inline'.age:18.fun(){
      console.log('I love the Nuggets.')
    }
  })k
</script>
Copy the code

We found that there was no place in Script Setup to write this, and we couldn’t write a return. If we wrote a return, we would get an error, and we could only access variables and methods through data.xxx

<h5>Name: {{data.name}}</h5>
<h5>Age: {{data.age}}</h5>
<button @click="data.fun">Am I</button>
Copy the code

Is there any way we can solve this problem in disguise? Let’s give it a try

Try a

The first thing that comes to mind is that we can also write normal script tags while writing Script Setup

It is not feasible to write setup in a plain script tag and define a reactive object, then expose it to the component template via a return

// script setup
<script setup>
import {reactive,toRefs} from "vue";
  const data = reactive({
    name:'inline'.age:18.fun(){
      console.log('I love the Nuggets.')
    }
  })
</script>

// Plain script
<script>
import {reactive, toRefs} from "vue";
export default {
  setup(){
    const data = reactive({
      name:'inline'.age:18.fun(){
        console.log('I love the Nuggets.')}})return{
      ...toRefs(data)
    }
  }
}
</script>
Copy the code

use

<h5>Name: {{name}}</h5>
<h5>Age: {{age}}</h5>
<button @click="fun">Am I</button>
Copy the code

It turns out that the page doesn’t get a value, the button doesn’t respond when clicked, and the console doesn’t report any errors

Conclude that when both modes coexist, none of the variables and method templates defined in setup in are accessible

Elimination in this way

try

We also define two script tags, except for the second normal script tag we use the Options Api

<script setup>
import {reactive,toRefs} from "vue";
  const data = reactive({
    name:'inline'.age:18.fun(){
      console.log('I love the Nuggets.')
    }
  })
</script>

<script>
import {reactive, toRefs} from "vue";
export default {
  data(){
    return{
      name:'inline-two'.age:180,}},methods: {fun(){
      console.log('Love everyone ~~~~')}}}</script>
Copy the code

use

<h5>Name: {{name}}</h5>
<h5>Age: {{age}}</h5>
<button @click="fun">Am I</button>
Copy the code

The results of

Yes, but doesn’t seem to make much sense

Try to three

This time we’ll just use Script Setup

First define a reactive object and then deconstruct it through toRefs

<script setup>
import {reactive,toRefs} from "vue";
  const data = reactive({
    name:'inline'.age:18.fun(){
      console.log('I love the Nuggets.')}})const { name,age,fun } = toRefs(data)
</script>
Copy the code

use

<div>
  <h5>Name: {{data.name}}</h5>
  <h5>Age: {{data.age}}</h5>
  <button @click="data.fun">Am I</button>
</div>
<div style="margin-top: 20px">
  <h5>Name 2: {{name}}</h5>
  <h5>Age 2: {{age}}</h5>
  <button @click="fun">I for 2</button>
</div>
Copy the code

The results work, and both methods have access to defined reactive variables and methods, with the disadvantage that each variable definition requires manual deconstruction

conclusion

There seems to be nothing particularly perfect in Script Setup… ToRefs solution, I wonder if there will be related API in future vUE. In real business, the third method should also be sufficient for us.

Finally, thank you for reading ~~~ your likes and reading is the biggest encouragement to me ~~~