vue2和vue3的区别

1.双向数据绑定原理发生了变化

vue2双向数据绑定是利用ES5的Object.defineProperty()对数据进行劫持,结合发布订阅模式来实现
vue3中使用ES6的ProxyAPI对数据代理

2.根节点

vue2只有一个根节点
vue3可以有多个根节点

3.API

vue2使用选项类型API(Options API): 用属性来分割组件 vue3使用组合型API(Composition API): 用方法来分割组件

4.建立数据

vue2把数据放在data中

export default {
    data() {
        return {
            name: ''
        }
    }
}

vue3使用setup方法,在组件初始化构造的时候触发

<template>
  <div>
    <h2> {{ state.name }} </h2>
  </div>
</template>
<script>
import { reactive } from 'vue' //引入reactive声明数据为响应性数据

export default {
  props: {
    title: String
  },
  setup () { // 使用setup()方法来返回我们的响应性数据
    const state = reactive({
      name: '',
    })

    return { state }
  }
}
</script>

5.生命钩子变化

vue3中的created和beforeCreated在vue3中用setup（）这个钩子函数代替，剩下的6个钩子函数在前面加上on这个单词