Vue 组件选项和组合式 Api 对比

发表于 | 更新于:

整理 Vue 3.0 组件选项和 Composition API 的对比

Composition API 的优点

  • 更好的逻辑复用与代码组织
  • 更好的类型推导

响应式数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/**
 * before
 */
data () {
  return {
    age: 10,
    name: 'Jack',
    color: ['red', 'blue', 'yellow'],
    grade: {
      art: 90,
      math: 90,
      english: 90,
    }
  }
}

// 修改
this.age = 20
this.name = 'Tom'
// vue2 中的修改 Object.defineProperty(grade, 'art', { get() {}, set() {} }) 需要提供具体的 key
this.$set(this.color, 0, 'orange')
this.$set(this.grade, 'art', 100)
// vue3 中的修改
this.color[0] = 'orange'
this.grade.art = 100

/**
 * after
 */
setup () {
  const age = ref(10) // new Proxy({ value: 10 }, { get(target, key) {}, set(target, key, value) {} })
  const name = ref('jack') // new Proxy({ value: 'jack' })
  const color = reactive(['red', 'blue', 'yellow']) // new Proxy(['red', 'blue', 'yellow'])
  const grade = reactive({ art: 90, math: 90, english: 90 }) // ne Proxy({ art: 90, math: 90, english: 90 })

  // 修改
  age.value = 20
  name.value = 'Tom'
  color[0] = 'orange'
  grade.art = 100

  return {
    age,
    name,
    color,
    grade
  }
}

props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * before
 */
props: ['name']

this.name

 /**
 * after
 */
props: ['name']

setup (props) {
  props.name
}

非 Prop 的 Attribute

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * before
 */
this.$attrs


/**
 * after
 */
setup (props, { attrs }) {

}

生命周期函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/**
 * before
 */
beforeCreate () {

},

created () {

},

beforeMount () {

},

mounted () {

},

beforeUpdate () {

},

updated () {

},

beforeUnmount () {

},

unmounted () {

}


/**
 * after
 */
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUpmount, onMounted } from 'vue'

setup () {
  onBeforeMount(() => {

  })

  onMounted(() => {

  })

  onBeforeUpdate(() => {

  })

  onUpdated(() => {

  })

  onBeforeUpmount(() => {

  })

  onMounted(() => {

  })
}

methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * before
 */
methods: {
  changeName () {

  }
}


/**
 * after
 */
setup () {
  const changeName = () => {

  }

  return {
    changeName
  }
}

slots

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * before
 */
this.$slots


/**
 * after
 */
setup (props, { slots }) {
  slots.default()
}

emit

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * before
 */
this.$emit('change', 'value')


/**
 * after
 */
setup(props, { emit }) {
  emit('change', 'value')
}

provide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
 * before
 */
// parent
provide: {
  user: 'Jack'
}

// child
inject: ['user']


/**
 * after
 */
// parent
setup () {
  const name = ref('Jack')
  provide('name', readonly(name))
  provide('changeName', (value) => {
    name.value = value
  })
}

// child
setup () {
  const name = inject('name')
  const changeName = injiect('changeName')
  changeName('Tom')
}

watch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
 * before
 */
watch: {
  userName (newVal, oldVal) {

  }
}


/**
 * after
 */

watch(nameObj, (oldVal, newVal) => {

})

watch(() => nameObj.name, (oldVal, newVal) => {

})

watch([() => nameObj.name, () => nameObj.englishName], ([newVal1, newVal2], [oldVal1, oldVal2]) => {

})
watch(nameObj, () => {

}, {
  immediate: true
})

computed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
 * before
 */
computed: {
  getCount () {
    return this.count
  }
}


/**
 * after
 */
setup () {
  computed(() => {
    return count + 5
  })

  computed({
    get () {
      return count
    },
    set (value) {
      count.value = value + 5
    }
  })
}

Dom ref

1
<div ref="hello">hello</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * before
 */
this.$refs.hello


/**
 * after
 */
setup () {
  const hello = ref(null)
  return {
    hello
  }
}

Vuex

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * after
 */
import { useStore } from 'vuex'

setup () {
  const store = useStore()
  // const name = store.state.name
  const { name } = toRefs(store.state)
  store.dispatch('changeName', 'Tom')
  store.commit('changeName', 'Tom')
}