Vue2.x和Vue3.x使用上的差异对比-示例

Posted 2021-12-14 JackieDYH

 template组件

Vue2和Vue3的template非常相似。

Vue3支持碎片(Fragments)，在组件可以拥有多个根节点，新特性可以减少很多组件之间的div包裹元素

Vue2.x-template组件

<template>
  <div class='form-element'>
    <h2>  title  </h2>
    <input type='text' v-model='username' placeholder='Username' />
    
    <input type='password' v-model='password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values:  username + ' ' + password 
    </p>
  </div>
</template>


<template>
  <div class='form-element'>
    <h2>  state.title  </h2>
    <input
     type='text'
     v-model='state.username'
     placeholder='Username'
    />
    
    <input
     type='password'
     v-model='state.password'
     placeholder='Password'
    />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values:  state.username + ' ' + state.password 
    </p>
  </div>
</template>

data部分差异

Vue2与Vue3 最大的区别

Vue2使用选项类型API（Options API）

选项型API在代码里分割了不同的属性（properties）：data，computed属性，methods，等等

Vue3合成型API（Composition API）

合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

Vue2.x

export default 
  props: 
    title: String
  ,
  data () 
    return 
      username: '',
      password: ''
    
  

Vue3.x

需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发

import  reactive  from 'vue'

export default 
  props: 
    title: String
  ,
  setup () 
    const state = reactive(
      username: '',
      password: ''
    )

    return  state 
  



// 通过state.username和state.password获得数据的值

Vue2.x VS Vue3.x - methods

// vue2.x
export default 
  props: 
    title: String
  ,
  data () 
    return 
      username: '',
      password: ''
    
  ,
  methods: 
    login () 
      // 登陆方法
    
  



// vue3.x
export default 
  props: 
    title: String
  ,
  setup () 
    const state = reactive(
      username: '',
      password: ''
    )

    const login = () => 
      // 登陆方法
    
    return  
      login,
      state
    
  

生命周期函数对比 Hooks

// vue2.x
export default 
  props: 
    title: String
  ,
  data () 
    return 
      username: '',
      password: ''
    
  ,
  mounted () 
    console.log('组件已挂载')
  ,
  methods: 
    login () 
      // login method
    
  


// vue3.x
import  reactive, onMounted  from 'vue'

export default 
  props: 
    title: String
  ,
  setup () 
    // ..

    onMounted(() => 
      console.log('组件已挂载')
    )

    // ...
  

计算属性

// vue2.x
export default 
  // .. 
  computed: 
    lowerCaseUsername () 
      return this.username.toLowerCase()
    
  


// vue3.x
import  reactive, onMounted, computed  from 'vue'

export default 
  props: 
    title: String
  ,
  setup () 
    const state = reactive(
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    )

    // ...
  

Props

接收组件props参数传递这一块为我们带来了Vue2和Vue3之间最大的区别。—this在vue3中与vue2代表着完全不一样的东西
Vue2，this代表的是当前组件，不是某一个特定的属性

Vue3 中，this无法直接拿到props属性，emit events（触发事件）和组件内的其他属性。不过全新的setup()方法可以接收两个参数：
props - 不可变的组件参数
context - Vue3 暴露出来的属性（emit，slots，attrs）

// vue2.x
mounted () 
    console.log('title: ' + this.title)


// vue3.x
setup (props) 
    // ...

    onMounted(() => 
      console.log('title: ' + props.title)
    )

    // ...

事件 Events

// vue2.x
login () 
      this.$emit('login', 
        username: this.username,
        password: this.password
      )
 

// vue3.x
setup (props,  emit ) 
    // ...

    const login = () => 
      emit('login', 
        username: state.username,
        password: state.password
      )
    

    // ...

---

代码对比

// vue2.x
<template>
  <div class='form-element'>
    <h2>  title  </h2>
    <input type='text' v-model='username' placeholder='Username' />
    
    <input type='password' v-model='password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values:  username + ' ' + password 
    </p>
  </div>
</template>
<script>
export default 
  props: 
    title: String
  ,
  data () 
    return 
      username: '',
      password: ''
    
  ,
  mounted () 
    console.log('title: ' + this.title)
  ,
  computed: 
    lowerCaseUsername () 
      return this.username.toLowerCase()
    
  ,
  methods: 
    login () 
      this.$emit('login', 
        username: this.username,
        password: this.password
      )
    
  

</script>



// vue3.x
<template>
  <div class='form-element'>
    <h2>  state.title  </h2>
    <input type='text' v-model='state.username' placeholder='Username' />
    
    <input type='password' v-model='state.password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values:  state.username + ' ' + state.password 
    </p>
  </div>
</template>
<script>
import  reactive, onMounted, computed  from 'vue'

export default 
  props: 
    title: String
  ,
  setup (props,  emit ) 
    const state = reactive(
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    )

    onMounted(() => 
      console.log('title: ' + props.title)
    )

    const login = () => 
      emit('login', 
        username: state.username,
        password: state.password
      )
    

    return  
      login,
      state
    
  

</script>