vue3选项式转组合式总结(持续更新)

正则替换干货（idea）

• method

Regex: (\w+)\((\w+|)\) \{
Replace: const $1 = \($2\) => \{
实例：
getXxx() {
替换成：
const getXxx= () => {

• 方法 (防止下面的属性变量冲突)

Regex: this\.(\w+)\(
Replace: $1(
实例：
this.getXxx(
替换成：
getXxx(

• 属性变量（props, data）

Regex: this.(\w+)
Replace: $1.value
实例：
this.user
替换成：
user.value

其他总结

• this.$refs.loginForm，页面上的组件比如 <el-form ref="loginForm">替代方案

const loginForm = ref()
// 使用 loginForm.value  =>  this.$refs.loginForm

• this.$emit('update:modelValue',result)

const emit = defineEmits(['update:modelValue'])
emit('update:modelValue', result)

• this.$attrs

<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
</script>

• inheritAttrs

// 选项式：
<script>
export default {
  inheritAttrs: false
}
</script>


// 组合式：
<script>
export default {
  inheritAttrs: false
}
</script>
<script lang="ts" setup>
...
</script>

• directives

// 选项试：
<script>
export default {
	  directives: {
	    drag(el) {}
	  },
}
</script>
// 组合式：
<script setup>
// enables v-drag in templates
const vDrag = {
  mounted: (el) => el.focus()
}
</script>

• data数据的处理

// 选项试：
<script>
export default {
  data() {
    return {
      form: {
        phone: "",
        yzm: "",
      },
      rules: {
        phone: [
          {required: true, message: this.$t('login.mobileError')}
        ],
        yzm: [
          {required: true, message: this.$t('login.smsError')}
        ]
      },
      disabled: false,
      time: 0,
      islogin: false,
    }
  }
}
<script>
// 组合式：
<script lang="ts" setup>
const dataValue = reactive({
  form: {
    phone: "",
    yzm: "",
  },
  rules: {
    phone: [
      {required: true, message: this.$t('login.mobileError')}
    ],
    yzm: [
      {required: true, message: this.$t('login.smsError')}
    ]
  },
  disabled: false,
  time: 0,
  isLogin: false,
})
// 在js 里面用的时候，注意了。 要用.value 比如form.value
const {form, rules, disabled, time, isLogin} = toRefs(dataValue)
<script>

• element-plus相关的

  interface ComponentCustomProperties {
    $message: typeof import('element-plus')['ElMessage']
    $notify: typeof import('element-plus')['ElNotification']
    $msgbox: typeof import('element-plus')['ElMessageBox']
    $messageBox: typeof import('element-plus')['ElMessageBox']
    $alert: typeof import('element-plus')['ElMessageBox']['alert']
    $confirm: typeof import('element-plus')['ElMessageBox']['confirm']
    $prompt: typeof import('element-plus')['ElMessageBox']['prompt']
    $loading: typeof import('element-plus')['ElLoadingService']
  }

结合了自动导入 ，可以直接用后面对应的组件替代，比如可以用ElMessage.success('success')替换this.$message.success('success')