专栏首页前端有的玩使用Vue3.0,我收获了哪些知识点(一)

使用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进行安装

使用脚手架新建项目

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

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

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

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

然后回车

  • 然后提示选择Vue版本,选择3.x(Preview)
  • 然后提示Use Babel alongside TypeScript,输入y`
  • 然后css预处理器选择Less
  • 然后是Lint on saveIn dedicater config files

启动项目

新建完项目之后,进入到项目中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

安装依赖

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

配置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" }
    ]
  ]
};

尝试使用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-input
        v-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-button
        type="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.0Composition API,对于Componsition API,可以说是两极分化特别严重,一部分人特别喜欢这个新的设计与开发方式,而另一部分人则感觉使用Composition API很容易写出来意大利面式的代码(可能这部分人不知道兰州拉面吧)。到底Composition API是好是坏,小编不做评论,反正我只是一个搬砖的。而本小节介绍的setup就是Composition API的入口。

setup介绍

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

setup 的参数说明

setup函数有两个参数,分别是propscontext

props

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

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>

context

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

  • attrs attrsVue2.0this.$attrs是一样的,即外部传入的未在props中定义的属性。对于attrsprops一样,我们不能对attrs使用es6的解构,必须使用attrs.name的写法
  • emit emit对应的是Vue2.0this.$emit, 即对外暴露事件。

setup 返回值

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

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

了解Composition API,先从reactiveref开始

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

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

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

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

现在我们先了解一下Compositon API中的reactiveref

介绍reactive

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

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

<template>
  <div>
    <div>姓名:{{ state.name }}</div>
    <div>公众号:{{ state.gzh }}</div>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      name: "子君"
    });
    // 5秒后新增属性gzh 前端有的玩
    setTimeout(() => {
      state.gzh = "前端有的玩";
    }, 1000 * 5);
    return {
      state
    };
  }
};
</script>

上面的例子虽然在state中并没有声明gzh属性,但是在5s后我们可以直接给state添加gzh属性,这时候并不需要使用Vue.set来解决新增属性无法响应的问题。

在上面的代码中,reactive通过传入一个对象然后返回了一个state,需要注意的是state与传入的对象是不用的,reactive对原始的对象并没有进行修改,而是返回了一个全新的对象,返回的对象是Proxy的实例。需要注意的是在项目中尽量去使用reactive返回的响应式对象,而不是原始对象。

const obj = {}
const state = reactive(obj)
// 输出false
console.log(obj === state)

介绍ref

假如现在我们需要在一个函数里面声明用户的信息,那么我们可能会有两种不一样的写法

// 写法1
let name = '子君'
let gzh = '前端有的玩'
// 写法2
let userInfo = {
  name: '子君',
  gzh: '前端有的玩'
}

上面两种不同的声明方式,我们使用的时候也是不同的,对于写法1我们直接使用变量就可以了,而对于写法2,我们需要写成userInfo.name的方式。我们可以发现userInfo的写法与reactive是比较相似的,而Vue3.0也提供了另一种写法,就像写法1一样,即ref。先来看一个例子。

<template>
  <div>
    <div>姓名:{{ name }}</div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref("子君");
    console.log('姓名',name.value)
    // 5秒后修改name为 前端有的玩
    setTimeout(() => {
      name.value = "前端有的玩";
    }, 1000 * 5);
    return {
      name
    };
  }
};
</script>

通过上面的代码,可以对比出来reactiveref的区别

  1. reactive传入的是一个对象,返回的是一个响应式对象,而ref传入的是一个基本数据类型(其实引用类型也可以),返回的是传入值的响应式值
  2. reactive获取或修改属性可以直接通过state.prop来操作,而ref返回值需要通过name.value的方式来修改或者读取数据。但是需要注意的是,在template中并不需要通过.value来获取值,这是因为template中已经做了解套。

Vue3.0优雅的使用v-model

v-model并不是vue3.0新推出的新特性,在Vue2.0中我们已经大量的到了v-model,但是V3V2还是有很大的区别的。本节我们将主要为大家带来如何在Vue3.0中使用v-model,Vue3.0中的v-model提供了哪些惊喜以及如何在Vue3.0中自定义v-model

Vue2.0Vue3.0中使用v-model

Vue2.0中如何实现双向数据绑定呢?常用的方式又两种,一种是v-model,另一种是.sync,为什么会有两种呢?这是因为一个组件只能用于一个v-model,但是有的组件需要有多个可以双向响应的数据,所以就出现了.sync。在Vue3.0中为了实现统一,实现了让一个组件可以拥有多个v-model,同时删除掉了.sync。如下面的代码,分别是Vue2.0Vue3.0使用v-model的区别。

Vue2.0中使用v-model

<template>
  <a-input v-model="value" placeholder="Basic usage" />
</template>
<script>
export default {
  data() {
    return {
      value: '',
    };
  },
};
</script>

Vue3.0中使用v-model

<template>
  <!--在vue3.0中,v-model后面需要跟一个modelValue,即要双向绑定的属性名-->
  <a-input v-model:value="value" placeholder="Basic usage" />
</template>
<script>
export default {
  // 在Vue3.0中也可以继续使用`Vue2.0`的写法
  data() {
    return {
      value: '',
    };
  },
};
</script>

vue3.0中,v-model后面需要跟一个modelValue,即要双向绑定的属性名,Vue3.0就是通过给不同的v-model指定不同的modelValue来实现多个v-model。对于v-model的原理,下文将通过自定义v-model来说明。

自定义v-model

使用Vue2.0自定义一个v-model示例
  1. 组件代码
<template>
  <div class="custom-input">
    <input :value="value" @input="$_handleChange" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    $_handleChange(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

在代码中使用组件

<template>
	  <custom-input v-model="value"></custom-input>
</template>
<script>
 export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

Vue2.0中我们通过为组件设置名为value属性同时触发名为input的事件来实现的v-model,当然也可以通过model来修改属性名和事件名,可以看我以前的文章中有详解。

使用Vue3.0自定义一个v-model示例

组件代码

<template>
  <div class="custom-input">
    <input :value="value" @input="_handleChangeValue" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  name: "CustomInput",
  setup(props, { emit }) {
    function _handleChangeValue(e) {
      // vue3.0 是通过emit事件名为 update:modelValue来更新v-model的
      emit("update:value", e.target.value);
    }
    return {
      _handleChangeValue
    };
  }
};
</script>

到了Vue3.0中,因为一个组件支持多个v-model,所以v-model的实现方式有了新的改变。首先我们不需要使用固定的属性名和事件名了,在上例中因为是input输入框,属性名我们依然使用的是value,但是也可以是其他任何的比如name,data,val等等,而在值发生变化后对外暴露的事件名变成了update:value,即update:属性名。而在调用组件的地方也就使用了v-model:属性名来区分不同的v-model

在代码中使用组件
<template>
 <!--在使用v-model需要指定modelValue-->
 <custom-input v-model:value="state.inputValue"></custom-input>
</template>
<script>
import { reactive } from "vue";
import CustomInput from "../components/custom-input";
export default {
 name: "Home",
 components: {
    CustomInput
  },
  setup() {
 const state = reactive({
 inputValue: ""
    });
 return {
      state
    };
  }
};
</script>

总结

在本文中我们主要讲解了开发环境的搭建,setup,reactive,ref,v-model等的介绍,同时通过对比Vue3.0Vue2.0的不同,让大家对Vue3.0有了一定的了解,在下文中我们将为大家带来更多的介绍,比如技术属性,watch,生命周期等等,敬请期待。本文首发于公众号【前端有的玩】,学习Vue,面试刷题,尽在【前端有的玩】,乘兴裸辞心甚爽,面试工作屡遭难。 幸得每日一题伴,点击关注莫偷懒。,下周一新文推送,不见不散。

结语

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高

本文分享自微信公众号 - 前端有的玩(gh_918bae0a9616),作者:前端进击者

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Vue3.0,我收获了哪些知识点(二)

    最近在工作之余一直学习Vue3.0相关知识,虽然Vue3.0至今还是rc版,但这并不影响我们去学习。今天这篇文章是我关于Vue3.0的第四篇文章。在前文中我们讲...

    用户1308196
  • 最强Vue3.0新特性讲解,99%的人都觉得很赞!

    2020年4月前端开发框架Vue发布了3.0-Beta版本,9月发布正式版。 纳尼?2.0还没玩转,3.0的时代就来了???

    pingan8787
  • 2021年,vue3.0 面试题分析(干货满满,内容详尽)

    2020年09月18日,vue3.0正式发布。随着它的发布,Vue.js再次被推上了前端的风口浪尖。 同时,面试官的提问也将加入一些有关Vue3.0的新元素(...

    winty
  • 茶余饭后聊聊 Vue3.0 响应式数据那些事儿

    "别再更新了,实在是学不动了"这句话道出了多少前端开发者的心声,"不幸"的是 Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本,这意味...

    政采云前端团队
  • 全网首发:Vue3.0+Vite避坑指南!升级后有新增了哪些看点?

    Vue2.0 全线升级,升级后的新版本 Vue3.0 凭借新特性,新工具,一经问世便在 IT 圈中引起广泛的讨论:

    用户3806669
  • 千层套路 - Vue 3.0 初始化源码探秘

    9 月初 Vue.js 3.0 正式发布,代号 "One Piece"。大秘宝都摆到眼巴前了,再不扒拉扒拉就说不过去了。那我们就从初始化开始。

    若川
  • Vue3diff算法原理和优化

    你知道 Vue3.0 Object.difineProperty和vue3.0的proxy的区别吗?

    前端迷
  • vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用

    前两讲,我们已经顺利的使用 vue3.0 将项目跑起来了。但是实在是过于简陋,目前我们几乎不可能开发只有一个页面的应用。因此,vue-router 是必不可少的...

    FungLeo
  • 为什么 Vue3.0 要重写响应式系统

    面试的时候经常被问到 响应式 相关的内容,而Vue3.0 更新后,面试官又有了新的武器;

    西岭老湿
  • vue3.0 Composition API 上手初体验 构建基本项目开发环境

    目前,vue3.0 已经进入了 beta 版本了。众多的特性已经定下来了,相信有不少朋友都已经开始阅读相关的资料或源码了。

    FungLeo
  • 「小议」 我从读源码中收获到了什么?阅读源码那点小事

    说到源码,大家脑海里可能浮现出四个字 我太难了???。读源码貌似和我们遥不可及,因为在日常工作中,我们基本掌握在熟练的程度上,就能够满足工作需求,即便是想看源码...

    用户6835371
  • vue3.0 源码解析一 :响应式原理(上)

    从本文开始,我们正式进入vue3.0 源码解析流程。个人觉得从ceateApp入手并不是最佳的学习方案,所以我们先从composition-api响应式原理入手...

    用户6835371
  • 顺藤摸瓜,突然有点心疼尤雨溪,写vue3太难了

    就在前天凌晨6点多,我在公众号上推送了一篇文 《尤雨溪:Vue3.0全球发布会在线视频》,没看过的戳标题回顾,真的建议有空多看几遍,重温下尤大帅气的脸庞,才是最...

    闰土大叔
  • Vue3.0 新特性以及使用变更总结(实际工作用到的)

    Vue3.0 在去年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发,这篇文章就是在使用后的一个总结, 包含Vu...

    @超人
  • 《Vue3.0抢先学》系列之:网友们都惊呆了!

    今天开始,我想给大家讲点新东西。大家不用大喊学不动,请放松心情随意观看,我也讲不出什么很深奥难学的东西,本系列文章都会是些比较浅显易懂的家常内容。

    一斤代码
  • vue3.0项目搭建详解

    在搭建vue3.0之前,我们首先来收悉一下vue3.0相比vue2.0做了那些改进,增加了那些特性。

    用户9032532
  • 关于 Vue 3.0,前端开发者必须知道的不仅仅是Proxy...

    前端早已经不是之前人们口中的 “抠图仔”、只是写写简单的 HTML,CSS 和脚本动画。如今的前端早已经系统化,工程化,前后端分离的开发模式带动前端工程师在开发...

    Phodal
  • vue3全局弹框组件|vue3.0自定义插件实例

    目前市面上有些大厂已经推出了Vue3组件库,如:有赞Vant3、饿了么Element-Plus及阿里Ant-design-vue2.0,大家感兴趣的可以去看看。

    andy2018
  • Vue3.0 之 Proxy

    前端技术在最近十年的时间里飞速发展,一方面是移动互联网的兴起,带动移动端浏览器用户需求的飞速增加,另一方面是Angular、React、Vue等框架和Node....

    grain先森

扫码关注云+社区

领取腾讯云代金券