vue3 - 初学记录1

---

前言

提示：只是记录阅读vue3过程中想记录的点，无甚深意，读者可自行阅读官方文档：Vue 3 的文档
https://cn.vuejs.org/guide/introduction.html

有些知识点和vue2基本一致，一致的部分准备再简单记录下，查漏补缺，不一致的部分可能自己也不自知吧，毕竟vue2也没有磕的很透彻。

---

提示：以下是本篇文章正文内容

一、单文件组件

单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

<template>
  	<div @click="count++">Count is: {
   {
    count }}</div>
</template>
<script>
	export default {
   
	  data() {
   
	    return {
   
	      count: 0
	    }
	  }
	}
</script>
<style scoped>
	button {
   
	  font-weight: bold;
	}
</style>

二、选项式 API 和组合式 API

1.选项式 API

<template>
  <button @click="increment">Count is: {
   {
    count }}</button>
</template>
<script>
export default {
   
  // data() 返回的属性将会成为响应式的状态
  data() {
   
    return {
   
      count: 0
    }
  },
  // methods 是一些用来更改状态与触发更新的函数
  methods: {
   
    increment() {
   
      this.count++
    }
  },
  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  mounted() {
   
    console.log(`The initial count is ${
   this.count}.`)
  }
}
</script>

2.组合式 API

组合式 API 通常会与 <script setup>搭配， <script setup>中的导入和顶层变量/函数都能够在模板中直接使用 。

<template&