Take you to the new API added in Vue3 in 10 minutes

// ① npm i -g @vue/cli
// ② vue create my-project
// ③ npm install @vue/composition-api -S
 
// ④ main,js
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
(VueCompositionApi)

setup(props, ctx) {
    ('setup')
  },
  beforeCreate() {
    ('beforeCreate')
  },
  created() {
    ('created')
  },

<!-- Component value transfer -->
<com-setup p1="Passing value to com-setup"/>

// Receive props data through the first formal parameter of the setup function:setup(props) {
  (props)
},
// Define the parameter name that the current component allows the outside world to pass in props:props: {
    p1: String
}
/*
 {}
 p1: "Passing value to com-setup"
 get p1: ƒ reactiveGetter()
 set p1: ƒ reactiveSetter(newVal)
 __proto__: Object
 */

setup(props, ctx) {
    (ctx)
    (this) // undefined
  },
/*
attrs: Object
emit: ƒ ()
listeners: Object
parent: VueComponent
refs: Object
root: Vue
...
*/

<template>
  <div>
    <!-- exist template Access responsive data -->
    <p>Current count The value is：{{count}}</p>
    <button @click="count += 1">+1</button>
  </div>
</template>
 
<script>
import {reactive} from '@vue/composition-api'
export default {
  setup(props, ctx) {
    // Create a responsive data object, and the state obtained is similar to the responsive object returned by data() in vue    const state = reactive({ count: 0 })
     += 1
    (state)
     // The responsive data object is returned in the setup function for template use    return state
  }
}
</script>

<template>
  <div>
    <h3> document</h3>
    <p>refCount：{{refCount}}</p>
    <button @click="refCount += 1">+1</button>
  </div>
</template>
 
<script>
import { ref } from '@vue/composition-api'
export default {
  setup() {
    // / Create a responsive data object count, with the initial value of 0    const refCount = ref(0)
    // If you want to access the value of the responsive data object created by ref(), you must pass the .value attribute. Only within the setup is the .value attribute.    () // Output 0    // Let the value of refCount +1        ++
    // Print the value of refCount again        () // Output 1    return {
      refCount
    }
  }
}
</script>

setup() {
  const refCount = ref(0)
  const state = reactive({refCount})
  () // Output 0  ++ // You don't need to directly access the original value through .value here  (refCount) // Output 1  return {
    refCount
  }
}

setup() {
  // Create ref and mount it into reactive  const c1 = ref(0);
  const state = reactive({ c1 });
 
  // Create ref again, named c2  const c2 = ref(9);
  // Replace old ref c1 with new ref c2  state.c1 = c2;
  state.c1++;
 
  (state.c1); // Output 10  (); // Output 10  (); // Output 0}

import { ref, reactive, isRef } from "@vue/composition-api";
export default {
  setup() {
    const unwrapped = isRef(foo) ?  : foo
  }
};

<template>
  <div>
    <h3>document</h3>
    <p>{{ count }} - {{ name }}</p>
    <button @click="count += 1">+1</button>
    <button @click="add">+1</button>
  </div>
</template>
 
<script>
import { reactive, toRefs } from "@vue/composition-api";
export default {
  setup() {
    // Responsive data    const state = reactive({ count: 0, name: "zs" });
    // method    const add = () => {
       += 1;
    };
    return {
      // Non-responsive data      // ...state,
      // Responsive data      ...toRefs(state),
      add
    };
  }
};
</script>

<template>
  <div>
    <h3>document</h3>
    <p>refCount: {{refCount}}</p>
    <p>Calculate the value of the attributecomputedCount : {{computedCount}}</p>
    <button @click="refCount++">refCount + 1</button>
        <!-- Click to report an error -->
    <button @click="computedCount++">Calculate the value of the attributecomputedCount + 1</button>
  </div>
</template>
 
<script>
import { computed, ref } from '@vue/composition-api'
export default {
  setup() {
    const refCount = ref(1)
    // Read only    let computedCount = computed(() =>  + 1)
    (computedCount)
    return {
      refCount,
      computedCount
    }
  }
};
</script>

<template>
  <div>
    <h3>document</h3>
    <p>refCount: {{refCount}}</p>
    <p>Calculate the value of the attributecomputedCount : {{computedCount}}</p>
    <button @click="refCount++">refCount + 1</button>
  </div>
</template>
 
