vue..js3.0

1. 初始化项目
   npm i -g @vue/cli
   
   npm install @vue/composition-api -S

   npm install @vue/composition-api -S

2.main.js
  import Vue from 'vue'
  import VueCompositionApi from '@vue/composition-api'
  Vue.use(VueCompsitionApi)

vue3.x的新方法

  1.setup(props参数，ctx上下文对象) 方法
   

   setup()在beforeCreate 之后 create之前执行 ，注意在setup()中无法访问到this

   setup(props, ctx) {
    console.log('setup')
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },

2.reactive 函数接收一个普通函数，返回一个响应式的数据对象
<template>
  <div>
    <p>当前的 count 值为：{{count}}</p>
    <button @click="count += 1">+1</button>
  </div>
</template>

<script>
import {reactive} from '@vue/composition-api'
export default {
  setup(props, ctx) {
    // 创建响应式数据对象，得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
    const state = reactive({ count: 0 })
    state.count += 1
    console.log(state)
     // setup 函数中将响应式数据对象 return 出去，供 template 使用
    return state
  }
}
</script>

3.ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性

<template>
  <div>
    <h3>02.ref.vue 文件</h3>
    <p>refCount：{{refCount}}</p>
    <button @click="refCount += 1">+1</button>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api'
export default {
  setup() {
    // / 创建响应式数据对象 count，初始值为 0
    const refCount = ref(0)
    // 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以，只有在setup内部才需要 .value 属性
    console.log(refCount.value) // 输出 0
    // 让 refCount 的值 +1
        refCount.value++
    // 再次打印 refCount 的值
        console.log(refCount.value) // 输出 1
    return {
      refCount
    }
  }
}
</script>