Vue笔记

vue核心概念总结

响应式数据 (Reactive Data): Vue.js 的一个核心特性是数据的响应式。这意味着当数据发生变化时，相关的视图会自动更新。你可以使用 data 对象来定义响应式数据，并在模板中使用它们。

模板 (Templates): Vue.js 使用基于 HTML 的模板语法来声明视图。模板中可以包含 Vue.js 的指令、表达式和过滤器，用于控制和展示数据。

组件 (Components): 组件是 Vue.js 的另一个重要概念。组件可以封装可重用的代码块，每个组件可以有自己的模板、数据和逻辑。通过组合不同的组件，可以构建复杂的应用程序。

指令 (Directives): 指令是用于在模板中声明式地将行为应用到 DOM 元素上的特殊属性。Vue.js 提供了一些内置指令，例如 v-if、v-for 和 v-bind 等。你还可以自定义指令来扩展 Vue.js 的功能。

计算属性 (Computed Properties): 计算属性是用于派生响应式数据的属性。它们可以根据其他响应式数据的值进行计算，并且会进行缓存，只在相关数据发生变化时重新计算。

监听器 (Watchers): 监听器允许你在响应式数据变化时执行自定义逻辑。你可以监视一个或多个数据的变化，并在变化发生时执行相应的操作。

生命周期钩子 (Lifecycle Hooks): Vue.js 组件生命周期钩子是在组件不同阶段执行的钩子函数。你可以利用这些钩子函数来执行一些初始化、销毁或其他操作。

路由 (Routing): Vue.js 提供了 vue-router 库，用于实现客户端路由。路由允许你根据 URL 的变化来渲染不同的组件，实现单页应用程序的导航功能。

组合式API的例子

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

当在 Vue 3 中使用 <script setup> 语法时，你可以将模板中的选项（如 data、computed、methods 等）与组合式 API 的逻辑组合在一起，使代码更简洁。下面是使用 <script setup> 的上述计数器组件示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

传统的 Vue 组件定义中，我们需要在 <script> 部分显式地返回组件选项，例如返回一个包含 data、computed、methods 等属性的对象。

但是，使用 Vue 3 的 <script setup> 语法，我们不需要显式地返回组件选项。相反，我们可以直接在 <script setup> 块中编写我们的逻辑代码，Vue 会根据我们在 setup 块中定义的变量和函数自动推断出组件选项。

这意味着，你不需要在 setup 块的末尾编写 return 语句来返回组件选项。Vue 会自动识别你在 setup 块中定义的响应式数据、计算属性、方法等，并将它们应用到组件中。

在一个vue应用中，选项式和组合式可以混用吗？

官网如是说：

在学习的过程中，推荐采用更易于自己理解的风格。再强调一下，大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格。

在生产项目中：

当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API。

当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件。

在同一个应用中，你可以根据具体的需求和组件复杂度选择使用选项式或组合式语法。它们并不互斥，而是可以相互配合使用，使代码更具可读性和可维护性，并根据实际情况灵活选择最适合的语法来编写组件。

小知识分享：

1、k8s之etcd操作

备份

ETCDCTL_API=3 etcdctl snapshot save etcd-snapshot.db --endpoints=https://127.0.0.1:2379 --cacert=/etc/kubernetes/pki/etcd/ca.crt --cert=/etc/kubernetes/pki/etcd/server.crt --key=/etc/kubernetes/pki/etcd/server.key

恢复

systemctl cat etcd # 确认下数据目录
mv /var/lib/etcd/default.etcd /var/lib/etcd/default.etcd.bak
ETCDCTL_API=3 etcdctl snapshot restore /data/backup/etcd-snapshot-previous.db --
data-dir=/var/lib/etcd/default.etcd
chown -R etcd:etcd /var/lib/etcd
systemctl start etcd

# 查看状态：
etcdctl --endpoints=https://10.26.210.4:2379 --cacert=/path/to/ca.crt --cert=/path/to/client.crt --key=/path/to/client.key endpoint status

2、k8s证书操作：

查看有效期：
openssl x509 -in ca.pem -noout -text


解释：

openssl：是 OpenSSL 工具的命令行接口。
x509：指定了要执行的操作，即查看 X.509 格式的证书。
-in ca.pem：指定要查看的证书文件的路径和文件名。在这个例子中，ca.pem 是一个示例证书文件名，你需要替换为你自己的证书文件。
-noout：表示只输出证书的详细信息，而不包括其他额外的信息。
-text：表示以文本形式显示证书的详细信息。

Validity
    Not Before: <开始日期>
    Not After : <结束日期>

注意：

在 OpenSSL 中，默认的证书有效期限制是在 “9999-12-31 23:59:59” 时间点之前的五年。这是由于 X.509 标准的约束和历史原因所决定的。

CFSSL 在生成根证书时默认情况下会忽略 “ca-config.json” 文件中的 “default” 配置，而使用内置的默认配置，这就是为什么你无法通过修改 “default” 配置来更改生成的根证书的有效期的原因。

要生成具有自定义有效期的根证书，可以采取以下步骤：

创建一个新的 JSON 配置文件，例如 “ca-root-config.json”，并将以下内容复制到文件中：

{
  "signing": {
    "profiles": {
      "root": {
        "expiry": "87600h",
        "usages": [
          "signing",
          "key encipherment",
          "cert sign",
          "crl sign"
        ]
      }
    }
  }
}

生成根证书：

cfssl gencert -initca -config=ca-root-config.json ca-csr.json | cfssljson -```