vue3 setup标签语法和export default 简洁使用响应式变量

vue2里面可以直接在data声明响应式变量后可以直接在模板语言里直接使用，vue其实也也可以。因为有setup标签和export default两种编码规则所以一下也包含了两种介绍：

第一种 export default，一般用于3.2前，因为当时不支持setup标签语法

// 声明响应式变量
let state = reactive({
          value: Value,
            width: '100%',
  })

 return {
            ...toRefs(state),    // 解构响应式变量
        }

第二种 setup标签语法

// 声明state
  const state = reactive({    name: 'Jerry'
  })       // 将方法、变量暴露给父组件使用，父组件才可通过ref API拿到子组件暴露的数据
  defineExpose({    // 解构state
    ...toRefs(state),    // 声明方法
    changeName () {      state.name = 'Tom'
    }  })