vue3的新写法和特性整理——三、变量和事件的绑定

vue3中，实现数据驱动，在写法上有了改变

<template>
  <div style="cursor:pointer;" @click="changeWord">{{world}}</div>
</template>

<script>
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    const data = reactive({
      world: 'Hellow world'
    });
    let changeWord = () => {
      data.world == 'Hellow world'? data.world="get out of the world":data.world ="Hellow world";
    };
    return {
      changeWord,
      ...toRefs(data)
    };
  },
  components: {}
};
</script>

<style>
</style>

　　关键代码：使用reactive包装变量，在setup函数中结构toRefs函数返回的对象，方法直接返回便能够被当前组件使用。
方法的绑定和vue2保持一致，但是函数声明的位置发生了变化（当然也能继续写在methods中，但是这样在使用vue3的provide和reject时可能会遇到某些问题，至于是什么，本人还在学习中，今后补充，也希望各位能够指点）。