从Vue2到Vue3变化

Vue3相比Vue2有许多重要的改变，包括API的变化、新特性、性能提升等。以下是一些主要的改变及其代码示例：

组合式API（Composition API）: Vue3引入了一个新的配置-setup函数，它是组合API的入口。

Vue2:




export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

Vue3:




import { ref } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
 
    function increment() {
      count.value++;
    }
 
    return { count, increment };
  }
}

响应式API的变化: Vue3使用了Proxy替代了Vue2中的Object.defineProperty，并且引入了新的响应式API。

Vue2:




this.$watch('count', (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

Vue3:




import { watch, ref } from 'vue';
 
const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

生命周期钩子的变化: Vue3中的生命周期钩子名称进行了改变或者合并，并引入了新的生命周期钩子。

Vue2:




beforeCreate() { ... },
created() { ... },
beforeMount() { ... },
mounted() { ... },

Vue3:




setup() { ... },
onBeforeMount() { ... },
onMounted() { ... },

移除了一些API: Vue3移除了一些Vue2中的API，比如this.$refs。

Vue2:




<template>
  <div ref="myDiv"></div>
</template>
 
<script>
this.$refs.myDiv;
</script>

Vue3:




<template>
  <div ref="myDiv"></div>
</template>
 
<script>
myDiv.value;
</script>

Fragment: Vue3中组件可以渲染多个节点，不再需要<div>包裹。

Vue2:




<template>
  <div>
    <span>Part 1</span>
    <span>Part 2</span>
  </div>
</template>

Vue3:




<template>
  <span>Part 1</span>
  <span>Part 2</span>
</template>

Teleport: Vue3中新增了Teleport组件，可以将子节点渲染到外部的DOM结构中。

Vue3:




<template>
  <teleport to="body">
    <div class="modal"></div>
  </teleport>
</template>

其他改变: 如SSR的改变、更好的TypeScript支持、Fragments、Composition API等。

总结：Vue3在API设计、响应式系统、运行时性能、编译优化等方面有显著的改进，同时也移除了一些旧的、不推荐使用的API。开发者需要根据Vue3的更新指南对现有的Vue2项目进行迁移和重构，以便充分利用Vue3的新特性。

从Vue2到Vue3变化

评论已关闭

推荐阅读