作者：Shadeed
译者：前端小智
起源：dmitripavlutin
点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

2021年2月15日Vue 3正式公布!在尤雨溪的申明中，他发表了新框架中最大的变动，并议论了整个Vue团队所做的杰出工作。

长期以来，开发者始终在期待Vue 3发表的真正酷的个性，比方Typescript反对、对大型项目更好的组织、及使Vue应用程序更好的渲染优化。

本文中咱们要做以下的内容，应用组合API构建了两个组件。

开始

有几种不同的选项可用于将Vue 3增加到现有我的项目或创立本人的Vue 3我的项目。

这里，我用本人最喜爱的两个选项：

  1. Vue CLI
  2. Vite

Vue CLI

如果你用过Vue开发，那么很可能应用了Vue CLI来设置我的项目。

首先，咱们必须确保领有Vue CLI的最新版本，能够通过在终端上运行 npm update -g @vue/cli 来做到这一点。

接下来，创立我的项目，运行 vue create <我的项目名>，如果 CLI是最新的，咱们就能够抉择Vue 3。

抉择了Vue 3选项，咱们的应用程序便会构建。 实现后，咱们只须要进入咱们的我的项目，而后运行咱们的Vue利用, 该命令是：

cd <我的项目我>npm run serve

当初，在浏览器中输出http://localhost:8080/，就会看到咱们的应用程序！

Vite

Vite (法语意为 "疾速的"，发音 /vit/) 是一种新型前端构建工具，可能显著晋升前端开发体验，它次要由两局部组成：

  • 一个开发服务器，它利用 原生 ES 模块 提供了 丰盛的内建性能，如速度快到惊人的 模块热更新（HMR）。
  • 一套构建指令，它应用 Rollup 打包你的代码，预配置输入高度优化的动态资源用于生产。

为什么应用 Vite

你当初可能会有疑难？，那么 Vite 与现有的 vue-cli到底有什么不同呢?

因为@ vue-cli / service是在webpack之上构建的，因而它是一个模块捆绑程序，它将在启动，热重载和编译时捆绑整个Vue我的项目。

因为@vue-cli/service是在webpack之上构建的，因而它是一个模块捆绑程序，它将在启动，热重载和编译时捆绑整个Vue我的项目。

Webpack 的工作形式是，它通过解析应用程序中的每一个 import 和 require ，将整个应用程序构建成一个基于 JavaScript 的捆绑包，并在运行时转换文件（例如 Sass、TypeScript、SFC）。

这都是在服务器端实现的，依赖的数量和扭转后构建/从新构建的工夫之间有一个大抵的线性关系。

相同，Vite 不捆绑利用服务器端。相同，它依赖于浏览器对 JavaScript 模块的原生反对（也就是 ES 模块，是一个比拟新的性能）。

浏览器将在须要时通过 HTTP 申请任何 JS 模块，并在运行时进行解决。Vite 开发服务器将按需转换任何文件（如 Sass、TypeScript、SFC）。

这种架构防止了服务器端对整个利用的捆绑，并利用浏览器高效的模块解决，提供了一个显著更快的开发服务器。

提醒：当你对应用程序进行 code-split 和 tree-shake 动时，Vite 的速度会更快，因为它只加载它须要的模块，即便是在开发阶段。这与 Webpack 不同，在 Webpack 中，代码拆分只对生产包无利。

创立第一个Vite我的项目

运行上面命令即可：

npm init vite-app <我的项目名>

而后，咱们只需进入咱们的我的项目文件夹，装置依赖项，而后应用以下命令运行咱们的应用程序:

cd <我的项目名>npm installnpm run dev

当初，如果咱们导航到http://localhost:3000 –咱们应该看到以下应用程序：

一些你应该晓得的Vue Vite个性

1.将我的项目打包到生产中

Vite的一个指标是使Vue的开发和生产尽可能容易。尽管在开发过程中没有捆绑，然而将你的我的项目捆绑到生产中是非常容易的。

你所要做的就是运行npm run build。

如果查看package.json，实现是运行 vite build –与其余构建过程一样，打包后会放在dist文件中。

2.asset 门路

