Vue 3 responsive Foundation

Responsive foundations

Welcome to subscribe my official account < Life code >, perhaps CSDN special column

Vue 3 Introduction to the actual combat series

Declare responsive state

reactive amount to Vue 2.x Medium Vue.observable() API , To avoid being associated with RxJS Medium observables Confusion, so rename it . The API Returns a responsive object state . The responsive transformation is “ Depth conversion ”—— It affects all of the property.

Vue The basic use case for responsive state in is that we can use it during rendering . Because it depends on tracking , When the responsive state changes, the view automatically updates .

This is it. Vue The nature of responsive systems . When from a component data() When returning an object , It's left to reactive() Make it a responsive object . The template is compiled to be able to use these responses property Of Rendering function

We also follow the previous project , stay src/TemplateM.vue Write the following code ：

Write a counter , By means of vue Derived from reactive,defineComponent Two methods ,

defineComponent Used to define components ,reactive Used to create responsive data .

Last in setup Function returns an object , Among objects add Method ,state Responsive data .

<template>
  <div class="template-m-wrap">
    <button @click="add">{{state.count}}</button>
  </div>
</template>
<script>
import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: 'TemplateM',
  setup() {
    const state = reactive({
      count: 0
    })

    const add = () => {
      state.count++
      console.log("state.count", state.count)
    }

    return {
      state,
      add
    }
  }
})
</script>

Create independent responsive values as refs

Imagine , We have a separate raw value ( for example , A string ), We want it to be responsive . Of course , We can create a string that has the same string property The object of , And pass it on to reactive.Vue It gives us a way to do the same thing ——ref：

ref Will return a mutable responsive object , The object as its internal value —— One Responsive references , This is the source of the name . This object contains only one named value Of property ：

Again, we're in the code above , Add the following code ：

<template>
  <div class="template-m-wrap">
    singleCount - {{singleCount}}
    <button @click="add">{{state.count}}</button>
  </div>
</template>
<script>
import { ref, defineComponent, reactive } from "vue";
export default defineComponent({
  name: 'TemplateM',
  setup() {
    const state = reactive({
      count: 0
    })

    let singleCount = ref(0)

    const add = () => {
      state.count++
      singleCount++
      console.log("state.count", state.count, singleCount)
    }

    return {
      state,
      singleCount,
      add
    }
  }
})
</script>

In fact, we have noticed that , In the template , When ref As a rendering context ( from setup() Object returned in ) Upper property When returned and can be accessed in the template , It will automatically expand to internal values . There is no need to add... To the template .value.

Accessing responsive objects

Ref Unfolding only occurs in the responded form Object When nesting . When from Array Or native collection types such as Map visit ref when , It's not going to unfold ：

We can see in the following code , Will a reactive([ref('Vue 3 Guide')]), And then according to books[0].value Visit ：

<template>
  <div class="template-m-wrap">
    singleCount - {{singleCount}}
    <button @click="add">{{state.count}}</button>
    books {{books[0].value}}
  </div>
</template>
<script>
import { ref, defineComponent, reactive } from "vue";
export default defineComponent({
  name: 'TemplateM',
  setup() {
    const state = reactive({
      count: 0
    })

    let singleCount = ref(0)

    const books = reactive([ref('Vue 3 Guide')])


    const add = () => {
      state.count++
      singleCount.value++
      console.log("state.count", state.count, singleCount)
    }

    return {
      state,
      singleCount,
      books,
      add
    }
  }
})
</script>

const map = reactive(new Map([['count', ref(0)]]))
console.log(map.get('count').value)

Responsive state deconstruction

When we want to use some of the large responsive objects property when , You may want to use ES6 deconstruction To get what we want property：

<template>
  <div class="template-m-wrap">
    singleCount - {{singleCount}}
    <button @click="add">{{state.count}}</button>
    books {{books[0].value}}
    <br>
    {{author}} - {{title}} - from - {{book}}
  </div>
</template>
<script>
import { ref, defineComponent, reactive } from "vue";
export default defineComponent({
  name: 'TemplateM',
  setup() {
    const state = reactive({
      count: 0
    })

    let singleCount = ref(0)

    const books = reactive([ref('Vue 3 Guide')])

    const book = reactive({
      author: 'Vue Team',
      year: '2020',
      title: 'Vue 3 Guide',
      description: 'You are reading this book right now ;)',
      price: 'free'
    })

    let { author, title } = book
    const add = () => {
      state.count++
      singleCount.value++
      console.log("state.count", state.count, singleCount)
    }

    return {
      state,
      singleCount,
      books,
      add,
      author,
      title,
      book
    }
  }
})
</script>

Use readonly Prevent changes to responsive objects

Sometimes we want to track responsive objects (ref or reactive) The change of , But we also want to prevent it from changing somewhere in the application . for example , When we have one who is provide When the response object of , We don't want it to be changed at the time of Injection . So , We can create a read-only Proxy object ：

import { reactive, readonly } from 'vue'

const original = reactive({ count: 0 })

const copy = readonly(original)

//  stay copy Upconversion original  Will trigger listener dependency 

original.count++

//  transformation copy  Will fail and cause a warning 
copy.count++ //  Warning : "Set operation on key 'count' failed: target is readonly."