Vue基础-Computed-Watch

news2024/11/17 21:44:07

一、computed计算属性使用

1.复杂data的处理方式

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示；

  • 比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示；
  • 在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算；
  • 在模板中放入太多的逻辑会让模板过重和难以维护；
  • 并且如果多个地方都使用到，那么会有大量重复的代码；

我们有没有什么方法可以将逻辑抽离出去呢？

  • 可以，其中一种方式就是将逻辑抽取到一个method中，放到methods的options中；
  • 但是，这种做法有一个直观的弊端，就是所有的data使用过程都会变成了一个方法的调用；
  • 另外一种方式就是使用计算属性computed；

2.认识计算属性computed

什么是计算属性呢？

  • 官方并没有给出直接的概念解释；
  • 而是说：对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性；
  • 计算属性将被混入到组件实例中
    • 所有 getter 和 setter 的 this 上下文自动地绑定为组件实例；

计算属性的用法：

  • 选项：computed
  • 类型：{ [key: string]: Function | { get: Function, set: Function } }

那接下来我们通过案例来理解一下这个计算属性。

3.案例实现思路

我们来看三个案例：

案例一：我们有两个变量：firstName和lastName，希望它们拼接之后在界面上显示；

案例二：我们有一个分数：score

  • 当score大于60的时候，在界面上显示及格；
  • 当score小于60的时候，在界面上显示不及格；

案例三：我们有一个变量message，记录一段文字：比如Hello World

  • 某些情况下我们是直接显示这段文字；
  • 某些情况下我们需要对这段文字进行反转；

我们可以有三种实现思路：

  • 思路一：在模板语法中直接使用表达式；
  • 思路二：使用method对逻辑进行抽取；
  • 思路三：使用计算属性computed；

4.实现思路一：模板语法

思路一的实现：模板语法

  • 缺点一：模板中存在大量的复杂逻辑，不便于维护（模板中表达式的初衷是用于简单的计算）；
  • 缺点二：当有多次一样的逻辑时，存在重复的代码；
  • 缺点三：多次使用的时候，很多运算也需要多次执行，没有缓存；
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- 插值语法表达式直接进行拼接 -->
    <!-- 1.拼接名字 -->
    <h2>{{ firstName + " " + lastName }}</h2>
    <h2>{{ firstName + " " + lastName }}</h2>
    <h2>{{ firstName + " " + lastName }}</h2>

    <!-- 2.显示分数等级 -->
    <h2>{{ score >= 60 ? '及格': '不及格' }}</h2>

    <!-- 3.反转单词显示文本 -->
    <h2>{{ message.split(" ").reverse().join(" ") }}</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          // 1.姓名
          firstName: "kobe",
          lastName: "bryant",

          // 2.分数: 及格/不及格
          score: 80,

          // 3.一串文本: 对文本中的单词进行反转显示
          message: "my name is why"
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

5.实现思路二：method实现

