当前位置: 首页 > 科技观察

详细教程:在Vue2和Vue3中构建相同的组件

时间:2023-03-20 19:35:04 科技观察

过去,我们看到了很多关于即将到来的大变化的文章,但并没有真正深入研究代码将如何变化。为了演示这些变化,小新将在Vue2和Vue3中构建一个简单的表单组件。在本文的最后,我将介绍Vue2和Vue3之间的主要编程差异,以帮助您了解并逐步成为更好的开发人员。如果您想知道如何构建您的第一个Vue3应用程序,请查看Vue3Alpha应用程序初学者指南。让我们开始吧!创建模板对于大多数组件,Vue2和Vue3中的代码即使不完全相同也非常相似。但是,Vue3支持片段,这意味着组件可以有多个根节点。这在渲染列表中的组件以移除不必要的包装div元素时特别有用。但是,在这种情况下,两个版本的表单组件都将只保留一个根节点。唯一true不同之处在于数据的访问方式。在Vue3中,响应式数据被封装在一个响应式状态变量中,所以你需要访问这个状态变量来获取值。设置数据这是主要区别-Vue2OptionsAPI与Vue3CompositionAPI。选项API将代码分为不同的属性:数据、计算属性、方法等。同时,CompositionAPI允许根据函数而不是属性类型对代码进行分组。对于表单组件,只有两个数据属性:用户名和密码。Vue2代码看起来是这样的——只需在数据属性中放入两个值。exportdefault{props:{title:String},data(){return{username:'',password:''}}}在Vue3.0中,必须花更多的功夫使用新的setup()方法,所有的组件初始化应该在这个方法中完成。此外,为了让开发人员更好地控制反应性,可以直接访问Vue的反应性API。创建反应式数据需要三个步骤:从vue导入反应式使用反应式方法声明数据使用设置方法返回反应式数据,以便模板可以访问它代码看起来有点像这样。import{reactive}from'vue'exportdefault{props:{title:String},setup(){conststate=reactive({username:'',password:''})return{state}}}然后在模板中,你可以使用state.username和state.password之类的东西来访问Vue2和Vue3中的创建方法。Vue2选项API有一个单独的方法部分。该部分可以定义所有方法并以任何需要的方式组织它们。exportdefault{props:{title:String},data(){return{username:'',password:''}},methods:{login(){//loginmethod}}}Vue3组合API中的setup方法是也可用处理。它的工作方式有点像声明数据——方法必须声明然后返回,以便组件的其他部分可以访问它。exportdefault{props:{title:String},setup(){conststate=reactive({username:'',password:''})constlogin=()=>{//loginmethod}return{login,state}}}life生命周期钩子Vue2可以直接从组件选项访问生命周期钩子。以下示例代码将等待已安装的事件。exportdefault{props:{title:String},data(){return{username:'',password:''}},mounted(){console.log('componentmounted')},methods:{login(){//loginmethod}}}现在使用Vue3组合API,几乎所有内容都在setup()方法中,包括已安装的生命周期挂钩。但是默认不包含生命周期钩子,所以必须引入Vue3中的onmount方法。这看起来与之前导入reactive相同。然后,在setup方法中,通过传递函数来使用onmount方法。import{reactive,onMounted}from'vue'exportdefault{props:{title:String},setup(){//..onMounted(()=>{console.log('componentmounted')})//...}}computedattribute添加一个将用户名转换为小写的计算属性。要在Vue2中实现这一点,请向选项对象添加一个计算字段。从这里开始,可以像这样定义属性...exportdefault{//..computed:{lowerCaseUsername(){returnthis.username.toLowerCase()}}}Vue3的设计允许开发人员导入他们使用的内容,而无需导入任何不必要的内容项目包。本质上,他们不希望开发人员包含从未使用过的东西,这已成为Vue2中日益严重的问题。因此,要在Vue3中使用computed属性,必须先将computed导入到组件中。然后,类似于之前创建反应数据的方式,将一段反应数据转化为计算值,如下:import{reactive,onMounted,computed}from'vue'exportdefault{props:{title:String},setup(){conststate=reactive({username:'',password:'',lowerCaseUsername:computed(()=>state.username.toLowerCase())})//...}AccessPropsAccessProps给Vue2带来了一个重要的区别Vue3和Vue3-这意味着完全不同的东西。在Vue2中,this几乎总是指组件,而不是特定的属性。虽然这使事情表面上很容易,但它使类型支持变得很痛苦。然而,props可以很容易地访问-只需添加一个小例子,比如在挂载钩子期间打印出titleprop:mounted(){console.log('title:'+this.title)}但在Vue3中不再使用它访问道具、触发事件和获取属性。相反,setup()方法采用两个参数:props-对组件propscontext的不可变访问-Vue3公开的上下文选择属性(emit、slot、attrs)。使用props参数,上面的代码将如下所示。mounted(){console.log('title:'+this.title)}触发事件同样,在Vue2中触发事件非常简单,但Vue3对如何访问属性/方法提供了更多控制。这个例子想要在按下“提交”按钮时触发父组件的登录事件。Vue2代码只需要调用this.$emit并传入payload对象即可。login(){this.$emit('login',{username:this.username,password:this.password})}但是,在Vue3中,this现在具有不同的含义,因此必须进行一些更改。幸运的是,文本对象公开了emit,提供了与this.$emit相同的东西。您所要做的就是将context添加为setup方法的第二个参数。c-text对象将被破坏,使代码更简洁。然后,只需调用emit即可触发事件。和以前一样,emit方法有两个参数:有效负载对象随事件一起传递的事件名称setup(props,{emit}){//...constlogin=()=>{emit('login',{username:state.username,password:state.password})}//...}Vue2和Vue3的最终代码很棒!它处于最后阶段。Vue2和Vue3中的所有概念都是相同的,但是一些访问属性的方式发生了一些变化。总的来说,我认为Vue3将帮助开发人员编写更有条理的代码——尤其是在大型代码库中。这主要是因为组合API允许根据特定功能对代码进行分组,甚至可以将功能提取到自己的文件中,并根据需要将它们导入到组件中。下面是Vue2中的表单组件代码。下面是Vue3的。希望本教程能够帮助解决了Vue代码在Vue3中的一些不同之处。