design php 如何使用ant_使用Vue3.0，我收获了哪些知识点（一）

前端发展百花放，一技未熟百技出。 茫然不知何下手，关注小编胜百书。

近期工作感觉很忙，都没有多少时间去写文章，今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总，通过对本文的阅读，你将可以自己完成Vue3.0环境搭建，同时还会对Vue3.0的一些新的特性进行了解，方便自己进行Vue3.0的学习。本文首发于公众号【前端有的玩】，关注===会了，还有更多面试题等你来刷哦。

本文所有的示例均使用ant design vue2.0实现，关于ant design vue2.0请参考 https://2x.antdv.com/docs/vue/introduce-cn/

初始化环境

在前面的文章中，我们通过vite搭建了一个开发环境，但是实际上现在vite并没有完善到支撑一个完整项目的地步，所以本文我们依然选择使用vue-cli脚手架进行环境搭建。

小编使用的vue-cli版本是4.5.4,如果您的版本比较旧可以通过npm update @vue/cli来升级脚手架版本，如果没有安装可以通过npm install @vue/cli -g进行安装

使用脚手架新建项目

1. 在工作空间打开终端(cmd),然后通过vue create my-vue3-test 命令初始化项目

2. 在第一步先选择Manually select features，进行手动选择功能

3. 然后通过Space和上下键依次选择

   Choose Vue version
   Babel
   TypeScript
   Router
   Vuex
   CSS Pre-processors
   Linter/Formatter
   

   然后回车

   4. 然后提示选择Vue版本，选择3.x(Preview)
   5. Use class-style component syntax?选择n,即输入n然后回车
   6. 然后提示Use Babel alongside TypeScript,输入y`
   7. Use history mode for router输入n
   8. 然后css预处理器选择Less
   9. eslint选择ESLint + Prettier
   10. 然后是Lint on save和In dedicater config files
   11. 最后一路回车即可完成项目搭建

启动项目

新建完项目之后，进入到项目中cd my-vue3-test,然后执行 yarn serve即可启动项目

启动之后即可通过访问http://localhost:8080/访问项目

配置ant design vue

在当前Vue3.0正式版还未发布之际，国内比较出名的前端UI库中率先将Vue3.0继承到自家的UI库中的，PC端主要是ant-design-vue，移动端主要是vant, 本文所有示例代码都会基于ant-design-vue来进行，首先我们先安装ant-design-vue

1. 安装依赖

   yarn add ant-design-vue@2.0.0-beta.6
   yarn add babel-plugin-import -D
   

2. 配置ant-design-vue按需加载

   进入项目根目录，然后打开babel.config.js文件，将里面的内容修改为

   module.exports = {
   presets: ["@vue/cli-plugin-babel/preset"],
   plugins: [
   // 按需加载
       [
   "import",
   // style 为 true 加载 less文件
         { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }
       ]
     ]
   };
   

3. 尝试使用vue3 + antdv来添加一个小页面, 我们直接将views/Home.vue文件里面的代码替换为

   <template>
   <a-form layout="inline" :model="state.form">
   <a-form-item>
   <a-input v-model:value="state.form.user" placeholder="Username">
   <template v-slot:prefix
             ><UserOutlined style="color:rgba(0,0,0,.25)"
           />template>
   a-input>
   a-form-item>
   <a-form-item>
   <a-inputv-model:value="state.form.password"type="password"placeholder="Password"
         >
   <template v-slot:prefix
             ><LockOutlined style="color:rgba(0,0,0,.25)"
           />template>
   a-input>
   a-form-item>
   <a-form-item>
   <a-buttontype="primary":disabled="state.form.user === '' || state.form.password === ''"
           @click="handleSubmit"
         >
           登录
   a-button>
   a-form-item>
   a-form>
   template>
   <script>import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";import { Form, Input, Button } from "ant-design-vue";import { reactive } from "vue";export default {components: {
       UserOutlined,
       LockOutlined,
       [Form.name]: Form,
       [Form.Item.name]: Form.Item,
       [Input.name]: Input,
       [Button.name]: Button
     },
     setup() {const state = reactive({form: {user: "",password: ""
         }
       });function handleSubmit() {console.log(state.form);
       }return {
         state,
         handleSubmit
       };
     }
   };script>
   
   

   然后重启一下项目，就可以发现已经可以正常使用ant-design-vue了。

Vue3.0新体验之setup

对于Vue3.0的问世，最吸引大家注意力的便是Vue3.0的Composition API，对于Componsition API，可以说是两极分化特别严重，一部分人特别喜欢这个新的设计与开发方式，而另一部分人则感觉使用Composition API很容易写出来意大利面式的代码(可能这部分人不知道兰州拉面吧)。到底Composition API是好是坏，小编不做评论，反正我只是一个搬砖的。而本小节介绍的setup就是Composition API的入口。

setup介绍

setup是Vue3.0提供的一个新的属性，可以在setup中使用Composition API,在上面的示例代码中我们已经使用到了setup，在上文代码中我们在setup中通过reactive初始化了一个响应式数据，然后通过return返回了一个对象，对象中包含了声明的响应式数据和一个方法，而这些数据就可以直接使用到了template中了,就像上文代码中的那样。关于reactive，我将会在下一小节为你带来说明。

setup 的参数说明

setup函数有两个参数，分别是props和context。

1. props

   props是setup函数的第一个参数，是组件外部传入进来的属性，与vue2.0的props基本是一致的，比如下面代码

   export  default {
   props: {
   value: {
   type: String,
   default: ""
       }
     },
     setup(props) {
   console.log(props.value)
     }
   }
   

   但是需要注意的是，在setup中，props是不能使用解构的，即不能将上面的代码改写成

   setup({value}) {
   console.log(value)
    }
   

   虽然template中使用的是setup返回的对象，但是对于props，我们不需要在setup中返回，而是直接可以在template使用，比如上面的value，可以直接在template写成

   <custom-component :value="value">custom-component>
   

2. context

   context是setup函数的第二个参数，context是一个对象，里面包含了三个属性，分别是

• attrs

  attrs与Vue2.0的this.$attrs是一样的，即外部传入的未在props中定义的属性。对于attrs与props一样，我们不能对attrs使用es6的解构，必须使用attrs.name的写法

• slots

  slots对应的是组件的插槽，与Vue2.0的this.$slots是对应的,与props和attrs一样，slots也是不能解构的。

• emit

  emit对应的是Vue2.0的this.$emit, 即对外暴露事件。

setup 返回值

setup函数一般会返回一个对象，这个对象里面包含了组件模板里面要使用到的data与一些函数或者事件，但是setup也可以返回一个函数，这个函数对应的就是Vue2.0的render函数，可以在这个函数里面使用JSX，对于Vue3.0中使用JSX，小编将在后面的系列文章中为您带来更多说明。

最后需要注意的是，不要在setup中使用this，在setup中的this和你真正要用到的this是不同的，通过props和context基本是可以满足我们的开发需求的。

了解Composition API，先从reactive和ref开始

在使用Vue2.0的时候，我们一般声明组件的属性都会像下面的代码一样

export  default {
  data() {
return {
name: '子君',
sex: '男'
    }
  }
}

然后就可以在需要用到的地方比如computed,watch,methods,template等地方使用，但是这样存在一个比较明显的问题，即我声明data的地方与使用data的地方在代码结构中可能相距很远，有一种君住长江头，我住长江尾，日日思君不见君，共饮一江水的感觉。而Composition API的诞生的一个很重要的原因就是解决这个问题。在尤大大在关于Composition API的动机中是这样描述解决的问题的:

1. 随着功能的增长，复杂组件的代码变得越来越难以阅读和理解。这种情况在开发人员阅读他人编写的代码时尤为常见。根本原因是 Vue 现有的 API 迫使我们通过选项组织代码，但是有的时候通过逻辑关系组织代码更有意义。
2. 目前缺少一种简洁且低成本的机制来提取和重用多个组件之间的逻辑。

现在我们先了解一下Compositon API中的reactive和ref

介绍reactive

在Vue2.6中， 出现了一个新的api,Vue.observer,通过这个api可以创建一个响应式的对象，而reactive就和Vue.ovserver的功能基本是一致的。首先我们先来看一个例子

<template>

<div>{{ state.name }}div>
template>
<script>import { reactive } from "vue";export default {
  setup() {// 通过reactive声明一个可响应式的对象const state = reactive({name: "子君"
    });// 5秒后将子君修改为 前端有的玩
    setTimeout(() => {
      state.name = "前端有的玩";
    }, 1000 * 5);// 将state添加到一个对象中然后返回return {
      state
    };
  }
};script>

上面的例子就是reactive的一个基本的用法，我们通过上面的代码可以看到reactive和Vue.observer声明可响应式对象的方法是很像的，但是他们之间还是存在一些差别的。我们在使用vue2.0的时候，最常见的一个问题就是经常会遇到一些数据明明修改了值，但是界面却并没有刷新，这时候就需要使用Vue.set来解决，这个问题是因为Vue2.0使用的Object.defineProperty无法监听到某些场景比如新增属性，但是到了Vue3.0中通过Proxy将这个问题解决了，所以我们可以直接在reactive声明的对象上面添加新的属性，一起看看下面的例子

<div><div>姓名:{{ state.name }}div><div>公众号：{{ state.gzh }}div>div>
</template>