Vue2.x和Vue3.x的语法对比

Vue3.0推出有一段时间了，大家已经安排学习了，想进阶技术的同学赶紧学起来吧。如果你对vue3不是很了解，或者打算学习，可以看看下面的分享，希望对大家有所帮助！要创建项目，首先将vue-cli更新到最新版本。npminstall-g@vue/cli#ORyarnglobaladd@vue/clivuecreatehello-vue3#selectvue3preset项目变更vue2.x和vue3.x的目录结构没有变化，但是一些使用方法发生了变化，默认安装了TypeScript。main.jsvue2.x使用importVuefrom'vue'，然后使用newVue()创建一个实例。对于vue3.x，import{createApp}from'vue'用于通过createApp()创建实例。这就导致很多插件或者UI组件库无法使用，比如ElementUI，iView...router.js创建路由vue3.x需要引入createRouter来创建地址路由。createWebHashHistory对应之前的hash，createWebHistory对应之前的history。vuex状态管理vue3.x中状态管理的创建方式改为createStore。代码结构更加精简合理。CompositionAPI是vue3.x变化最大的地方。Vue2.x数据存储在data中，方法在methods中，通过this调用。但是在vue3.x中，这些都没有了。所有代码都在设置中实现。页面需要哪些方法，在当前页面导入即可。生命周期vue3.x的生命周期也发生了一些变化，可以看下图。项目中的具体使用方法。setup使用介绍setup有两个参数props和contextprops：接受父组件传过来的值context：vue3.x中没有this，提供了一个context上下文属性，可以通过这个属性获取一些vue2.ximplementationswiththisOperationref声明基础数据类型，创建响应式基础类型，只能监听简单类型，如number、String、boolean等，一旦属性发生变化，就会被检测到。import{ref}from"vue"setup(){constcount=ref(0)count.value++//必须加上.valuereturn{count//必须返回}}reactivedeclaresresponsivedataobjectimport{reactive}from"vue"setup(){constcount=reactive({name:'369'})count.name='857'return{count}}computedcomputed属性类似于vue2.x，但是必须在使用前引入。watchEffect通过ref或reactive监听创建多个响应值，当任何值发生变化时立即触发该函数。watchEffect方法返回一个停止句柄以停止监听。router路由vue3.x的router和route属性也发生了很大的变化。在vue2.x中，使用this.$router进行跳转，使用this.$route获取当前页面的路由信息??。//路由跳转import{useRouter}from"vue-router";setup(){constrouter=useRouter()router.push('/path')}//获取当前页面路由信息import{useRoute}from"vue-router";setup(){constroute=useRoute()console.log(route)//这里的route相当于vue2.x中的this.$route}好了先分析这么多，后面再分享一些新的变化。欢迎一起交流讨论！