vue3组件式api

vue3新特性

一、新插件Volar

使用vscode开发vue2项目的小伙伴肯定都认识Vetur这个神级插件。但是在vue3中这个插件就显得捉襟见肘了，比如vue3的多片段这个插件就会报错。

这个时候就需要使用Volar，Volar可以理解为Vue3版本的Vetur，代码高亮，语法提示，基本上Vetur有的它都有。

在vue2中我们一直使用Vue 2 Snippets，在vue3我们推荐使用Vue 3 Snippets，因为它支持vue3的同时完全向前兼容vue2

二、兼容性

vue3固然好用但是我们还是不能盲目追求新东西，在使用vue3开发之前我们需清楚的知道它的兼容性。

vue2 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

vue3 不支持 IE11 及以下版本。

三、创建vue3工程

1、使用vue-cli创建

先安装@vue/cli : npm install -g @vue/cli

创建：vue create vue_test

运行：npm run serve

2、使用vite创建

vite是新一代前端构建工具；

优势：无需打包操作，可快速的冷启动；轻量快速的热重载；真正的按需编译；

步骤：

创建工程：npm init vite-app

安装依赖：npm install …

运行：npm run dev

补充：分析Vue3的工程结构

在main.js中引入的不再是Vue构造函数，引入的是一个名为createApp的工厂函数：

import { createApp } from ‘vue’

创建实例对象-app（类似于Vue2中的vm，但app比vm更“轻”：

createApp(App).mount(‘#app’)

四、vue3双向数据绑定原理的改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

1. defineProperty只能监听某个属性，不能对全对象监听
2. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
3. 可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

五、Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。

vue2

<template>
  <div class='form-element'>
  <h2> {{ title }} </h2>
  </div>
</template>

vue3

<template>
  <div class='form-element'>
  </div>
   <h2> {{ title }} </h2>
</template>

六、Composition API（组合式 API）

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

1.为什么使用组合式api

旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

这个组件最原始的版本是由选项式 API 写成的。如果我们为相同的逻辑关注点标上一种颜色，那将会是这样：

处理相同逻辑关注点的代码被强制拆分在了不同的选项中，位于文件的不同部分。在一个几百行的大组件中，要读懂代码中的一个逻辑关注点，需要在文件中反复上下滚动，这并不理想。另外，如果我们想要将一个逻辑关注点抽取重构到一个可复用的工具函数中，需要从文件的多个不同部分找到所需的正确片段。

而如果用组合式 API 重构这个组件，将会变成下面右边这样：

现在与同一个逻辑关注点相关的代码被归为了一组：我们无需再为了一个逻辑关注点在不同的选项块间来回滚动切换。此外，我们现在可以很轻松地将这一组代码移动到一个外部文件中，不再需要为了抽象而重新组织代码，大大降低了重构成本。

2.具体选择式api与组合式api的代码对比

vue2

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // 登陆方法
    }
  },
  components:{
            "buttonComponent":btnComponent
        },
  computed:{
	  fullName(){
	    return this.firstName+" "+this.lastName;     
	  }
  }
}

vue3

export default {
  props: {
    title: String
  },
  
  setup () {
    const state = reactive({ //数据
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
    })
     //方法
    const login = () => {
      // 登陆方法
    }
    return { 
      login,
      state
    }
  }
}

3.使用组合式api

为了开始使用组合式api，我们首先需要一个可以实际使用它的地方，在vue组件中，我们将此位置称为setup。

新的setup选项在组件被创建之前执行，，被作为组合式api入口。

注意：在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

注意：此刻msg的数据还不是响应式

4.带ref的响应式变量

在vue3.0中，我们可以通过新的ref函数使任何响应式变量在任何地方起作用。如图：

ref接收参数并将其包裹在一个带有value property的对象中返回，然后可以使用该 property访问或者修改响应式变量的值：

import {ref} from "vue";
const atr = ref(1);
console.log(atr);
return{
   atr,
}

将值封装在一个对象中，看似没有必要，但为了保持js中不同数据类型的行为统一；这是必须的。这是因为在js中，number或者string等基本数据类型是通过值而非引用传递的。

5.reactive函数

reactive用来定义引用类型的响应式数据。注意，不能用来定义基本数据类型的响应式数据，不然会报错。

import {reactive} from "vue";
const obj = reactive({
      name:"zhang",
      age:13
 })
 return{
     obj
 }

reactive定义的对象是不能直接使用es6语法解构的，不然就会失去它的响应式，如果硬要解构需要使用toRefs()方法。

6.reactive与ref对比

（1）从定义数据角度对比:

• ref用来定义:基本类型数据。

• reactive用来定义:对象(或数组)类型数据。

  备注: ref也可以用来定义对象(或数组)类型数据，它内部会自动通过reactive转为代理对象。

（2）从原理角度对比:

• ref通过0bject.defineProperty()的get 与set来实现响应式(数据劫持)。
• reactive通过使用Proxy来实现响应式(数据劫持)﹐并通过Reflect操作源对象内部的数据。

（3）从使用角度对比:

• ref定义的数据:操作数据需要.value，读取数据时模板中直接读取不需要.value 。
  )类型数据，它内部会自动通过reactive转为代理对象。

（2）从原理角度对比:

• ref通过0bject.defineProperty()的get 与set来实现响应式(数据劫持)。
• reactive通过使用Proxy来实现响应式(数据劫持)﹐并通过Reflect操作源对象内部的数据。

（3）从使用角度对比:

• ref定义的数据:操作数据需要.value，读取数据时模板中直接读取不需要.value 。
• reactive定义的数据:操作数据与读取数据 均不需要.value。