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

Posted 2022-11-29 春风又一季

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>