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

àì夳堔傛蜴生んèń 2022-12-02 11:00 140阅读 0赞

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

总结：

`Vue2 与 Vue 3`其实概念与理念都是一样的。只是有一些属性获取方式和声名和定义方式稍微变了

我觉得 **Vue3** 给我们前端开发者带来了全新的开发体验，更好的使用弹性，可控度也得到了大大的提升。

如果你是一个学过或者接触过 **React** 然后现在想使用Vue的话，应该特别兴奋，因为很多使用方式都和React非常相近了 ！

全新的`合成式API（Composition API）`可以提升代码的解耦程度 —— 特别是大型的前端应用，效果会更加明显。还有就是按需引用的有了更细微的可控性，`让项目的性能和打包大小有更好的控制`

## Vue2写法 ##

<template>
      <div class="home">
        <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>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'Home',
      data(){
        return {
          title: 'vue2',
          username: '',
          password: ''
        }
      },
      methods: {
        login(){
          console.log('111')
        }
      },
      mounted () {
        console.log('组件已挂载')
      },
      computed: {
        lowerCaseUsername () {
          return this.username.toLowerCase()
        }
      }
    }
    </script>

## Vue3写法 ##

<template>
      <div class="home">
        <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>
      </div>
    </template>
    
    <script>
    // 引入合成型API
    import { reactive, onMounted } from 'vue'
    
    export default {
      name: 'Home',
      setup () {
    
        const state = reactive({
          title: 'vue3',
          username: '',
          password: ''
        })
    
        // 登陆方法
        const login = () => {
          console.log('11')
          
        }
    
        onMounted(() => {
          console.log('组件已挂载')
        })
    
        return {
          login,
          state
        }
      }
    }
    </script>

## **接收 Props** ##

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

在 **Vue2**，`this`代表的是当前组件，不是某一个特定的属性。所以我们可以直接使用`this`访问prop属性值。就比如下面的例子在挂载完成后打印处当前传入组件的参数`title`。

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

但是在 **Vue3** 中，`this`无法直接拿到props属性，emit events（触发事件）和组件内的其他属性。不过全新的`setup()`方法可以接收两个参数：

1.  `props` \- 不可变的组件参数
2.  `context` \- Vue3 暴露出来的属性（emit，slots，attrs）

所以在 Vue3 接收与使用props就会变成这样：

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

## **事件 - Emitting Events** ##

在 **Vue2** 中自定义事件是非常直接的，但是在 **Vue3** 的话，我们会有更多的控制的自由度。

举例，现在我们想在点击提交按钮时触发一个`login`的事件。

在 **Vue2** 中我们会调用到`this.$emit`然后传入事件名和参数对象

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

在`setup()`中的第二个参数`content`对象中就有`emit`，这个是和`this.$emit`是一样的。那么我们只要在`setup()`接收第二个参数中使用**分解对象法**取出`emit`就可以在setup方法中随意使用了。

然后我们在`login`方法中编写登陆事件：

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

## Vue2 对比 Vue3的 methods 编写 ##

**Vue2** 的选项型API是把methods分割到独立的属性区域的。我们可以直接在这个属性里面添加方法来处理各种前端逻辑。

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

**Vue3** 的合成型API里面的`setup()`方法也是可以用来操控methods的。创建声名方法其实和声名数据状态是一样的。我们需要先声名一个方法然后在`setup()`方法中`返回(return)`， 这样我们的组件内就可以调用这个方法了。

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

## 生命周期钩子 — Lifecyle Hooks ##

在 **Vue2**，我们可以直接在组件属性中调用Vue的生命周期的钩子。以下使用一个`组件已挂载（mounted）`生命周期触发钩子。

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

现在 **Vue3** 的合成型API里面的`setup()`方法可以包含了基本所有东西。生命周期的钩子就是其中之一！

但是在 Vue3 生周期钩子不是全局可调用的了，需要另外从vue中引入。和刚刚引入`reactive`一样，生命周期的挂载钩子叫`onMounted`。

引入后我们就可以在`setup()`方法里面使用`onMounted`挂载的钩子了。

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

## 计算属性 - Computed Properties ##

我们一起试试添加一个计算属性来转换`username`成小写字母。

在 **Vue2** 中实现，我们只需要在组件内的选项属性中添加即可

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

`Vue3` 的设计模式给予开发者们按需引入需要使用的依赖包。这样一来就不需要多余的引用导致性能或者打包后太大的问题。Vue2就是有这个一直存在的问题。

所以在 Vue3 使用计算属性，我们先需要在组件内引入`computed`。

使用方式就和`反应性数据（reactive data）`一样，在`state`中加入一个计算属性

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

## 数据获取 ##

Vue3中的`反应数据（Reactive Data）`是包含在一个`反应状态（Reactive State）`变量中。

所以我们需要访问这个反应状态来获取数据值。

## 建立数据 data ##

> 这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

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

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

> Vue2和Vue3写法对比：

`vue2数据放在data中`

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

在`Vue3.0`，我们就需要使用一个新的`setup()`方法，此方法在组件初始化构造的时候触发。

为了可以让开发者对反应型数据有更多的控制，我们可以直接使用到 Vue3 的`反应API（reactivity API）`。

使用以下三步来建立`反应性数据`:

1.  从vue引入`reactive`
2.  使用`reactive()`方法来声名我们的数据为反应性数据
3.  使用`setup()`方法来返回我们的反应性数据，从而我们的template可以获取这些反应性数据

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

这里构造的反应性数据就可以被`template`使用，可以通过`state.username`和`state.password`获得数据的值