<script>
import { computed, ref } from '@vue/composition-api'
export default {
  setup() {
    const refCount = ref(1)
    // Readable or writeable    let computedCount = computed({
      // Value function      get: () =>  + 1,
      // Assignment function      set: val => {
         =  -5
      }
    })
    ()
    // The operation to assign values ​​to the computed attribute will trigger the set function     = 10
    ()
    // After the set function is triggered, the value of count will be updated    ()
    return {
      refCount,
      computedCount
    }
  }
};
</script>

import { watch } from '@vue/composition-api'

<template>
  <div>
    <h3>document</h3>
    <p>refCount: {{refCount}}</p>
  </div>
</template>
 
<script>
import { watch, ref } from '@vue/composition-api'
export default {
  setup() {
    const refCount = ref(100)
    // Define watch, as long as the count value changes, the watch callback will be triggered    // The component executes a watch once when it is created for the first time    watch(() => (), { lazy: false})
    setInterval(() => {
       += 2
    }, 5000)
    return {
      refCount
    }
  }
};
</script>

<template>
  <div>
    <h3>document</h3>
    <p>count: {{count}}</p> // Not responsive data  </div>
</template>
 
<script>
import { watch, ref, reactive } from '@vue/composition-api'
export default {
  setup() {
    const state = reactive({count: 100})
    watch(
      // Listen to count      () => ,
      // If the transformation is performed, the following function is executed      (newVal, oldVala) => {
        (newVal, oldVala)
      },
      { lazy: true }
    )
    setInterval(() => {
       += 2
    }, 5000)
    return state
  }
};
</script>

export default {
  setup() {
    // Define the data source    let count = ref(0);
    // Specify the data source to monitor    watch(count, (count, prevCount) => {
      (count, prevCount)
    })
    setInterval(() => {
       += 2
    }, 2000)
    ()
    return {
      count
    }
  }
};

export default {
  setup() {
    const state = reactive({count: 100, name: 'houfei'})
    watch(
      // Listen to count name      [() => , () => ],
      // If the transformation is performed, the following function is executed      ([newCount, newName], [oldCount, oldName]) => {
        (newCount, oldCount)
        (newName, oldName)
      },
      { lazy: true} // When the watch is created, the code in the callback function is not executed    )
    setTimeout(() => {
       += 2
       = 'qweqweewq'
    }, 3000)
    return state
  }
};

export default {
  setup() {
    // Define the data source    const count = ref(10)
    const name = ref('zs')
    // Specify the data source to monitor    watch(
      [count, name],
      ([newCount, newName], [oldCount, oldName]) => {
        (newCount, oldCount)
        (newName, oldName)
      },
      { lazy: true}
    )
    setInterval(() => {
       += 2
    }, 2000)
    ()
    return {
      count
    }
  }
};

<script>
// Create a monitoring and get the stop functionconst stop = watch(() => {
  /* ... */
})
 
// Call the stop function to clear the corresponding monitoringstop()

<template>
  <div>
    <!-- <h3>document</h3> -->
    <p>count: {{ count }}</p>
    <button @click="stopWatch">Stop listening</button>
  </div>
</template>
 
<script>
import { watch, ref, reactive } from "@vue/composition-api";
export default {
  setup() {
    // Define the data source    const count = ref(10)
    const name = ref('zs')
    // Specify the data source to monitor    const stop = watch(
      [count, name],
      ([newCount, newName], [oldCount, oldName]) => {
        (newCount, oldCount)
        (newName, oldName)
      },
      { lazy: true}
    )
    setInterval(() => {
       += 2
       = 'houyue'
    }, 2000)
    // Stop monitoring    const stopWatch = () => {
      ("Stop monitoring, but the data is still changing")
      stop()
    }
    ()
    return {
      stop,
      count,
      stopWatch
    }
  }
};
 
</script>

<template>
  <div>
    <!-- <h3>document</h3> -->
    <input type="text" v-model="keywords" />
    <p>keywords:--- {{ keywords }}</p>
  </div>
</template>

<script>
import { watch, ref, reactive } from "@vue/composition-api";
 
