目录
Composition API（组合式 API）
setup() 函数
ref 和 reactive
Teleport 组件
Fragment 组件
全局 API 改变
V-model 的改进
编译器优化
响应式系统改进
更好的类型推导和支持
更好的性能
Composition API（组合式 API）
- Vue3引入了Composition API，它是Vue3中最引人注目的变化之一，是一种新的组件编写方式，它允许开发者使用函数式API来组织和重用组件逻辑，而不仅仅是依赖于选项对象 API。这使得组件更易于理解和维护。
- 在Vue2中，我们使用Options API来定义组件，而在Vue3中，我们可以使用setup函数，并结合各种函数和响应式引用进行逻辑编写。
在Vue3中，使用Composition API可以更好地组织和重用组件逻辑。通过setup()函数，在其中编写逻辑代码。下面是一个示例：
Vue3:
<template><div>{{ count }}</div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);// 自定义函数function increment() {count.value++;}return {count,increment};}
};
</script>
Vue2:
<template><div>{{ count }}</div>
</template><script>
export default {data() {return {count: 0};},methods: {increment() {this.count++;}}
};
</script>
setup() 函数
在Vue3中，组件的选项中添加了一个名为
setup()的新函数。setup()函数用于替代Vue2中的created()、mounted()等钩子函数。setup()函数在组件实例被创建之前执行，并且作为一个独立的生命周期阶段。
setup()函数，可以替代Vue2中的生命周期钩子函数。下面是一个示例：
Vue3:
<template><button @click="increment">{{ count }}</button>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {const count = ref(0);// 在组件挂载后执行onMounted(() => {console.log('Component mounted');});// 自定义函数function increment() {count.value++;}return {count,increment};}
};
</script>
Vue2:
<template><button @click="increment">{{ count }}</button>
</template><script>
export default {data() {return {count: 0};},mounted() {console.log('Component mounted');},methods: {increment() {this.count++;}}
};
</script>
ref 和 reactive
在Vue3中，
ref和reactive是用于创建响应式数据的新函数。ref用于创建一个基本类型的响应式数据，而reactive则用于创建一个响应式对象。在Vue2中，可以直接在data选项中定义响应式数据。
ref和reactive函数用于创建响应式数据，示例：
Vue3:
<template><div>{{ count.value }}</div>
</template><script>
import { ref, reactive } from 'vue';export default {setup() {const count = ref(0);const person = reactive({name: 'Alice',age: 25});// 修改数据function increment() {count.value++;person.age++;}return {count,person,increment};}
};
</script>
Vue2:
<template><div>{{ count }}</div>
</template><script>
export default {data() {return {count: 0,person: {name: 'Alice',age: 25}};},methods: {increment() {this.count++;this.person.age++;}}
};
</script>
Teleport 组件
Vue3引入了Teleport组件，它可以在DOM树中的任何位置渲染组件内容。这对于创建弹出窗口、对话框等动态组件非常有用。
下面是一个示例：
Vue3:
<template><div><button @click="showModal = true">Show Modal</button><teleport to="body"><modal v-if="showModal" @close="showModal = false"><!-- modal content --></modal></teleport></div>
</template><script>
import { ref } from 'vue';export default {components: {Modal: {...}},setup() {const showModal = ref(false);return {showModal};}
};
</script>
Vue2:
<template><div><button @click="showModal = true">Show Modal</button><modal v-if="showModal" @close="showModal = false"><!-- modal content --></modal></div>
</template><script>
export default {components: {Modal: {...}},data() {return {showModal: false};}
};
</script>
Fragment 组件
Vue3中可以使用
<template>标签外的根级别元素来包裹多个组件，而不需要显式地添加一个无意义的父级元素。
Vue3:
<template><div><h1>Header</h1><p>Some content...</p><button>Button</button></div>
</template>
Vue2:
<template><div><div><h1>Header</h1><p>Some content...</p></div><button>Button</button></div>
</template>
全局 API 改变
在Vue3中，全局API的使用方式有所改变。一些全局API的调用方式发生了变化
Vue3
import { createApp } from 'vue';const app = createApp({...});app.directive('my-directive', {...});
app.config.globalProperties.$filters = {...};app.mount('#app');
Vue2
import Vue from 'vue';Vue.directive('my-directive', {...});
Vue.filter('my-filter', {...});new Vue({el: '#app',...
});
V-model 的改进
在Vue3中，可以通过
v-model指令绑定自定义组件的值，对于双向绑定提供了更大的灵活性。
Vue3
<template><custom-input v-model="message" />
</template><script>
import { ref } from 'vue';export default {setup() {const message = ref('');return {message};}
};
</script>
Vue2
<template><custom-input :value="message" @input="message = $event" />
</template><script>
export default {data() {return {message: ''};}
};
</script>
编译器优化
Vue3的编译器经过了改进，生成了更高效的渲染函数，提供了更好的性能。新的编译器还支持静态提升和源码映射等功能，使得调试更加方便。
响应式系统改进
- Vue3采用了Proxy作为其响应式系统的核心，相比于Vue2的Object.defineProperty，Proxy具有更好的性能和更强大的功能。
- Vue3中的响应式系统还引入了Reactivity API，使得可以更灵活地处理响应式数据。
更好的类型推导和支持
- Vue3通过TypeScript提供了更好的类型支持，可以提供更强大的IDE提示和类型检查。
- Vue3中的组件选项类型也进行了改进，更加准确。
更好的性能
- Vue3通过更新的编译器和渲染机制，提供了更好的性能表现。
- Vue3中使用了静态树提升和更高效的虚拟DOM算法，优化了组件的渲染过程。
