网站图片如何做链接,携程旅行网官网,个性化网站制作,ppt插件 网站目录
Composition API#xff08;组合式 API#xff09;
setup() 函数
ref 和 reactive
Teleport 组件
Fragment 组件
全局 API 改变
V-model 的改进
编译器优化
响应式系统改进
更好的类型推导和支持
更好的性能 Composition API#xff08;组合式 API#xff…目录
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:
templatediv{{ count }}/div
/templatescript
import { ref } from vue;export default {setup() {const count ref(0);// 自定义函数function increment() {count.value;}return {count,increment};}
};
/scriptVue2:
templatediv{{ count }}/div
/templatescript
export default {data() {return {count: 0};},methods: {increment() {this.count;}}
};
/scriptsetup() 函数 在Vue3中组件的选项中添加了一个名为setup()的新函数。setup()函数用于替代Vue2中的created()、mounted()等钩子函数。setup()函数在组件实例被创建之前执行并且作为一个独立的生命周期阶段。 setup()函数可以替代Vue2中的生命周期钩子函数。下面是一个示例
Vue3:
templatebutton clickincrement{{ count }}/button
/templatescript
import { ref, onMounted } from vue;export default {setup() {const count ref(0);// 在组件挂载后执行onMounted(() {console.log(Component mounted);});// 自定义函数function increment() {count.value;}return {count,increment};}
};
/scriptVue2:
templatebutton clickincrement{{ count }}/button
/templatescript
export default {data() {return {count: 0};},mounted() {console.log(Component mounted);},methods: {increment() {this.count;}}
};
/scriptref 和 reactive 在Vue3中ref和reactive是用于创建响应式数据的新函数。ref用于创建一个基本类型的响应式数据而reactive则用于创建一个响应式对象。在Vue2中可以直接在data选项中定义响应式数据。 ref和reactive函数用于创建响应式数据示例
Vue3:
templatediv{{ count.value }}/div
/templatescript
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};}
};
/scriptVue2:
templatediv{{ count }}/div
/templatescript
export default {data() {return {count: 0,person: {name: Alice,age: 25}};},methods: {increment() {this.count;this.person.age;}}
};
/scriptTeleport 组件 Vue3引入了Teleport组件它可以在DOM树中的任何位置渲染组件内容。这对于创建弹出窗口、对话框等动态组件非常有用。 下面是一个示例
Vue3:
templatedivbutton clickshowModal trueShow Modal/buttonteleport tobodymodal v-ifshowModal closeshowModal false!-- modal content --/modal/teleport/div
/templatescript
import { ref } from vue;export default {components: {Modal: {...}},setup() {const showModal ref(false);return {showModal};}
};
/scriptVue2:
templatedivbutton clickshowModal trueShow Modal/buttonmodal v-ifshowModal closeshowModal false!-- modal content --/modal/div
/templatescript
export default {components: {Modal: {...}},data() {return {showModal: false};}
};
/scriptFragment 组件 Vue3中可以使用template标签外的根级别元素来包裹多个组件而不需要显式地添加一个无意义的父级元素。 Vue3:
templatedivh1Header/h1pSome content.../pbuttonButton/button/div
/templateVue2:
templatedivdivh1Header/h1pSome content.../p/divbuttonButton/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
templatecustom-input v-modelmessage /
/templatescript
import { ref } from vue;export default {setup() {const message ref();return {message};}
};
/scriptVue2
templatecustom-input :valuemessage inputmessage $event /
/templatescript
export default {data() {return {message: };}
};
/script编译器优化 Vue3的编译器经过了改进生成了更高效的渲染函数提供了更好的性能。新的编译器还支持静态提升和源码映射等功能使得调试更加方便。 响应式系统改进 Vue3采用了Proxy作为其响应式系统的核心相比于Vue2的Object.definePropertyProxy具有更好的性能和更强大的功能。Vue3中的响应式系统还引入了Reactivity API使得可以更灵活地处理响应式数据。 更好的类型推导和支持 Vue3通过TypeScript提供了更好的类型支持可以提供更强大的IDE提示和类型检查。Vue3中的组件选项类型也进行了改进更加准确。 更好的性能 Vue3通过更新的编译器和渲染机制提供了更好的性能表现。Vue3中使用了静态树提升和更高效的虚拟DOM算法优化了组件的渲染过程。