export default {
  setup() {
    // Define responsive data keywords    const keywords = ref("");
 
    // Asynchronous task: Print keywords entered by users    const asyncPrint = val => {
      // Print after 1 second      return setTimeout(() => {
        (val);
      }, 1000);
    };
 
    // Define watch monitor    watch(
      keywords,
      (keywords, prevKeywords, onCleanup) => {
        // Execute asynchronous task and get the timerId that closes the asynchronous task        const timerId = asyncPrint(keywords);
        // If the watch listening is executed repeatedly, the asynchronous task that was not completed last time will be cleared first        onCleanup(() => clearTimeout(timerId));
      },
      // watch is not executed when it was created      { lazy: true }
    );
 
    // Return the data needed in the template    return {
      keywords
    };
  }
};
</script>

<template>
  <div >
    <h1>Parent component</h1>
    <button @click="color = 'blue'">blue</button>
    <button @click="color = 'red'">red</button>
    <button @click="color = 'yellow'">yellow</button>
    <son></son>
    <son></son>
  </div>
</template>
 
<script>
import { ref, provide } from '@vue/composition-api'
import Son from './components/'
 
export default {
  name: 'app',
  components: {
    'son': Son
  },
  setup() {
    const color = ref('green')
    provide('themecolor', color)
    return {
     color
    }
  }
}
</script>

<template>
  <div>
    <h3 :style="{color: color}">son Components</h3>
    <grandson></grandson>
  </div>
</template>
 
<script>
import { inject } from '@vue/composition-api'
import Grandson from './'
export default {
    components: {
    'grandson': Grandson
  },
  setup() {
    const color = inject('themecolor')
    return {
     color
    }
  }
}
</script>

<template>
  <div>
    <h5 :style="{color: color}">grandson Components</h5>
  </div>
</template>
 
<script>
import { inject } from '@vue/composition-api'
export default {
  setup() {
    const color = inject('themecolor')
    return {
      color
    }
  }
}
</script>

<template>
  <div >
    <h1>Parent component</h1>
    <son></son>
  </div>
</template>
 
<script>
import { provide } from '@vue/composition-api'
import Son from './components/'
 
export default {
  name: 'app',
  components: {
    'son': Son
  },
  setup() {
    provide('themecolor', 'red')
  }
}
</script>

<template>
  <div>
    <h3 :style="{color: color}">son Components</h3>
    <grandson></grandson>
  </div>
</template>
 
<script>
import { inject } from '@vue/composition-api'
import Grandson from './'
export default {
    components: {
    'grandson': Grandson
  },
  setup() {
    const color = inject('themecolor')
    return {
      color
    }
  }
}
</script>

template>
  <div>
    <h5 :style="{color: color}">grandson Components</h5>
  </div>
</template>
 
<script>
import { inject } from '@vue/composition-api'
export default {
  setup() {
    const color = inject('themecolor')
    return {
      color
    }
  }
}
</script>

<template>
  <div>
    <h3 ref="h3Ref">TemplateRefOne</h3>
  </div>
</template>
 
<script>
import { ref, onMounted } from '@vue/composition-api'
 
export default {
  setup() {
    // Create a DOM reference    const h3Ref = ref(null)
 
    // Only after the DOM is loaded for the first time can the reference of the element be obtained    onMounted(() => {
      // Set font color for dom elements      // is a native DOM object       = 'red'
    })
 
    // Return the created reference    return {
      h3Ref
    }
  }
}
</script>

<template>
  <div >
    <h1>Parent component</h1>
    <button @click="showComRef">Display the value of the subcomponent</button>
    <son ref="comRef"></son>
  </div>
</template>
 
<script>
 
import Son from './components/'
 
export default {
  name: 'app',
  components: {
    'son': Son
  },
  setup() {
    const comRef = ref(null) 
    const showComRef = () => {
      (comRef)
      ('The value of str1 is' + .str1)
      .setStr1()
    }
    return {
      comRef,
      showComRef
    }
  }
}
</script>

<template>
  <div>
    <h3 :style="{color: color}">son Components</h3>
    <p>{{str1}}</p>
  </div>
</template>
 
<script>
import { ref } from '@vue/composition-api'
export default {
  setup() {
    const str1 = ref('This is a subcomponent!  !  ')
    const setStr1 = () => {
       = 'Assigned'
    }
    return {
      str1,
      setStr1
    }
  }
}
</script>

<template>
  <div>
    <h3> Components</h3>
    <p>study $nextTick</p>
    <button v-if="isShowInput === false" @click="showInput">Display text box</button>
    <input type="text" v-else ref="ipt">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isShowInput: false
    }
  },
  methods: {
    showInput() {
       = !
      // (this.$refs)
      this.$nextTick(() => {
        this.$()
      })
    }
  }
}
</script>