VUE3安装使用新特性介绍

VUE3 需要使用 Vue CLI v4.5

安装vue-cli 4.5

npm install -g @vue/cli@next
# OR
yarn global add @vue/cli@next

查看vue版本

vue --version  //查看版本 @vue/cli 4.5.12

创建vue3项目

vue create hello-world //创建一个项目

手动选择

image.png

image.png

vue3新特性

更快 （Proxy重构虚拟dom功能）
更小 （支持tree-shaking，没有用到的方法(代码)最后不会被打包到最终的包中。这可以优化项目体积）
更易于维护 （Function-based API 代替传统的Class API ,摒弃高阶组件。
优势：复用简单，把要复用的逻辑抽取到函数中（如mixin））
更多原生支持 （支持TS 3.0源码使用TS编写（Typescript））
更易于开发使用 （Observer模块已被解压缩到自己的包中，允许使用它）
重写虚拟DOM （patch flag（补丁标记），会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效）
优化插槽生成 （单独重新渲染父组件和子组件）
静态树提升 （这意味着vue3的编译器能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本）
基于Proxy的观察者机制

VUE2与VUE3的区别

创建一个 template

组件来说，大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。

这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候，我们会发现每一个组件都会有个div元素包裹着。就会出现很多层多余的div元素。碎片(Fragments)解决了这个问题。对于有完美强迫症的童鞋“真的时太棒了”。我们这里的例子里就不展示了，用简单的单根节点的组件。

Vue2 表格template

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

---

全局方法现在在app实例上

const app = Vue.createApp({})

app.use

建立数据 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()方法，此方法在组件初始化构造的时候触发。setup()函数是vue3中专门新增的方法，可以理解为Composition Api的入口。在beforecreate之后，create之前执行。

为了可以让开发者对反应型数据有更多的控制，我们可以直接使用到 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获得数据的值。

---

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('组件已挂载')
    })

    // ...
  }
}

---

LifeCycle(Hooks) 3.0当中的生命周期与2.0的生命周期出现了很大的不同：

beforeCreate -> 请使用 setup()

created -> 请使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

计算属性 - 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())
    })

    // ...
  }

---

接收 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
      })
 }

但是在 Vue3中，我们刚刚说过this已经不是和vue2代表着这个组件了，所以我们需要不一样的自定义事件的方式。

那怎么办呀？! ლಠ益ಠ)ლ

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

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

setup (props, { emit }) {
    // ...

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

    // ...
}

---

最终的vue2对比vue3代码

你们现在基本都看到vue2与vue3其实概念与理念都是一样的。只是有一些属性获取方式和声名和定义方式稍微变了。一直在鬼哭狼嚎的小小前端开发猿人们，你们可以松一口气了吧。

总结一下，我觉得 Vue3 给我们前端开发者带来了全新的开发体验，更好的使用弹性，可控度也得到了大大的提升。如果你是一个学过或者接触过 React 然后现在想使用Vue的话，应该特别兴奋，因为很多使用方式都和React非常相近了 ！

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

最后我把完成的 Vue2 和 Vue3 的组件代码发出来给大家：

Vue2

Vue3