vue3.0 初体验 一边学习一边写

vue3.0初体验

1. 使用vue-cli创建一个项目
2. 安装

      yarn add @vue/composition-api

3. 在main.js引入

   	import VueComposition from '@vue/composition-api'
   	Vue.use(VueComposition)

4. 使用

<template>
  <div class="hello">
    {{title}}
  </div>
</template>

<script>
import {reactive} from '@vue/composition-api';
export default {
  name: 'HelloWorld',
  //相当于vue2.0的data
  setup(){
    const state=reactive({
        title:"Hello World"
    })
    return state;
    }
}
</script>

vue3.0使用方法

首先在setup()中定义

  setup(){
  //改变状态的值
     let play=()=>{
     state.name="杨某某";
   }
    return {
   //加上toRefs形成响应式数据，（双向绑定）
   ...toRefs(state),
   play
   }
  }

其次引入toRefs

 import {reactive,toRefs} from '@vue/composition-api';

然后页面调用

    <button @click="play()"> 方法一</button>