Vue2和Vue3开发组件有什么区别

Bertha 。 2022-10-04 15:00 169阅读 0赞

**Vue2 template**

**Vue3 template**

在Vue3的唯一真正的不同在于数据获取。Vue3中的`反应数据（Reactive Data）`是包含在一个`反应状态（Reactive State）`变量中。— 所以我们需要访问这个反应状态来获取数据值。

--------------------

## **建立数据 `data`** ##

**Vue2** \- 这里把两个数据放入data属性中

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

**Vue3.0** 新的`setup()`方法

import { reactive } from 'vue'
    
    export default {
      props: {
        title: String
      },
      setup () {
        const state = reactive({
          username: '',
          password: ''
        })
    
        return { state }
      }
    }

--------------------

**Vue2 method编写**

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

**Vue3 method编写（**`setup()`方法也是可以用来操控methods的，记得`返回(return)`**）**

export default {
      props: {
        title: String
      },
      setup () {
        const state = reactive({
          username: '',
          password: ''
        })
    
        const login = () => {
          // 登陆方法
        }
        return { 
          login,
          state
        }
      }
    }

--------------------

## **Vue2生命周期钩子(**`（mounted）`生命周期触发钩子**)** ##

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

### **Vue3生命周期钩子(**`setup()`方法可以包含了基本所有东西**)** ###

import { reactive, onMounted } from 'vue'
    
    export default {
      props: {
        title: String
      },
      setup () {
        // ..
    
        onMounted(() => {
          console.log('组件已挂载')
        })
    
        // ...
      }
    }

--------------------

### **Vue2计算属性** ###

export default {
      // .. 
      computed: {
        lowerCaseUsername () {
          return this.username.toLowerCase()
        }
      }
    }

### **Vue3计算属性(Vue3** 的设计模式给予开发者们按需引入需要使用的依赖包**)** ###

import { reactive, onMounted, computed } from 'vue'
    
    export default {
      props: {
        title: String
      },
      setup () {
        const state = reactive({
          username: '',
          password: '',
          lowerCaseUsername: computed(() => state.username.toLowerCase())
        })
    
        // ...
      }

--------------------

### **Vue2接收props** ###

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

### **Vue3接收props** ###

setup (props) {
        // ...
    
        onMounted(() => {
          console.log('title: ' + props.title)
        })
    
        // ...
    }

--------------------

### **Vue2事件** ###

login () {
          this.$emit('login', {
            username: this.username,
            password: this.password
          })
     }

### **Vue3事件** ###

setup (props, { emit }) {
        // ...
    
        const login = () => {
          emit('login', {
            username: state.username,
            password: state.password
          })
        }
    
        // ...
    }

真的是太棒了，能看到这里的童鞋们，你们现在基本都看到vue2与vue3其实概念与理念都是一样的。**只是有一些属性获取方式和声名和定义方式稍微变了**。一直在鬼哭狼嚎的小小前端开发猿人们，你们可以松一口气了吧。  
最后我把完成的 **Vue2** 和 **Vue3** 的组件代码发出来给大家：

## **Vue2** ##

<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** ##

<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>

感谢分享[https://zhuanlan.zhihu.com/p/139590941][https_zhuanlan.zhihu.com_p_139590941]

[https_zhuanlan.zhihu.com_p_139590941]: https://zhuanlan.zhihu.com/p/139590941