vue2升vue3

标签

旧
<script>
</script>
新
<script setup>
</script>

定义变量

旧
// 定义
data () {
  return {
    a: 1
  }
}
// js取值
this.a
// 模板取值
a

新
// 定义
import { ref } from 'vue'
const a = ref(1)
// js取值
a.value
// 模板取值
a

父传子

旧
// 定义
props: {
  a: {
    type: Object,
    default: () => {}
  }
}
// 取值
this.a

新
// 定义
import { toRefs, defineProps } from 'vue'
const props = defineProps({
  a: Object
})
// 取值1
const { a } = toRefs(props)
a.value
// 取值2
props.a.value

子传父

旧
this.$emit('abc', 1)
新
const emit = defineEmits(['abc'])
emit('abc', 1)

定义函数

旧
// 定义
methods: {
  init () {
    console.log('init')
  }
}
// 使用
this.init()
新
// 定义
const init = () => {
  console.log('init')
}
// 使用
init()

常用生命周期

旧
mounted () {
  console.log('mounted')
}
computed: {
  a () {
    return 2
  }
}
watch: {
  b (newVal, oldVal) {
    console.log(newVal, oldVal)
  }
}
新
import { onMounted, computed, watch } from 'vue'
onMounted(() => {
  console.log('mounted')
})
const a = computed(() => { return 2 })
watch(b, (newVal, oldVal) => { console.log(newVal, oldVal) })

引入组件

新版无需
components: {
  a
}
其他一样