vue2.x和vue3.x的一些变化(持续总结更新)

vue2.x和vue3.x目录结构没有什么变化,只是一些使用方法变了,而且默认是安装了TypeScript。

vue3目录结构图
1: v-if与v-for的优先级(更新)
原则上,在vue中应该避免在同一元素上使用 v-if 与 v-for 的。
2.x:v-for 的优先级高于 v-if
3.x:v-if 的优先级高于 v-for
2: 关于 computed: 3.X 把 computed 变成了一个计算属性 API,所以可以有多个 computed,可以沿用 Vue.js 2.x 的使用方法,只是使用前要先引入。
3: 关于 watch:对于监听对象是分隔字符串时,需要在选项参数中指定 deep: true
4: 在 Vue3 中组件没有filters选项,迁移过程中,可以用computed/methods替代。Vue3.0不能定义过滤器属性,filters 将使用 computed 或者方法来代替,在模板语句中不再有{{ count | costumCount }}这种写法。
5: vue3.X 中去掉了.sync,用v-model代替 并且同一个组件中不仅限于只有一个v-model。在 Vue2.0中一个组件只能定义一个 v-model,其实参数要实现 v-model 的效果则需要使用 value.async 和 $emit(“update:value”) 。在 Vue 3.0中将支持多个 v-model,多个 v-model 用 v-model:value 来区分,在子组件改变v-model 传过来的值一样是使用$emit(“update:value”)。
6: 关于vuex的使用
vue2.0 创建仓库 new Vuex.Store({})
vue3.0 创建仓库 createStore({})
7:过渡动画的类名改变
原来的 v-enter 改为 v-enter-from,原来的 v-leave 改为 v-leave-from


●main.js
vue2.x使用import Vue from ‘vue’,然后使用new Vue()创建实例。vue3.x则是import {createApp} from ‘vue’,通过createApp()来创建实例了。
这就导致了很多的插件或UI组件库不能使用,比如ElementUI、iView…
●router.js创建路由
vue3.x需要引入createRouter创建地址路由。createWebHashHistory对应之前的hash,createWebHistory对应之前的history。
●vuex状态管理
vue3.x中状态管理的创建方式变为了createStore 。代码结构更精简合理。
●Composition API
这个是vue3.x变化最大的地方,vue2.x数据存放在data,方法在methods,通过this去调用。但是在vue3.x这些都没有了,所有的代码全部都在 setup 里面实现,你页面需要哪些方法,就要在当前页引入即可。
●生命周期
vue3.x的生命周期也发生了一些变化。具体的就是原来的beforCreate和created周期统一被新的setup()取代了。其他的都在原来的周期名称前加上on,更加语义化。

公告: 1. 本站所有资源来源于用户上传和网络,如有侵权请联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系站长处理! 6. 本站不售卖代码,资源标价只是站长收集整理的辛苦费!如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 7. 站长QQ号码 1325439703
星球之家 » vue2.x和vue3.x的一些变化(持续总结更新)