preface

For Vue3, in my first Vue3 article 10 minutes to take you to get started with Vue3, there are detailed sharing of how to get started quickly and practice development, this article only makes some appropriate supplements, check the omissions and fill the gaps

Engineering builds and engineering structures are also shared in the previous chapter, and those interested can portal to create projects

To understandSetup function structure

Setup is a new option in VUe3 and an entry function to the Composition Api, structured like this

<template>
  <h2>setup</h2>
</template>

<script>
export default {
  setup () {
    return{}}}</script> 
Copy the code

supplementSetup parameter [props, context]

In the 10 minutes to Get you started with VuE3 I used the form of annotated code, which can also be written deconstructed

Code sample

<script>
export default {
              // setup (props, context) {
                // Attribute (non-responsive object, equivalent to $attrs)
                // console.log(context.attrs)

                // slots (non-responsive object, equivalent to $slots)
                // console.log(context.slots)

                // Trigger event (method, equivalent to $emit)
                // console.log(context.emit)

                // Expose public property (function)
                // console.log(context.expose)

                // return {}
              // }
      
    // I'm not going to do that
    setup (props, { attrs, slots, emit, expose }) {
        // Attribute (non-responsive object, equivalent to $attrs)
         console.log(attrs)

        // slots (non-responsive object, equivalent to $slots)
         console.log(slots)

        // Trigger event (method, equivalent to $emit)
         console.log(emit)

        // Expose public property (function)
         console.log(expose)

         return {}
    }
}
</script>

Copy the code

supplementToRef, toRefs ordinary variable variable response formula

  • ToRef is used to change the value inside a variable or reference type of a common type torefresponsive
  • ToRefs, as the name implies, turns a reference type of data into a response
<template> <! --<h2 @click="refCount++">{{refCount}}</h2>
  <h3 @click="reactiveObjFunc">{{`${name} - ${demo}`}}</h3>
  <h3>{{computedValue}}</h3> -->
  <h2>{{reactiveObj.name}} - {{reactiveObj.demo}}</h2>
  <h2>{{toRefName}} - {{toRefDemo}}</h2>
  <h2>{{`${name} - ${demo}`}}</h2>
</template>

<script>
import {
  toRefs, reactive, toRef
} from "vue"
export default {
  setup () {
    let reactiveObj = reactive({ name: "Hisen".demo: "Vue3" })

    let toRefName = toRef(reactiveObj, "name")  / / reactiveObj. Not the name
    let toRefDemo = toRef(reactiveObj, "demo")  / / same as above
    console.log("toRef-toRefName", toRefName)
    console.log("toRef-toRefDemo", toRefDemo)

    let toRefsObj = toRefs(reactiveObj)
    console.log("toRefs", toRefsObj)

    return{... toRefs(reactiveObj), reactiveObj, toRefName, toRefDemo, ... toRefs(toRefsObj) } } }</script> 

Copy the code

In effect, toRef changes a variable to a ref response type, whereas toRefs changes an object directly

supplementToRefs is cleverly structured

In addition, in the setup function, accept the props argument, because the props is responsive, and therefore cannot be deconstructed using ES6. This will eliminate the responsiveness of a prop. If you need to deconstruct a prop, you can use the toRefs function in the setup function for the deconstruction

Such as:

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)
  console.log(title.value)
}
Copy the code

supplementLifecycle hooks vue2 + vue3

To take a look at the slight changes to the lifecycle hook functions, there is no need to create before and after the hook. In the 10 minutes to Get you started with Vue3, I simply tried out a few hook functions

Vue3 can also be used in the same way as VUe2’s hook functions

<template>
  <h2 @click="refCount++">{{refCount}}</h2>
</template>

<script>
// If you want to import something, you can do it again
import {
  ref,onBeforeMount,onMounted,
  onBeforeUpdate, onUpdated
} from "vue"
export default {
  setup () {
    console.log("setup")
    onBeforeMount(() = > console.log("Pre-mount"))
    onMounted(() = > console.log("After mount"))
    onBeforeUpdate(() = > console.log("Before Update"))
    onUpdated(() = > console.log("After update"))
    
    // Don't worry about it here, in order to practice the before and after lifecycle
    let refCount = ref(0)
    return {
       refCount
    }

  }
}
</script> 

Copy the code

supplement[watch]

In the 10 minutes to get you started with VUE3, I may write more troublesome and tedious, although explained the specific way of use and differences, but here, I think it is necessary to simple the next small example

<template>
  <h2 @click="refCount++">{{refCount}}</h2>
  <h3 @click="reactiveObjFunc">{{`${name} - ${demo}`}}</h3>
</template>

<script>
import {
  ref, toRefs, reactive, watch
} from "vue"
export default {
  setup () {

    let refCount = ref(0)
    let reactiveObj = reactive({ name: "Hisen".demo: "Vue3" })

    watch(refCount, (n, o) = > {
      console.log(n, o)
    }, {
      // deep, immediate and flush
    })

    watch(() = > reactiveObj, (n, o) = > {
      console.log(n, o)
    }, {
      deep: true
      // deep, immediate and flush
    })
    
    const reactiveObjFunc = () = > {
      reactiveObj.name = "ack"
    }

    return{ refCount, ... toRefs(reactiveObj), reactiveObjFunc } } }</script> 

Copy the code

The effect

supplement watchEffect

<template>
  <h2 @click="refCount++">{{refCount}}</h2>
</template>

<script>
import {
  ref, watchEffect
} from "vue"
export default {
  setup () {
    let refCount = ref(0)

    watchEffect(() = > {
      let a = refCount.value
      console.log("watchEffect ",a)
    })

    return {
      refCount
    }
  }
}
</script> 
Copy the code

The effect

WatchEffect executes once by default, similar to computed, except that computed is a property that requires a value to be returned, whereas watchEffect fires when it relies on responsive variables during use

supplementCalculate attribute

In vue3, I only briefly mentioned that calculating attributes creates a new variable that can be read or written (depending on declared variables). In fact, it is not much different from vue2 in computed use, and you can also return a new value (depending on declared variables).

<template>
  <h2 @click="refCount++">{{refCount}}</h2>
  <h3 @click="reactiveObjFunc">{{`${name} - ${demo}`}}</h3>
  <h3>{{computedValue}}</h3>
</template>

<script>
import {
  ref, toRefs, reactive, watch, computed
} from "vue"
export default {
  setup () {

    let refCount = ref(0)
    let reactiveObj = reactive({ name: "Hisen".demo: "Vue3" })

    watch(refCount, (n, o) = > {
      console.log(n, "*", o, "=", computedValue.value)
    }, {
      // deep, immediate and flush
    })

    watch(() = > reactiveObj, (n, o) = > {
      console.log(n, o)
    }, {
      deep: true
      // deep, immediate and flush
    })

    const reactiveObjFunc = () = > {
      reactiveObj.name = "ack"
    }

    // Calculate attributes
    let computedValue = computed(() = > {
      return refCount.value * 10
    })

    return{ refCount, ... toRefs(reactiveObj), reactiveObjFunc, computedValue } } }</script> 

Copy the code

The effect

The rest of the text is here to get you started with VuE3 in 10 minutes

In fact, this is a systematic column, because I will share other Vue3 new features later, to go through the transition effect……

Small encouragement, great growth, welcome to praise, collection