Learning Vue3.0 Api

May the comfortable night breeze and starry sky take away all bad mood.

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++; num--">count is: {{ count }}{{num}}</button>
  <p @click="addNum">Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <p v-for="(item,index) in numCopy.stus" :key="index">{{item.key}}{{numCopy}}</p>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'HelloWorld'.props: {
    msg: String
  },
  data () {
    return {
      count: 0}},// The combination API entry function is done before the beforecreate hook and can not use data and methods
  / * * * * /
  setup () {
    //reactive ref Uses proxy in the same way
    /** function ref (obj) { return reactive({ value: Obj})} function reactive (obj) {if (typeof obj === 'object') {if (obj instanceof Array) { Fetch each element in the array // determine if it is an object, Do I need to wrap it as proxy obj. ForEach ((item, If (typeof item === 'object') {obj[index] = reactive(item)}})} else {// if (typeof item === 'object') {obj[index] = reactive(item)}} Proxy for (let key in obj) {let item = obj[key]; if (typeof item === 'object') { obj[key] = reactive(item) } } } } } */

    // Write a shallowRef by hand
    /** function shallowRef(obj){ return shallowReactive({value:obj}); } function shallowReactive(obj){ return newProxy(obj,{ get(obj,key){ return obj[key] }, set(obj,key,value){ obj[key=value]; Console. log(' page update ') return true; // This must}})} */
    // The nature of responsive data in VUe3.0
    Let obj={name:'ll',age:'18'} let state=new proxy(obj,{get(obj,key){ Console. log(obj,key); return obj[key] }, set(obj,key,value){ console.log(obj,key,value) obj[key]=value; Console. log(' update UI) // Need to add return true}}) console.log(state.name) state.name="???" */


    /** readOnly Redefinable read-only data recursive read-only shallowReadonly Layer 1 read-only, non-recursive read-only isReadonly Check whether it is read-only. Callback bool is protected by const assignment and */ is protected by readonly assignment
    /** Composite API can also add lifecycle onMounted onCreated... OnMounted (() = "{... }) * /
    // Both ref and reactive can listen on all data types (recursive listening)
    // Recursive listening is good by default, allowing data changes to be monitored, but also introduces performance overhead;
    // The internal function is synchronous, not asynchronous
    /** * 2. Non-recursive listening on shallowRef/shallowReactive 3. How to trigger the non-recursive listening property update interface? - If shallowRef is used to create data, it can be triggered by triggerRef. Vue monitors. Value changes, not level 1 changes. Application scenarios In general we use the ref and reactive Only if the need to monitor the amount of data is large, we only use shallowRef/shallowReactive * /
    Shallow data only listens for changes in the outermost layer and causes changes in the view layer
    // For shallowRef objects, we can also triggerRef to trigger the ref change listener to implement interface changes
    //---- In shallowReactive, there is no trigger scheme to actively wake up monitoring changes.
    /** * Essentially, shallowRef is special shallowReactive, and ref is special reactive. * /
    let { num, addNum, numCopy } = numTagger();/ / put forward
    let state2 = reactive({// Arguments must be objects
      stu: [{id: '1'.name: 'aa'.age: '23'
        },
        {
          id: '2'.name: 'bb'.age: '34'
        },
        {
          id: '3'.name: 'cc'.age: '45']})},/** * When we modify the data in ref and Reactive, we do not need to update the view. You can use the toRaw method (trace toRaw data) * let objCopy=toRaw (obj) * change the value of objCopy * * * markRaw () never trace! Subsequent tracing is invalid * * * ref (obj. Name) the name in obj becomes responsive, and changes the name to the previous OBj. Name has no impact. * toRef (obj, 'name') will affect the name in obj, but if the response is created by toRef, the change will not trigger a UI update * == "application scenario. To associate reactive data with previous data and update reactive data without updating the UI, use toRef () * == to change multiple properties in the toRefs () obj object. * * * customRef specifies a customRef for asynchronous data, Function myRef(value){return customRef((track,trigger)=>{return {get(){return customRef(track,trigger)=>{ Render interface = call get= send network request = Save data = Update page = call get track(); Return value}, set(newValue){value = newValue; trigger(); // Tell the UI that the data has changed}}})} */
    return { num, addNum, numCopy, state2 };// Return a leak}}function numTagger () {
  let num = ref(0);// The definition does not leak
  let numCopy = reactive({
    stus: [{key: 0
      },
      {
        key: 1
      },
      {
        key: 2
      },
      {
        key: 3}]})function addNum () {// Define methods directly
    console.log(num, numCopy)
  }
  return { num, addNum, numCopy }
}
</script>

Copy the code

It should not be too late to learn

See big video learning Vue3.0 attach a link www.bilibili.com/video/BV14k… ; Come with double speed, sentence key, humorous.

Over 🧐