Composition API will be Vue 3 Core functions of , It has many changes and performance improvements . We can also be in the Vue 2 Passed in npm plug-in unit
@vue/composition-api Use it . I will take you to understand :

*
@vue/composition-api common api use

*
vue3 Code logic extraction and reuse

*
How to use provide+inject replace vuex programme

vue2 use composition-api

Master file main.ts perhaps app.vue add to
import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
Composition API No more incoming data,mounted Isoparametric , Through the introduction of ref,onMounted
And so on , Execution of life cycle function .

Core grammar

reactive: Receives a normal object and returns a responsive proxy for that normal object .

ref: Accept a parameter value and return a responsive and changeable ref object .ref Object has a single property that points to an internal value .value.

computed: Pass in a getter function , Returns a default value that cannot be modified manually ref object .

readonly: Pass in an object ( Responsive or normal ) or ref, Returns a read-only proxy for the original object . A read-only proxy is “ Deep ”, Any nested properties within an object are also read-only .

watchEffect: Execute an incoming function immediately , And track their dependencies responsively , And rerun the function when its dependency changes . The return value can be explicitly called to stop listening .

watch: All equivalent to 2.x this.\$watch ( as well as watch Corresponding options in ).

setup function

Now the first one API namely setup function .setup Function is a new component option . As used within components Composition API
Entry point for . Let's take a look at the simple first demo
<template>   <button @click="increase">count is: {{ count }}</button>
</template> <script>   export default {     setup() {       let count = 0
      const increase = () => count++       return { count, increase }     },
  } </script>
1, Call time

Create component instance , Then initialize props , And then it's called setup function . from vue2 From the perspective of life cycle hook , It will be there beforeCreate After the hook ,
created Previously called .

2, Used in template

If setup Returns an object , The properties of the object are merged into the rendering context of the component template .

3, Render function / JSX Used in

setup You can also return a function , Functions can also use the current setup Responsive data in function scope :
import { h, ref, reactive } from '@vue/composition-api' export default {
  setup() {     const count = ref(0)
    const object = reactive({ foo: 'bar' })
    return () => h('div', [count.value, object.foo])   }, }
4, Two parameters props( be careful props Object is responsive ),context( Context object , From the original 2.x in this Selective exposure of some property.)
const MyComponent = {   setup(props, context) {     let {       attrs,
      emit,       isServer,       listeners,       parent,       refs,
      root,       slots,       ssrContext,     } = context   }, }
ref & reactive

stay App.vue in , Click event bound increase, And then it changed count, But the page didn't change , that is because setup In the object returned by the function count
Not responsive data , So how to create responsive data ? At this point, we need to master the responsive system API, We can use it ref and reactive establish .
<template>   <button @click="increase">     count is: {
{ count }}, state.count is {{ state.count }}   </button> </template> <script>
  import { ref, reactive } from 'vue'   export default {     setup() {
      let count = ref(0) // { value: 0 }
      let state = reactive({ number: 0 })       const increase = () => {
        count.value++         state.count++       }
      return { count, state, increase }     },   } </script>
Accept a parameter value and return a responsive and changeable ref object .ref Object has a single property that points to an internal value .value.

When ref Returns as a property of the rendering context ( That is, in setup() In the returned object ) And when used in templates , It will automatically unravel , No additional writing is required in the template .value

Vue It already has "ref" It's a new concept . But just to get it in the template DOM Element or component instance (“ Template reference ”). new ref The system is used for both logical state and template reference .

reactive Receives a normal object and returns a responsive proxy for that normal object .

Responsive conversion is “ Deep ”: Affects all nested properties within an object . be based on ES2015 Of Proxy
realization , The proxy object returned is not equal to the original object . It is recommended to use only proxy objects and avoid relying on original objects .

Do not deconstruct the returned proxy object , That would make it less responsive :
<template>   <button @click="increase">count is: {{ count }}</button>
</template> <script>   import { ref, reactive } from '@vue/composition-api'
  export default {     setup() {       let state = reactive({ count: 0 })
      const increase = () => state.count++
      return { ...state, increase } //  open state Property will lose responsiveness     },   } </script>
toRef and toRefs

So if we really want to start state Properties of , Use in template count instead of state.count What should we do ? We can use it toRef and toRefs
these two items. API, Convert to ref object , I've talked about it before ref Objects can be used directly in templates .

toRef Can be used for a reactive Object to create a ref. this ref Can be delivered and can remain responsive .
<template>   <button @click="increase">     count is: {{ count }},count2 is: {
{ count2 }}   </button> </template> <script>
  import { ref, reactive, toRef, toRefs } from '@vue/composition-api'
  export default {     setup() {       let state = reactive({ count: 0 })
      let countRef = toRef(state, 'count')
      let state2 = reactive({ count2: 0 })
      const increase = () => state.count++
      let stateAsRefs = toRefs(state2)
      return { count: countRef, increase, ...stateAsRefs }     },   } </script>
Converting a responsive object into a normal object , Each of the property It's all one ref , And responsive objects property One to one correspondence .

computed & watch
const countDouble = computed(() => count.value * 2) watch(
  () => state.count,   (count, prevCount) => {     /* ... */   } )
Code logic extraction and reuse

Composition API The first obvious advantage of is that it's easy to extract logic . It's solved

Logic extraction
export const useCount = (number) => {   const count = ref(0)
  const increase = () => {     count.value += 1   }   const reset = () => {
    count.value = 0   }   onMounted(() => {     count.value = number   })
  return {     count,     increase,     reset,   } }
code reuse
//  Another file uses : const { count, increase } = useCount(1) console.log(count) // output 1
increase() console.log(count) // output 2 reset() console.log(count) // output 0
Effectively solved the problem mixins Reuse naming conflict , It's hard to identify where the name comes from mixin Problems with documents .

replace vuex State management

state store It can be placed in a single file or directory , For example, setting a global component can only use the configuration config
//context/config.ts
import { provide, inject, ref, onMounted, readonly } from '@vue/composition-api'
const configSymbol: symbol = Symbol() export const useProvider = {   setup() {
    let config = ref(null)     const configServer = async () => {
      // await  Some asynchronous operations , such as api etc.       config.value = { name: ' name ' }     }
    onMounted(async () => {       await configServer()     })
    provide(configSymbol, {       // Export read only config Only the internal part of the function can modify the state
      config: readonly(config),     })   }, } export const useInject = () => {
  return inject(configSymbol) }
Components at the top ( for example main.ts) Upper injection ,config It can be used in all components
import { defineComponent } from '@vue/composition-api'
import { useProvider } from './context/config' export default defineComponent({
  setup() {     useProvider()   }, })
Business logic page usage config
import { useInject } from './context/config' const Components = {   setup() {
    const { config } = useInject()     console.log(config.value.name) // output “ name ”
    return {       config,     }   }, }

Technology