与其余Vue我的项目设置一样，Vite 提供了两种援用asset`的办法。

  1. 绝对路径 - 应用专用文件夹。 这些资源应用/file.extension援用，并且在构建我的项目时将复制到dist文件夹的根目录中。
  2. 相对路径 - 例如，依据文件夹的文件构造来绝对拜访src/assets文件夹中的文件。 构建我的项目时，整个文件夹都将作为_assets搁置在dist文件夹中。

3.内置 Typescript 反对

Vue3 最大的变动之一是应用Typescript重写了外围库，容许依据IDE进行类型检查和更好的谬误音讯。

通过提供对.ts文件和SFC中的<script lang =“ ts”>的内置Typescript反对，Vite再次与Vue 3顺利集成。

了解 Vue3 组件

当初咱们曾经设置好了Vue 3应用程序，并且了解了Vue 3 Vite工具，让咱们来看看这些组件是如何工作的。

Vue 3中最大的变动是引入了组合API。在这个新的构造中，咱们可能依据个性来组织代码，而不是仅仅通过data、computed等来拆散代码。

这容许咱们创立更多模块化、可读性和可伸缩性的代码，因为单个个性的代码都能够在代码的一个区域中编写。

如果关上src/components/HelloWorld.vue文件，咱们将看到与咱们在Vue2中编写的代码看起来雷同的代码-这称为Options API。

<script>export default {  name: 'HelloWorld',  props: {    msg: String  },  data() {    return {      count: 0    }  }}</script>

这很棒，因为在 Vue3 中，咱们依然能够在其中应用 vue2 的语法。

在本教程中，咱们将介绍如何在新的Composition API中实现这一点，并从Options API中辨认出这些变动。

组合API中的响应性数据

咱们首先从vue外围库导入一些货色，以容许咱们创立响应式变量。

import { ref } from 'vue'

而后，让咱们用如下所示的setup函数替换data选项。

import { ref } from 'vue'  export default {    setup () {            return {             }    }  }

这个 setup 办法在组件创立时运行，在这里咱们能够定义所有须要组件应用的响应数据、计算属性、办法等。

还有，该setup办法返回的任何内容都能够在模板中拜访。

应用 ref 创立响应式数据

为了显示这一点，咱们在模板中应用v-model创立一个文本输出。

<template>   <div>     <h2> Filter LearnVue Articles </h2>     <input       type='text'       placeholder='Filter Search'       v-model='query'    />    {{ query }}   </div></template>

咱们应用ref创立响应式query变量，而后从setup办法返回它。

setup () {      const query = ref('')      return {        query      }}

而后，如返回到应用程序，会看到咱们应用Composition API取得了响应式数据。

很好！接下来，咱们在input中增加一个clear按钮，看看如何在Composition API中创立一个办法。

组合API中的办法

在选项 API中，Vue对象中有一个残缺的属性专门用于办法。对于较大的文件，这意味着数据可能在数百行之外的办法中申明，这使得组件更难读取和保护。

在组合API中，一切都在 setup 办法中，这意味着咱们能够依据个性组织代码，甚至将通用个性提取到它们本人的代码模块中。

咱们创立一个reset办法，它获取咱们的ref并将其设置为一个空字符串。

setup () {      const query = ref('')      const reset = (evt) => {        query.value = '' // clears the query      }            return {        reset,        query      }}

须要留神的一件事是，咱们须要调用query.value能力拜访数据的值。

为什么？

如果咱们应用console.log(query)，咱们看到它不仅仅是一个字符串值，而是一个 Proxy。应用 Proxy 容许咱们轻松地获取数据变动，这也是为什么咱们须要在援用上调用.value的起因。

而后，就像在选项API应用的一样，咱们能够在模板中增加一个按钮，在单击时调用这个reset办法。

<button @click='reset'> Reset </button>

向 Vue3 我的项目增加第二个组件

当初咱们曾经有了输出和查问数据，接着，创立一个组件显示后果。

这个组件取名为SearchResults.vue

要将其增加到咱们的HelloWorld.vue组件中，首先必须将其导入并在咱们的导出默认值中申明它。

<script>  import { ref } from 'vue'  import SearchResults from './SearchResults.vue'  export default {    components: {      SearchResults    },    // ...  }</script>

而后，咱们能够像这样将它增加到模板中:

// HelloWorld.vue<template>   <div>     <h2> Filter LearnVue Articles </h2>     <input       type='text'       placeholder='Filter Search'       v-model='query'    />    <br>    <button @click='reset'> Reset </button>    <search-results/>   </div></template>

传递参数

Vue props 容许父组件将数据传递给其子组件。对于咱们的例子，咱们心愿从HelloWorld.vue传递query 字符串给SearchResults.vue。

// HelloWorld.vue<search-results :query='query'/>

拜访参数

在SearchResults.vue外部，从 JSON 文件导入所有的文章信息。

import titles from '../post-data.json'export default {  setup (props, context) {   }}

而后，咱们须要几个步骤来拜访 props。

首先，咱们必须在 props 选项中申明它们。这通知咱们的组件须要什么数据。

// SearchResults.vueexport default {  props: {    query: String  },  setup (props, context) {  // ...

如果咱们仔细观察setup办法，就会发现它承受两个参数。

  1. props – 蕴含传递给组件的所有 props
  2. context– 蕴含 attrs，slot和emit

咱们将应用 props 在 setup 办法中拜访咱们的 props 的值。

咱们所须要做的就是应用计算属性来过滤使文章列表。

计算属性

// SearchResults.vueimport { computed } from 'vue'

而后，咱们这样设置它，其中咱们的computed属性承受一个getter办法。每当其中一个依赖项产生更改时，此办法将更新咱们的computed属性。

// SearchResults.vueimport { computed } from 'vue'import titles from '../post-data.json'export default {  props: {    query: String  },  setup (props, context) {        const filteredTitles = computed(() => {         })    return {      filteredTitles    }  }}

对于这个办法，咱们心愿应用query过滤所有的题目。所有内容都转换为小写，所以咱们不用放心大小写。

// SearchResults.vueconst filteredTitles = computed(() => {      return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase()))    })

很好~

剩下要做的就是理论应用咱们的模板来显示数据!这是应用v-for循环实现的。

// SearchResults.vue<template>  <div class='root'>    <p> Showing {{ filteredTitles.length }} results for "{{ query }}" </p>    <ul>      <li v-for='title in filteredTitles' :key='title.Page'>        {{ title.Name }}      </li>    </ul>  </div></template>

就这~

![上传中...]()

Vue3 生命周期钩子

在开始应用 Vue3 之前，还须要晓得的另一件事是如何应用Vue生命周期钩子。

像Composition API的其余局部一样，咱们必须导入咱们想要应用的生命周期钩子，并在setup办法中申明它们。

// Lifecycle Example import { computed, onMounted } from 'vue'export default {  setup () {        onMounted(() => {      console.log('mounted')    })  }}

总结

Vue 3中有很多很棒的性能，这些性能对于创立可扩大的Vue应用程序十分有用。

心愿本文本对你在应用 vue3 时提供一些帮忙。

完~，我是刷碗智，我要去刷碗了，咱们下期见~

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://learnue.co/2020/12/se...

交换

文章每周继续更新，能够微信搜寻「 大迁世界 」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。