思路二的实现：method实现

  • 缺点一：我们事实上先显示的是一个结果，但是都变成了一种方法的调用；
  • 缺点二：多次使用方法的时候，没有缓存，也需要多次计算；
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- 插值语法表达式直接进行拼接 -->
    <!-- 1.拼接名字 -->
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>

    <!-- 2.显示分数等级 -->
    <h2>{{ getScoreLevel() }}</h2>

    <!-- 3.反转单词显示文本 -->
    <h2>{{ reverseMessage() }}</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          // 1.姓名
          firstName: "kobe",
          lastName: "bryant",

          // 2.分数: 及格/不及格
          score: 80,

          // 3.一串文本: 对文本中的单词进行反转显示
          message: "my name is why"
        }
      },
      methods: {
        getFullname() {
          return this.firstName + " " + this.lastName
        },
        getScoreLevel() {
          return this.score >= 60 ? "及格": "不及格"
        },
        reverseMessage() {
          return this.message.split(" ").reverse().join(" ")
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

6.思路三的实现：computed实现

思路三的实现：computed实现

  • 注意：计算属性看起来像是一个函数，但是我们在使用的时候不需要加()，这个后面讲setter和getter时会讲到；
  • 我们会发现无论是直观上，还是效果上计算属性都是更好的选择；
  • 并且计算属性是有缓存的；
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- 插值语法表达式直接进行拼接 -->
    <!-- 1.拼接名字 -->
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>

    <!-- 2.显示分数等级 -->
    <h2>{{ scoreLevel }}</h2>

    <!-- 3.反转单词显示文本 -->
    <h2>{{ reverseMessage }}</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          // 1.姓名
          firstName: "kobe",
          lastName: "bryant",

          // 2.分数: 及格/不及格
          score: 80,

          // 3.一串文本: 对文本中的单词进行反转显示
          message: "my name is why"
        }
      },
      computed: {
        // 1.计算属性默认对应的是一个函数
        fullname() {
          return this.firstName + " " + this.lastName
        },

        scoreLevel() {
          return this.score >= 60 ? "及格": "不及格"
        },

        reverseMessage() {
          return this.message.split(" ").reverse().join(" ")
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

二、computed和method区别

1.计算属性 vs methods

在上面的实现思路中，我们会发现计算属性和methods的实现看起来是差别是不大的，而且我们多次提到计算属性有缓存的。

接下来我们来看一下同一个计算多次使用，计算属性和methods的差异：

在这里插入图片描述

2.计算属性的缓存

这是什么原因呢？

  • 这是因为计算属性会基于它们的依赖关系进行缓存；
  • 在数据不发生变化时，计算属性是不需要重新计算的；
  • 但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算；

在这里插入图片描述

三、computed的set和get

1.计算属性的setter和getter

计算属性在大多数情况下，只需要一个getter方法即可，所以我们会将计算属性直接写成一个函数。

但是，如果我们确实想设置计算属性的值呢？

  • 这个时候我们也可以给计算属性设置一个setter的方法；
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h2>{{ fullname }}</h2>

    <button @click="setFullname">设置fullname</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          firstname: "coder",
          lastname: "why"
        }
      },
      computed: {
        // 语法糖的写法
        // fullname() {
        //   return this.firstname + " " + this.lastname
        // },
        
        // 完整的写法:
        fullname: {
          get: function() {
            return this.firstname + " " + this.lastname
          },
          set: function(value) {
            const names = value.split(" ")
            this.firstname = names[0]
            this.lastname = names[1]
          }
        }
      },
      methods: {
        setFullname() {
          this.fullname = "kobe bryant"
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

2.源码如何对setter和getter处理呢？（了解）

你可能觉得很奇怪，Vue内部是如何对我们传入的是一个getter，还是说是一个包含setter和getter的对象进行处理的呢？

  • 事实上非常的简单，Vue源码内部只是做了一个逻辑判断而已；

在这里插入图片描述

四、侦听器watch选项使用

1.认识侦听器watch

什么是侦听器呢？

  • 开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中；
  • 当数据变化时，template会自动进行更新来显示最新的数据；
  • 但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了；

侦听器的用法如下：

  • 选项：watch
  • 类型：{ [key: string]: string | Function | Object | Array}

2.侦听器案例

举个栗子（例子）：

  • 比如现在我们希望用户在input中输入一个问题；
  • 每当用户输入了最新的内容，我们就获取到最新的内容，并且使用该问题去服务器查询答案；
  • 那么，我们就需要实时的去获取最新的数据变化；
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h2>{{message}}</h2>
    <button @click="changeMessage">修改message</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // Proxy -> Reflect
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          message: "Hello Vue",
          info: { name: "why", age: 18 }
        }
      },
      methods: {
        changeMessage() {
          this.message = "你好啊, 李银河!"
          this.info = { name: "kobe" }
        }
      },
      watch: {
        // 1.默认有两个参数: newValue/oldValue
        message(newValue, oldValue) {
          console.log("message数据发生了变化:", newValue, oldValue)
        },
        info(newValue, oldValue) {
          // 2.如果是对象类型, 那么拿到的是代理对象
          // console.log("info数据发生了变化:", newValue, oldValue)
          // console.log(newValue.name, oldValue.name)

          // 3.获取原生对象
          // console.log({ ...newValue })
          console.log(Vue.toRaw(newValue))
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

3.侦听器watch的配置选项

我们先来看一个例子：

  • 当我们点击按钮的时候会修改info.name的值；
  • 这个时候我们使用watch来侦听info，可以侦听到吗？答案是不可以。

这是因为默认情况下，watch只是在侦听info的引用变化，对于内部属性的变化是不会做出响应的：

  • 这个时候我们可以使用一个选项deep进行更深层的侦听；
  • 注意前面我们说过watch里面侦听的属性对应的也可以是一个Object；

还有另外一个属性，是希望一开始的就会立即执行一次：

  • 这个时候我们使用immediate选项；
  • 这个时候无论后面数据是否有变化，侦听的函数都会有限执行一次；
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h2>{{ info.name }}</h2>
    <button @click="changeInfo">修改info</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          info: { name: "why", age: 18 }
        }
      },
      methods: {
        changeInfo() {
          // 1.创建一个新对象, 赋值给info
          // this.info = { name: "kobe" }

          // 2.直接修改原对象某一个属性
          this.info.name = "kobe"
        }
      },
      watch: {
        // 默认watch监听不会进行深度监听
        // info(newValue, oldValue) {
        //   console.log("侦听到info改变:", newValue, oldValue)
        // }

        // 进行深度监听
        info: {
          handler(newValue, oldValue) {
            console.log("侦听到info改变:", newValue, oldValue)
            console.log(newValue === oldValue)
          },
          // 监听器选项:
          // info进行深度监听
          deep: true,
          // 第一次渲染直接执行一次监听器
          immediate: true
        },
        "info.name": function(newValue, oldValue) {
          console.log("name发生改变:", newValue, oldValue)
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

五、侦听器watch其他写法

1.字符串方法名

{
    watch: {
        title: 'method1'
    }
}

2.回调数组

你可以传入回调数组，它们会被逐一执行

{
    watch: {
        title: [
            function handler1(newvalue, oldvalue) {},
            function handler2(newvalue, oldvalue) {},
            function handler3(newvalue, oldvalue) {},
        ]
    }
}

3.侦听对象属性

另外一个是Vue3文档中没有提到的，但是Vue2文档中有提到的是侦听对象的属性：

{
    watch: {
        'info.title': function(newValue, oldValue) {}
    }
}

4.$watch

还有另外一种方式就是使用 $watch 的API：

我们可以在created的生命周期（后续会讲到）中，使用 this.$watchs 来侦听；

  • 第一个参数是要侦听的源；
  • 第二个参数是侦听的回调函数callback；
  • 第三个参数是额外的其他选项，比如deep、immediate；
{
    created() {
        this.$watch("message", (newValue, oldValue) => {
          console.log("message数据变化:", newValue, oldValue)
        }, { deep: true })
    }
}

六、案例练习

1.列表选中

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>

  <div id="app">
    <ul>
      <!-- <h2 :class="{title: false}"></h2> -->

      <!-- 对active的class进行动态绑定 -->
      <!-- 需求一: 将索引值为1的li添加上active -->
      <!-- 需求二：用一个变量（属性）记录当前点击的位置 -->
      <li :class="{active: index === currentIndex}"
          @click="liClick(index)"
          v-for="(item, index) in movies">
        {{item}}
      </li>
    </ul>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          movies: ["星际穿越", "阿凡达", "大话西游", "黑客帝国"],
          currentIndex: -1
        }
      },
      methods: {
        liClick(index) {
          console.log("liClick:", index)
          this.currentIndex = index
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

2.购物车

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table,td,th {
      border-collapse: collapse;
      border: 1px solid #000;
    }
    td,th {
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="app">
    <template v-if="bookList.length > 0">
      <table>
        <tr>
          <th>序号</th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
        <tr v-for="(book, index) in bookList" :key="book">
          <td>{{ index + 1 }}</td>
          <td>{{ book.name }}</td>
          <td>{{ book.publishDate }}</td>
          <td>￥{{ book.price }}</td>
          <td>
            <button :disabled="book.count === 0" 
            @click="sub(book)">-</button>
            {{ book.count }}
            <button @click="add(book)">+</button>
          </td>
          <td>
            <button @click="remove(book)">移除</button>
          </td>
        </tr>
      </table>
      <h2>总价：{{ totalPrice }}</h2>
    </template>
    <h2 v-else="bookList.length === 0">购物车为空</h2>
    
  </div>
  
  <script src="./js/vue.js"></script>
  <script>
   const vue = Vue.createApp({
      data: function () {
        return {
          bookList: [
            {
              name: "算法导论",
              publishDate: "2006-9",
              price: 85,
              count: 0
            },
            {
              name: "UNIX编程艺术",
              publishDate: "2006-10",
              price: 78,
              count: 0
            },
            {
              name: "编程珠玑",
              publishDate: "2006-2",
              price: 59,
              count: 0
            },
            {
              name: "代码大全",
              publishDate: "2008-1",
              price: 128,
              count: 0
            }
          ],
          totalPrice: 0
        }
      },
      methods: {
        sub(book) {
          book.count--;
        },
        add(book) {
          book.count++;
        },
        remove(book) {
          this.bookList.splice(this.bookList.indexOf(book), 1);
        }
      },
      watch: {
        bookList: {
          handler() {
            if (this.bookList.length === 0) {
              return;
            }
            // 计算总价
            this.totalPrice = this.bookList
            .map(value => value.count*value.price)
            .reduce((preValue, curValue) => preValue + curValue)
          },
          deep: true,
          immediate: true
        }
      }
    });
    vue.mount("#app");
  </script>

</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1407501.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连

ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连

用了网上的办法&#xff1a; 1、修改listener.ora的参数,把动态的参数设置为静态的参数,红色标注部分 位置D:\oracle\product\10.2.0\db_1\NETWORK\ADMIN SID_LIST_LISTENER (SID_LIST (SID_DESC (SID_NAME PLSExtProc) (ORACLE_HOME D:\oracle\produ…
阅读更多...
微信小程序（十）表单组件（入门）

微信小程序（十）表单组件（入门）

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.type 属性指定表单类型 2.placeholder 属性指定输入框为空时的占位文字 源码&#xff1a; form.wxml <!-- 提前准备好的布局结构代码 --> <view class"register"><view class"…
阅读更多...
【LangChain学习之旅】—（10） 用RouterChain确定客户意图

【LangChain学习之旅】—（10） 用RouterChain确定客户意图

【【LangChain学习之旅】—&#xff08;10&#xff09; 用RouterChain确定客户意图 任务设定整体框架具体步骤如下&#xff1a; 具体实现构建提示信息的模板构建目标链 Reference&#xff1a;LangChain 实战课 任务设定 首先&#xff0c;还是先看一下今天要完成一个什么样的任…
阅读更多...
Pyro —— DOP Nodes

Pyro —— DOP Nodes

目录 Smoke Object —— 创建smoke对象及相关场 Smoke Solver —— Smoke解算器 Color Relationships Advanced Pyro Solver —— Pyro解算器 Smoke Object (Sparse) —— 创建smoke对象及相关场 Smoke Solver (Sparse) —— Sparse Smoke解算器 Simulation Advanced …
阅读更多...
[足式机器人]Part2 Dr. CAN学习笔记- 最优控制Optimal Control Ch07

[足式机器人]Part2 Dr. CAN学习笔记- 最优控制Optimal Control Ch07

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记 - 最优控制Optimal Control Ch07-1最优控制问题与性能指标 1. 最优控制问题与性能指标2. 动态规划 Dynamic Programming2.1 基本概念2.2 代码详解2.3 简单一维案例 3. 线性二次型调节器&#xff…
阅读更多...
SourceTree修改仓库密码

SourceTree修改仓库密码

1、找到 SourceTree缓存文件目录&#xff1a; passwd 目录保存账号对应的密码&#xff08;已加密&#xff09; 2、删除密码 删除passwd文件即可。重启 SourceTree 软件&#xff0c;进行操作&#xff0c;就会有输入密码的弹窗&#xff0c;输入即可。
阅读更多...
高标准农田气象站

高标准农田气象站

在当今社会&#xff0c;科技的发展正在深刻地改变着我们的生活。特别是在农业领域&#xff0c;科技的运用已经成为了保障粮食安全、提高农业生产效率的重要手段。其中&#xff0c;高标准农田气象站作为现代农业的重要组成部分&#xff0c;正在发挥着越来越重要的作用。 TH-NQ14…
阅读更多...
【原生小程序-分包】

【原生小程序-分包】

1.创建分包-文件夹 subPackages app.json中写入subPackges对象&#xff0c;在里面写分包路径 {"pages": ["pages/index/index"],"subPackages": [{"root": "subPackages","name": "分包A","pag…
阅读更多...
【强化学习】QAC、A2C、A3C学习笔记

【强化学习】QAC、A2C、A3C学习笔记

强化学习算法&#xff1a;QAC vs A2C vs A3C 引言 经典的REINFORCE算法为我们提供了一种直接优化策略的方式&#xff0c;它通过梯度上升方法来寻找最优策略。然而&#xff0c;REINFORCE算法也有其局限性&#xff0c;采样效率低、高方差、收敛性差、难以处理高维离散空间。 为…
阅读更多...
leetcode—课程表 拓扑排序

leetcode—课程表 拓扑排序

1 题目描述 你这个学期必须选修 numCourses 门课程&#xff0c;记为 0 到 numCourses - 1 。 在选修某些课程之前需要一些先修课程。 先修课程按数组 prerequisites 给出&#xff0c;其中 prerequisites[i] [ai, bi] &#xff0c;表示如果要学习课程 ai 则 必须 先学习课程 …
阅读更多...
仓储管理系统——软件工程报告（总体设计）③

仓储管理系统——软件工程报告（总体设计）③

总体设计 一、需求规定 软件工程仓库存储管理系统的需求规定是确保系统能够满足用户期望、提高工作效率、确保数据安全性和系统可维护性的基石。其涵盖了功能性、性能、数据管理、用户界面和系统可维护性等多个方面。通过严格的验收标准&#xff0c;可以确保系统在实际应用中…
阅读更多...
【服务器】安装宝塔面板

【服务器】安装宝塔面板

目录 &#x1f33a;【前言】 &#x1f33c;【前提】连接服务器 &#x1f337;方式一 使用工具登录服务器如Xshell &#x1f337;方式二 阿里云直接连接 &#x1f33c; 1. 安装宝塔 &#x1f337;获取安装脚本 方式一 使用下面提供的脚本安装 方式二 使用官网提供的脚本…
阅读更多...
一文读懂RabbitMQ核心概念及架构

一文读懂RabbitMQ核心概念及架构

1. RabbitMQ简介 RabbitMQ是一个开源的消息代理软件&#xff0c;实现了高级消息队列协议&#xff08;AMQP&#xff09;。它是一个应用程序对应用程序的通信方法&#xff0c;基于消费-生产者模型。在RabbitMQ中&#xff0c;消息的生产者将消息发布到队列中&#xff0c;而消息的…
阅读更多...
AI智能绘图

AI智能绘图

AI智能绘图是一种创新的图像生成技术&#xff0c;它使用人工智能算法来根据用户输入的文本描述或参考图片自动生成艺术作品。这种技术分为两个方面&#xff1a;文生图和图生图。 首先我们需要浏览器搜索“固乔科技”官网&#xff0c;先下载并安装固乔智创助手软件。完成后&…
阅读更多...
vue3源码（二）reactiveeffect

vue3源码（二）reactiveeffect

一.reactive与effect功能 reactive方法会将对象变成proxy对象&#xff0c; effect中使用reactive对象时会进行依赖收集&#xff0c;稍后属性变化时会重新执行effect函数。 <div id"app"></div><script type"module">import {reactive,…
阅读更多...
HTML标签（二）

HTML标签（二）

目录 表格标签 表格的主要作用 表格的具体用法 表头单元格标签 表格属性 表格结构标签 合并单元格 合并单元格的方式&#xff1a; 跨行合并&#xff1a; 跨列合并&#xff1a; 列表标签 无序列表 有序列表 自定义列表 表单标签 表单域 表单域的常用属性 表单元素…
阅读更多...
SpringBoot整合ElasticSearch实现基础的CRUD操作

SpringBoot整合ElasticSearch实现基础的CRUD操作

本文来说下SpringBoot整合ES实现CRUD操作 文章目录 概述spring-boot-starter-data-elasticsearch项目搭建ES简单的crud操作保存数据修改数据查看数据删除数据 本文小结 概述 SpringBoot支持两种技术和es交互。一种的jest&#xff0c;还有一种就是SpringData-ElasticSearch。根据…
阅读更多...
ARM安装与项目结构

ARM安装与项目结构

1. 安装环境 参考E:\peixunQianrushi\arm\ziliao\FS4412新版&#xff08;学生资料&#xff09;\环境相关资料 这边建议全部默认路径 安装注意事项&#xff1a; 1、在接下来的安装过程中&#xff0c;对于使用win10、win8的操作系统的用户&#xff0c;所有的安装请均以管理员身份…
阅读更多...
oracle 19c rac集群管理 ------ 日志管理

oracle 19c rac集群管理 ------ 日志管理

oracle 19C rac 数据库的目录结构及日志路径 在Oracle 19c RAC&#xff08;Real Application Clusters&#xff09;集群中&#xff0c;有多个组件和层级生成的日志文件&#xff0c;记录着集群的活动、事件和错误信息&#xff0c;用于故障诊断、性能优化和集群管理。以下是常见…
阅读更多...
java抽象工厂实战与总结

java抽象工厂实战与总结

文章目录 一、工厂模式&#xff08;三种&#xff09;1.简单工厂模式1.1 概念&#xff1a;1.2 使用场景&#xff1a;1.3 模型图解&#xff1a;1.4 伪代码&#xff1a; 2.工厂方法模式2.1 概念&#xff1a;2.2 使用场景&#xff1a;2.3 模型图解&#xff1a;2.4 伪代码 3.抽象工厂…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023