Vue 3.0 文档翻译 Introduction

引言

原文地址: http://blog.duhbb.com/2022/02/11/translation-of-introduction-in-vue-3-offiicial-doc/

欢迎访问我的博客: http://blog.duhbb.com/

Vue 3.0 文档翻译 Introduction

什么是Vue?

Vue的发音和view相似,是一个构建用户界面的Java框架. 在HTML,CSS和JavaScript的基础上提供了一个声明式(declarative)以及基于组件(component-based)的编程模型,能够帮你高效的开发用户界面, 不论是简单还是复杂的.

js代码如下:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

template代码如下:

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

上面的例子展示了Vue的两个核心特点:

• Declarative Rendering:
• Reactivity:

后面的部分将详细讲述这些内容.

前提:你需要对HTML,CSS和JavaScript有基本的了解,不然后面没法交流

The Progressive Framework

Vue包含了前端开发所需要的很多共同特性,但是web开发又多又杂,Vue被设计为flexible和incrementally adoptable.

• Enhancing static HTML without a build step
• Embedding as Web Components on any page
• Single-Page Application (SPA)
• Fullstack / Server-Side-Rendering (SSR)
• JAMStack / Static-Site-Generation (SSG)
• Targeting desktop, mobile, WebGL or even the terminal

Single-File Components

Vue组件使用类似HTML的文件格式,被称作Single-File Component,也就是那些*.vue的文件,简称为SFC.

Vue SFC,人如其名,它将组件的逻辑(JavaScript),模板(HTML),以及样式(CSS)柔和在单个文件中.

下面这个例子就是使用SFC格式编写的:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

API Styles

Vue组件可以使用两种不同的API:Options API和Composition API.

Options API

在Options API中,我们使用可选的对象,比如data,methods和mounted来定义组件的逻辑.

options中定义的属性都会被暴露给函数中的this,而这个this正是指向组件实例的.

<script>
export default {
  // data()返回的属性成为可相应的状态并且会被暴露给this
  data() {
    return {
      count: 0
    }
  },

  // methods是用于mutate状态以及触发更新的函数
  // 他们可以被绑定template中的事件监听器
  methods: {
    increment() {
      this.count++
    }
  },

  // mounted函数将会在组件被mounted的时候被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">count is: {{ count }}</button>
</template>

Composition API

在SFC中,Component API主要是和<script setup>一起使用.setup这个属性是告诉Vue执行编译期的转换,能让我们以更少的boilerplate来使用Composition API.

比如在<script setup>中引入以及定义的顶级变量/函数都可以在template中直接使用.

下面是Composition API的例子:

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

为什么要让我做选择,我tm该选哪个?

首先这两种风格的API是足够支持日常的各种使用滴.事实上Options API是通过Composition API来实现的(大概是这个意思)!

Options API主要是围绕"component instance"这个概念,比较贴合面向对象的思想.通过将响应的细节抽象出来以及强制代码以option groups的形式进行组织,这样对新手更加友好.

Composition API则主要围绕声明式的响应状态,很多函数都可以修改状态,一起处理复杂性.这种的话格式更加自由,需要对Vue的响应式有更深入的理解.因此,它对于组织代码以及复用逻辑的能力更强.

更多:Composition API FAQ

如果你是个Vue的菜鸟,我们一般推荐:

• 学习的话,使用你更容易理解的方式,另外二者很多的核心概念都是互通的.
• 生产使用:
  • 如果你不使用构建工具的话,就用Options API,或者是低复杂性的场景
  • 如果你打算使用全应用的Vue,就是用Composition API + Single-File Components

学习阶段你不必拘泥于一种.

还有问题?

讲这么清楚还有问题,那你去看FAQ吧

选择你的学习路径

• Try the Tutorial, 上手做
• Read the Guide, 读文档了解框架的方方面面
• Check out the Example, 直接通过项目学习

结束语

原文地址: http://blog.duhbb.com/2022/02/11/translation-of-introduction-in-vue-3-offiicial-doc/

欢迎访问我的博客: http://blog.duhbb.com/