|
|
51CTO旗下网站
|
|
移步端
  • 详细教程:在Vue2和Vue3官方构建相同的组件

    在本文的最终,名将介绍Vue2和Vue3之间的首要编程差异,赞助大家了解,逐渐变成更好的支出人员。

    笔者:读芯术 来源:当日第一| 2020-03-25 18:23

    过去,咱们看过很多份量大变革即将来临的篇章,但是并没有实际深入研究代码将如何变化。

    为了展示这些变迁,小芯将在Vue2和Vue3官方构建一个简单的表单组件。

    在本文的最终,名将介绍Vue2和Vue3之间的首要编程差异,赞助大家了解,逐渐变成更好的支出人员。

    如果想知道如何建立第一个Vue3使用程序,请查看初学者的Vue3Alpha使用程序指南。

    咱们开始吧!

    创造模板

    对于绝大多数组件,Vue2和Vue3中的代码即使不完整相同,也是异样相似之。但是,Vue3支持片段,这意味着组件可以有多个底节点。

    这在呈现列表中的组件以删除不必要的包裹器div元素时特别有用。但是,在资金例中,表单组件的两个本子都将只保留一个根节点。

          
    1. <template> 
    2.   <div> 
    3.     <h2> {{ title }} </h2> 
    4.     <input type='text'v-model='username' placeholder='Username' /> 
    5.     
    6.     <input type='password'v-model='password' placeholder='Password' /> 
    7.     <button @click='login'> 
    8.       Submit 
    9.     </button> 
    10.     <p> 
    11.       Values: {{ username + ' ' +password }} 
    12.     </p> 
    13.   </div> 
    14. </template> 

    唯一真正的分别是如何访问数据。在Vue3官方,呼唤式数据都封装在一番响应状态变量中,故此需要访问这个状态变量来获得值。

          
    1. <template> 
    2.   <div> 
    3.     <h2> {{ state.title }}</h2> 
    4.     <input type='text'v-model='state.username' placeholder='Username' /> 
    5.     
    6.     <input type='password'v-model='state.password' placeholder='Password' /> 
    7.     <button @click='login'> 
    8.       Submit 
    9.     </button> 
    10.     <p> 
    11.       Values: {{ state.username + ' ' +state.password }} 
    12.     </p> 
    13.   </div> 
    14. </template> 

    安装数据

    这就是首要的分别——Vue2慎选API对战Vue3重组API。

    慎选 API名将代码分成不同之习性:数量、计算属性、办法等等。同时,重组API兴许根据函数而不是属性类型对代码进行分组。

    对于表单组件,只有两个数据属性:一度username和一个password。

    Vue2代码看起来是这样的——只需在数量属性中放入两个值。

          
    1. exportdefault { 
    2.   props: { 
    3.     title: String 
    4.   }, 
    5.   data () { 
    6.     return { 
    7.       username: '', 
    8.       password: '' 
    9.     } 
    10.   } 

    在Vue3.0官方,必须投入更多精力来行使一个新的setup()办法,整整的组件初始化都应当在这个艺术中展开。

    此外,为了让开发人员更好地掌握响应,可以直接访问Vue的呼唤API。

    创造响应式数据需要三个步骤:

  • 副vue官方导入reactive
  • 采用响应式方法声明数据
  • 采用setup办法返回响应式数据以便模板可以访问
  • 代码看起来有点像这样。

          
    1. import {reactive } from 'vue' 
    2.  
    3. export default { 
    4.   props: { 
    5.     title: String 
    6.   }, 
    7.   setup () { 
    8.     const state = reactive({ 
    9.       username: '', 
    10.       password: '' 
    11.     }) 
    12.      
    13.     return { state } 
    14.   } 

    接着在模板中,可以运用诸如state.username和state.password寻访问

    在Vue2和Vue3官方创造方法

    Vue2慎选API有一度单独的主意部分。这部分可以定义所有的主意,并以任何想要的措施展开组织。

          
    1. exportdefault { 
    2.   props: { 
    3.     title: String 
    4.   }, 
    5.   data () { 
    6.     return { 
    7.       username: '', 
    8.       password: '' 
    9.     } 
    10.   }, 
    11.   methods: { 
    12.     login () { 
    13.       // login method 
    14.     } 
    15.   } 

    Vue3重组API中的setup办法也得以处理。他的上班原理与声明数据有些类似——必须先声明方法,下一场返回,以便组件的任何一些可以访问它。

          
    1. exportdefault { 
    2.   props: { 
    3.     title: String 
    4.   }, 
    5.   setup () { 
    6.     const state = reactive({ 
    7.       username: '', 
    8.       password: '' 
    9.     }) 
    10.     const login = () => { 
    11.       // login method 
    12.     } 
    13.     return { 
    14.       login, 
    15.       state 
    16.     } 
    17.   } 

    生命周期挂钩

    Vue2可以直接从组件选项中访问生命周期挂钩。以下示例代码将拭目以待挂载的风波。

          
    1. exportdefault { 
    2.   props: { 
    3.     title: String 
    4.   }, 
    5.   data () { 
    6.     return { 
    7.       username: '', 
    8.       password: '' 
    9.     } 
    10.   }, 
    11.   mounted () { 
    12.     console.log('component mounted') 
    13.   }, 
    14.   methods: { 
    15.     login () { 
    16.       // login method 
    17.     } 
    18.   } 

    如今有了Vue3 重组API,几乎全部东西都在setup()办法中,包括挂载的生命周期挂钩。

    然而,生命周期挂钩在默认情况下并不包括在内,故此必须导入在Vue3官方把称为onmount的主意。这看起来与前面导入reactive是一样的。

    下一场,在setup办法中,穿过传递函数来行使onmount办法。

          
    1. import {reactive, onMounted } from 'vue' 
    2.  
    3. export default { 
    4.   props: { 
    5.     title: String 
    6.   }, 
    7.   setup () { 
    8.     // .. 
    9.      
    10.     onMounted(() => { 
    11.       console.log('component mounted') 
    12.     }) 
    13.      
    14.     // ... 
    15.   } 

    computed属性

    补充一个computed属性,名将用户名转换为小写字母。

    为了在Vue2官方贯彻这一点,向选项对象添加一个computed字段。副此间,可以像这样定义属性…

          
    1. exportdefault { 
    2.   // .. 
    3.   computed: { 
    4.     lowerCaseUsername () { 
    5.       return this.username.toLowerCase() 
    6.     } 
    7.   } 

    Vue3的计划允许开发人员导入他们运用的东西,并且项目中没有不必要的包。实质上,她们不指望开发人员包含从未利用过的东西,这而这在Vue2官方已经化为一个日益严重的题材。

    故此,要在Vue3官方采用computed属性,第一必须将computed导入到组件中。

    下一场,与事先创建响应式数据的措施类似,名将一段响应式数据变成一个计算值,如下所示:

          
    1. import {reactive, onMounted, computed } from 'vue' 
    2.  
    3. export default { 
    4.   props: { 
    5.     title: String 
    6.   }, 
    7.   setup () { 
    8.     const state = reactive({ 
    9.       username: '', 
    10.       password: '', 
    11.       lowerCaseUsername: computed(()=> state.username.toLowerCase()) 
    12.     }) 
    13.      
    14.     // ... 
    15.   } 

    走访Props

    走访道具带来了Vue2和Vue3之间的一个重要区别——this意味着完全不同之东西。

    在Vue2官方,this几乎总是指向组件,而不是一定的习性。虽然这使工作表面上很容易,但他使类型支持成为一种切肤之痛。

    然而,可以很容易地走访props——只需添加一个小例子,比如在挂载挂钩期间打印出title prop:

          
    1. mounted() { 
    2.     console.log('title: ' + this.title) 

    但是在Vue3官方不再利用它来访问props、触发事件和获取属性。相反,setup()办法有两个参数:

  • props - 对组件props的不可变访问
  • context - Vue3公开的上下文选择属性(emit、slot、attrs)
  • 采用props数,地方的编码将如下所示。

          
    1. mounted() { 
    2.     console.log('title: ' + this.title) 

    触发事件

    类似地,在Vue2官方触发事件非常简单,但是Vue3对如何访问属性/办法提供了更多控制。

    资本例希望在按下“Submit”按钮时接触父组件的一个登录事件。

    Vue2代码只要求征用this.$emit并传入有效负载对象。

          
    1. login (){ 
    2.       this.$emit('login', { 
    3.         username: this.username, 
    4.         password: this.password 
    5.       }) 
    6.  } 

    然而在Vue3官方,this如今含义不同了,得做出一点改变。

    侥幸的是,文本对象公开了emit,提供了与this.$emit相同的东西

    所要做的就是添加context表现setup办法的第二个参数。名将对c文本对象进行析构,使代码更简洁。

    下一场,只需调用emit来触发事件。与前面一样,emit办法有两个参数:

  • 事件名称
  • 与事件一起传递的得力负载对象
  •       
    1. setup(props, { emit }) { 
    2.     // ... 
    3.    
    4.     const login = () => { 
    5.       emit('login', { 
    6.         username: state.username, 
    7.         password: state.password 
    8.       }) 
    9.     } 
    10.      
    11.     // ... 

    Vue2和Vue3的最终代码

    太棒了!已经到了最终阶段。

    Vue2和Vue3中的所有概念都是相同的,但是访问属性的组成部分艺术发生了某些变化。

    看来,作者以为Vue3名将救助开发人员编制更有集体的编码——特别是在大型代码库中。这第一是因为组成API兴许根据特定的性状将代码分组,甚至可以将功能提取到它们自己之公文中,并根据要求将它们导入到组件中。

    下是Vue2中的表单组件代码。

          
    1. <template> 
    2.   <div> 
    3.     <h2> {{ title }} </h2> 
    4.     <input type='text'v-model='username' placeholder='Username' /> 
    5.     
    6.     <input type='password'v-model='password' placeholder='Password' /> 
    7.        
    8.     <button @click='login'> 
    9.       Submit 
    10.     </button> 
    11.     <p> 
    12.       Values: {{ username + ' ' +password }} 
    13.     </p> 
    14.   </div> 
    15. </template> 
    16. <script> 
    17. export default { 
    18.   props: { 
    19.     title: String 
    20.   }, 
    21.   data () { 
    22.     return { 
    23.       username: '', 
    24.       password: '' 
    25.     } 
    26.   }, 
    27.   mounted () { 
    28.     console.log('title: ' + this.title) 
    29.   }, 
    30.   computed: { 
    31.     lowerCaseUsername () { 
    32.       return this.username.toLowerCase() 
    33.     } 
    34.   }, 
    35.   methods: { 
    36.     login () { 
    37.       this.$emit('login', { 
    38.         username: this.username, 
    39.         password: this.password 
    40.       }) 
    41.     } 
    42.   } 
    43. </script> 

    下是Vue3的。

          
    1. <template> 
    2.   <div> 
    3.     <h2> {{ state.title }}</h2> 
    4.     <input type='text'v-model='state.username' placeholder='Username' /> 
    5.     
    6.     <input type='password'v-model='state.password' placeholder='Password' /> 
    7.        
    8.     <button @click='login'> 
    9.       Submit 
    10.     </button> 
    11.     <p> 
    12.       Values: {{ state.username + ' ' +state.password }} 
    13.     </p> 
    14.   </div> 
    15. </template> 
    16. <script> 
    17. import { reactive, onMounted, computed } from 'vue' 
    18.  
    19. export default { 
    20.   props: { 
    21.     title: String 
    22.   }, 
    23.   setup (props, { emit }) { 
    24.     const state = reactive({ 
    25.       username: '', 
    26.       password: '', 
    27.       lowerCaseUsername: computed(()=> state.username.toLowerCase()) 
    28.     }) 
    29.      
    30.     onMounted(() => { 
    31.       console.log('title: ' +props.title) 
    32.     }) 
    33.      
    34.     const login = () => { 
    35.       emit('login', { 
    36.         username: state.username, 
    37.         password: state.password 
    38.       }) 
    39.     } 
    40.      
    41.     return { 
    42.       login, 
    43.       state 
    44.     } 
    45.   } 
    46. </script> 

    瞩望本学科能够帮助了解Vue代码在Vue3中的一些不同的处。

    【义务编辑: 赵宁宁 TEL:(010)68476606】

    点赞 0
  • Vue2  Vue3  组件
  • 分享:
    大家都在看
    猜你喜欢
  • 订阅专栏+更多

     迅速无敌之 Gitlab CI 接轨集成

    迅速无敌之 Gitlab CI 接轨集成

    打破运维与科研壁垒
    共5章 | KaliArch

    91人口订阅学习

    秒杀高并发白话实战

    秒杀高并发白话实战

    主流高并发架构
    共15章 | 51CTO崔皓

    59人口订阅学习

    网络排障一点通

    网络排障一点通

    网络排障及优化调整案例
    共20章 | 捷哥CCIE

    465人口订阅学习

    订阅51CTO邮刊

    点击这里查看样刊

    订阅51CTO邮刊

    51CTO劳务号

    51CTO官微


  •     
  •