vue2.0转变成vue3.0

vue3.0发布已经4个多月了 官网还没有同步更新 但是尝鲜版本已经出来了 改变还是非常的大的 几乎都是基于面向对象和es6的语法 闲着没事 自己动手尝试了一下  

1.首先下载依赖 在2.0的基础上

npm i @vue/composition-api -s

2.在mian里面引入

import VueCompositionApi from '@vue/composition-api'




Vue.use(VueCompositionApi)

3.页面

//把2.0的data methods 及created都去除了 统一写在setup里面

其次 生面周期也已经演变  例如 mounted  ==>onMounted

<template>
  <div class="about">
      <h3>Hellow Vue3.0 </h3>
      <button @click="add">点击++</button>
      <span>111:{
   
   {model}}</span>
  </div>
</template>
<script>
import { reactive ,ref} from '@vue/composition-api'
export default {
  setup(){
    const array= reactive([
      {
        name:'田大佬',
        age:18
      }
    ])
    const model = ref(0)
    console.log(array);
    console.log(model.value);
    const add=()=>{
      console.log(111)
    }
    return{
      add,
      model
    }
  }
}
</script>
<style lang="less">
  
</style>

具体可参考配置文档 https://vue-composition-api-rfc.netlify.app/#summary