This is the 20th day of my participation in the Genwen Challenge

A, toRefs

ToRefs can wrap attributes of a reactive object as ref objects and put them back into ordinary objects that contain them. For example, a setup function returns reactive data using the extended operator object type. This is because the attributes of this object type are no longer reactive. You can use toRefs to convert every property in an object to reactive.

When reactive does not use extended operators, the data is reactive

<template>
  <div>
      {{state.title}}  {{state.price}} <br>
      <button @click="changeState">Change state</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: ' '.setup() {
      let state = reactive({
          title: 'Lamb kebabs'.price: 5
      })
      let changeState = () = > {
          state.title = 'Pork skewers'
          state.price = 3
          console.log(state,'change state... ');
      }
      return {
          state,
          changeState
      }
}
});
</script>

<style scoped>

</style>
Copy the code

When we use the extension operator to fetch the value directly, we see that the data is no longer reactive

 {{title}}  {{price}} <br>
  <button @click="changeState">Change state</button>In the setupreturn {
  ...state,
  changeState
}
Copy the code

To solve the problem that the data of the extended operator is not reactive, we use the toRefs method

import { defineComponent, reactive , toRefs} from 'vue'; In the setupreturn {
          ...toRefs(state),
          changeState
 }
Copy the code

So that’s reactive

2. Computed attributes

Direct use of

<template>
  <div>
      <p>Price: {{price}}</p>
      <p>
         <button @click="count > 1 ? count-- : ''">-</button>Quantity: {{count}}<button @click="count++">+</button>
      </p>
      <p>Total amount: {{total}}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref,computed } from 'vue';

export default defineComponent({
  name: ' '.setup() {
      let price = ref(10)
      let count = ref(1)
      let total = computed(() = > {
          return price.value * count.value
      })
      return {
          price,
          count,
          total
      }
  }
});
</script>

<style scoped>

</style>
Copy the code

Computed uses the GET and set methods

In the setuplet nickName = ref(' ')
      let setNickName = computed({
          get() {
              return nickName.value
          },
          set(val:string) {
            nickName.value = val
          }
 })
return{setNickName, nickName} template <p><input type="text" v-model="setNickName"> {{nickName}}
</p>
      
Copy the code

The interview asks the priority of V-for and V-if in Vue3

Look at the code below

The template of the < ul ><li v-for="(item, index) in fruitList" :key="index" v-if="item.id > 1">{{item.name}}</li>< / ul > setuplet fruitList = [
          {
              id: 1.name: 'apple'
          },
          {
              id: 2.name: 'banana'
          },
          {
              id: 3.name: 'pear'},]return {
   fruitList
  }
Copy the code

Error: In VUe2, the priority of V-for is greater than that of V-IF, but in VUe3, an error is reported if the priority of V-if is greater than that of V-for

The solution uses computed computing to filter data

 <ul>
          <li v-for="(item, index) in filterFruitList" :key="index">{{item.name}}</li>
      </ul>
  let filterFruitList = computed(() = >{
          return fruitList.filter(v= > v.id > 1)})Copy the code