佛山住房和城乡建设部网站,公司方案,南京专业网站优化公司,成都网页制作服务好一文全面了解vue3新特性一、#x1f636;vue3比vue2有什么优势#xff1f;二、#x1f9d0;Vue3升级了哪些重要的功能1、createApp2、emits(父子组件间的通信)#xff08;1#xff09;通信方式#xff08;2#xff09;举个例子#x1f330;3、多事件处理4、Fragment5、… 一文全面了解vue3新特性一、vue3比vue2有什么优势二、Vue3升级了哪些重要的功能1、createApp2、emits(父子组件间的通信)1通信方式2举个例子3、多事件处理4、Fragment5、移除.sync1vue22vue36、异步组件7、移除filter8、Teleport9、Suspense三、Options API 和 Composition API1、生命周期对比2、Composition API 和 Options API 对比1Composition API带来了什么2Composition API和Options API如何选择3别误解Composition API四、结束语紧跟新技术的步伐周一也开始学起了 vue3 。去年11月份的时候对 vue3 其实已经有所耳闻但当时对 vue3 完全没有想学习的欲望。当时就觉得够用就行新技术那么多哪里学得动。然而现在……悔不当初时代在推你进步你却停滞不前只会被时代淘汰。迫于内卷压力再不学 vue3 真的感觉在跟时代划一道鸿沟。
所以今年赶忙把 vue3 提上日程。原本 vue3 的学习计划是在三月份但因为各种事情耽搁了到了现阶段才进行。
求求别再卷了……我学❗❗我学❗❗
在今天的这篇文章中将带领大家全面了解 vue3 的新特性vue3 与 vue2 的一些区别 Composition API 和 Options API 的区别。
下面开始进行本文的讲解
一、vue3比vue2有什么优势
vue3比vue2来说性能上更好代码体积更小并且有更好的ts支持。
同时更为突出的特点是vue3有更好的代码组织能力有更好的逻辑抽离能力并且还有更多各式各样的新功能。
其中尤为突出的就是大家平常耳熟能详的 Composition API 和 Options API 。
那是不是 vue3 就一定比 vue2 好呢或者是 Composition API 就一定比 Options API 好呢
其实大家心里可能在此打下了一个问号⁉️
那接下来就带着这个问号一起来了解 vue3 的新特性吧
二、Vue3升级了哪些重要的功能
1、createApp
与 vue2 不同的是 vue2 使用 new 的方式来初始化一个实例而 vue3 则用 Vue.createApp 来初始化一个实例。如下所示
//vue2.x 实例化方式
const app new Vue({ /*选项*/ })
//vue2.x 使用方式
Vue.use(/*...*/)
Vue.mixin(/*...*/)
Vue.component(/*...*/)
Vue.directive(/*...*/)//vue3 实例化方式
const app Vue.createApp({ /*选项*/ })
//vue3 使用方式
app.use(/*...*/)
app.mixin(/*...*/)
app.component(/*...*/)
app.directive(/*...*/)2、emits(父子组件间的通信)
1通信方式
传递形式通信方式emits子组件向父组件传递数据props父组件的数据需要通过props把数据传给子组件props的取值可以是数组也可以是对象
2举个例子
在 vue2的时候我们可以用 $emit 和 props 来进行父子组件间的通信。而现在 vue3 使用 emits 和 props 来实现父子组件间的通信。
我们定义一个父组件 名字叫 App.vue 具体代码如下
templateHelloWorld msgHello Vue 3.0 Vite onSayHellosayHello/
/templatescript
import HelloWorld from ./components/HelloWorld.vueexport default {name: App,components: {HelloWorld,},data() {return {msg: hello vue3} },methods: {sayHello(info) {console.log(hello, info)}}
}
/script再定义一个子组件名字叫 HelloWorld.vue 具体代码如下
templateh1{{ msg }}/h1
/templatescript
export default {name: HelloWorld,props: {msg: String},data() {return {}},emits: [onSayHello],setup(props, { emit }) {emit(onSayHello, vue3)}
}
/script此时浏览器的显示效果如下 在 vue3 中可以直接将 emit 参数传入 setup 生命周期里面来达到父子组件的通信。
3、多事件处理
在 vue2 时每一个点击只能定义一个事件而在 vue3 时打破原有的规则每一个 click 可以点击多个事件。如下代码所示
!-- 在 methods 里定义 one two 两个函数 --
button clickone($event), two($event)submit
/button4、Fragment
fragment 中文翻译过来就是碎片的意思。
在 vue2.x 时是不允许有碎片存在的。所以我们每次在写程序时最外层总要再给它包个 div 。但这个时候就会感觉特别麻烦因为有时候想这个 div 的 class 名还得思考给命个什么名字好感觉心里都已经没墨水了。
因此在 vue3 时就除去了这个规范可以不用最外层再包个 div 。如下代码所示
!-- vue2.x 组件模板 --
templatediv classdetailh3{{ title }}/h3div v-htmlcontent/div/div
/template!-- vue3 组件模板 --
templateh3{{title}}/h3div v-htmlcontent/div
/template5、移除.sync
1vue2
在 vue2 时我们会通过 v-bind:title.sync 来进行数据双向绑定。具体代码如下
!-- vue2.x --
MyComponent v-bind:title.synctitle/MyComponent2vue3
而在 vue3 时直接放弃掉 .sync 而使用 v-model 的形式来对数据进行绑定。具体代码对下
!-- vue3.x --
MyComponent v-model:titletitle/MyComponent我们再用一个例子来展示 vue3 是怎么对数据进行双向绑定的。具体代码如下
我们先定义一个子组件名字叫 UserInfo.vue 具体代码如下
templateinput :valuename input$emit(update:name, $event.target.value)/input :valueage input$emit(update:age, $event.target.value)/
/templatescript
export default {name: UserInfo,props: {name: String,age: String}
}
/script再来定义一个父组件名字叫 index.vue 具体代码如下
templatep{{name}} {{age}}/puser-infov-model:namenamev-model:ageage/user-info
/templatescript
import { reactive, toRefs } from vue
import UserInfo from ./UserInfo.vueexport default {name: VModel,components: { UserInfo },setup() {const state reactive({name: monday,age: 18})return toRefs(state)}
}
/script
此时浏览器的显示效果如下 此时我们可以得出结论子组件通过控制 :value 和 input 来控制input的值同时父组件通过 v-model:propertyName 来绑定子组件的值这样一来两者就实现了双向数据绑定。
6、异步组件
在 vue2 时引入异步组件的方法比较简单直接使用import即可。代码如下
new Vue({//…components:{my-component: () import(./my-async-component.vue)}
})而在 vue3 时引入异步组件需要使用 defineAsyncComponent 方法来进行引入。代码如下
import { createApp, defineAsyncComponent } from vuenew Vue({//…components:{AsyncComponent: defineAsyncComponent(() import(./components/AsyncComponent.vue))}
})7、移除filter
在 vue2 时有 filter 这个功能但其实这个功能的使用频率还挺低的。所以在 vue3 中彻底去除了 filter 这个功能不再可用。
!-- 以下filter在vue3中不再可用 --
!-- 在双花括号中 --
{{ message | capitalize }}!-- 在v-bind中使用 --
div v-bind:idrawId | formatId/div8、Teleport
Teleport 中文翻译过来就是远距离传送。在 vue2 中比如我们要定义点击某个按钮去跳转一个模态框这个时候一般需要去操作 DOM 元素或者再定义一个新的组件。但是在 vue3 我们可以用 teleport 来解决。我们可以使用 teleport 来直接定义在当前组件中之后通过v-if等方式来控制其显示与否。演示代码如下
!-- data 中设置modalOpen: false --
button clickmodalOpen trueOpen full scree modal!(With teleport!)
/buttonteleport tobodydiv v-ifmodalOpen classmodaldivtelePort 弹窗(父元素是body)button clickmodalOpen falseColse/button/div/div
/teleport9、Suspense
Suspense是对vue2.x中的插槽做一个封装这里不进行一一讲解。下面给出代码演示
SuspensetemplateTest1/ !-- 是一个异步组件 --/template!-- #fallback就是一个具名插槽。即Suspense组件内部有两个slot其中一个具名为 fallback --template #fallbackLoading.../template
/Suspense三、Options API 和 Composition API
1、生命周期对比
以下给出 Vue2 与 Vue3 生命周期的对比。
Vue2生命周期(Options API)Vue3生命周期(Composition API)含义beforeCreatesetup在实例初始化之后数据观测(data observer) 和 event/watcher 事件配置之前被调用createdsetup页面还没有渲染但是vue的实例已经初始化结束。beforeMountonBeforeMount在挂载开始之前被调用相关的 render 函数首次被调用。mountedonMounted页面已经渲染完毕。beforeUpdateonBeforeUpdate数据更新时调用发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态这不会触发附加的重渲染过程。updatedonUpdated由于数据更改导致的虚拟 DOM 重新渲染和打补丁在这之后会调用该钩子。当这个钩子被调用时组件 DOM 已经更新所以你现在可以执行依赖于 DOM 的操作。beforeDestoryonBeforeUnmount实例销毁之前调用。在这一步实例仍然完全可用。destroyonUnmountedVue 实例销毁后调用。
2、Composition API 和 Options API 对比
1Composition API带来了什么
Composition API 相较于 Options API 来说拥有更好的代码组织能力更好的逻辑复用能力以及更好的类型推导。
这里引用大帅老师的几张动图来对 Composition API 和 Options API 做一个对比。原文搓做了一夜动画就为让大家更好的理解Vue3的Composition Api再悄悄告诉各位小伙伴大帅老师的文章融入大量的动画通俗易懂路过的小伙伴赶紧关注一波哦学习路上不迷路
废话不多说赶紧来 Options API 和 Composition API 的区别。
Options API Composition API 从上图中可以看到对于 Options API 来说它的逻辑是散落在各处的懒懒散散的。假设我们现在有一个功能要实现而这个功能的逻辑代码有2000-3000行试想一下如果我们用 Options API 来实现的话假设这个功能在 methods 里面有定义了一个方法然后呢又要滑动一两千行去 mounted 里面看挂载的内容这真的是出奇的浪费时间呐所以 vue3 提出了 composition API 就来解决这个问题了。
composition API 把代码的逻辑抽离出来封装并把封装的内容直接引用到生命周期里面这样使用起来真的方便太多了。
我们举个简单的例子来看看 composition API 的使用方式。如下代码所示
抽离某个逻辑放在同一个函数上
function sum(){let a ref(10);let b computed(() {return a.value * 2})const handleSum () {a.value a.value b}return {a,b,handleSum}
}将sum函数逻辑放在组件中使用
export default defineComponent({setup(){const { a, b, handleSum } sum();return {a,b,handleSum}}
})综上可以得出对于一个项目来说尤其是代码量越多逻辑越复杂的 Composition API 的优势会更加明显。那对于一个项目来说我们应该在这两者中如何抉择而选择更好的方案呢 接着我们继续往下看。
2Composition API和Options API如何选择
通过上面的分析我们可以知道 Composition API 虽然好用但也不能乱用。因此对于 Composition API 和 Options API 的使用主要有以下几点建议
两者不建议共用不然很容易引起混乱对于小型项目、或者业务逻辑比较简单的项目建议使用 Options API 对于中大型项目、或者逻辑比较复杂的项目建议使用 Composition API 相较于 Options API 来说 Composition API 对大型项目更好一些逻辑的抽离代码的复用使得大型项目得以更好的维护。
3别误解Composition API
很多小伙伴在没学 vue3 之前就依稀有听到 Composition API 的声音这个时候就会使得很多人觉得要想学会 Vue3 就得先学会 Composition API 。
其实……不是这样的。
Composition API 属于高阶技巧并不是学基础时必须要会的内容。
正如上面所演示的内容 Composition API 的出现是为了解决复杂业务逻辑而设计而不是为了学基础而设计的。
所以说对于小白学 vue3 时需要先学会 vue3 的基础再来学 Composition API 这样的学习路线更为合理。
四、结束语
vue3 确实解决了 vue2 的很多问题上文所描述的也只是冰山一角。但并没有说 vue3 出了就是 vue3 最好 vue2 不用了。因为 vue3 确实解决了一些问题但同时也带来了一些问题所以说两者更多的是一个相辅相成的结果。
关于vue3的超入门知识就讲到这里啦希望对大家有帮助~ 关注公众号 星期一研究室 第一时间关注学习干货更多有趣的专栏待你解锁~如果这篇文章对你有用记得 一键三连 再走哦我们下期见
