First, vue3.0

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue - next to try</title>
  <script src="https://s1.zhuanstatic.com/common/js/vue-next-3.0.0-alpha.0.js"></script>
</head>

<body>
  <div id='app'></div>
</body>
<script>
  const { createApp, reactive, computed, effect } = Vue

  const RootComponent = {
    template: '< button@click ="increment"> {{state.age}} increment = {{state.double}} 
        {{state.age}} increment = {{state.double}} 
        {{state.double}} 
        {{state.double}.setup() {

      const state = reactive({
        name: 'Xu Tongbao'.age: 18.double: computed(() = > state.age * 2)
      })

      effect(() = > {
        console.log('effect' triggered! -${state.name}This year,${state.age}I'm old. Times 2 is${state.double}`)})const increment = () = > {
        state.age++
      }

      return {
        state,
        increment
      }
    }
  }
  createApp().mount(RootComponent, '#app')
</script>

</html>
Copy the code

 

Second, @ vue/composition – API

vue-composition-api-rfc.netlify.app/#summary

www.npmjs.com/package/@vu…

Packing:

yarn add @vue/composition-api
Copy the code

 

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueCompositionApi from '@vue/composition-api'

Vue.config.productionTip = false
Vue.use(VueCompositionApi)

new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
Copy the code

App.js:

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from '@vue/composition-api'

export default {
  setup() {
    const state = reactive({
      count: 0.double: computed(() = > state.count * 2)})function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>
Copy the code

Add:

<template>
  <div>
    {{data.count}}
    <div>
      <button @click="handleAdd(1)">Add 1</button>
      <button @click="handleAdd(2)">Add 2</button>
    </div>
  </div>
</template>

<script>
import { reactive } from '@vue/composition-api'

export default {
  setup() {
    const data = reactive({
      count: 0
    })

    const handleAdd = (step) = > {
      data.count += step
    }

    return {
      data,
      handleAdd
    }
  }
}
</script>

<style>

</style>
Copy the code