Vue计算属性与监听器

布满荆棘的人生 2023-10-13 08:02 42阅读 0赞

### 文章目录 ###

*  计算属性配置项 computed
 *   *  HTML 结构
     *  Vue 实例
     *  数据
     *  方法
     *  计算属性
     *  绑定数据和方法
     *  完整代码
 *  vue3商品加减案例
 *  监听器配置项 watch
 *   *  简单类型写法
     *  深度监听写法

--------------------

# 计算属性配置项 computed #

使用 Vue 实现一个商品价格计算器，设置一个初始单价，初始数量为 1，用户可以通过加减按钮修改数量，并实时计算出总价。

下面将一步步详细解释上述代码的实现过程

## HTML 结构 ##

首先，我们需要在 HTML 文件中添加一个 `div` 元素作为 Vue 应用的根元素，并给其一个 id 值作为挂载点：

在这个 `div` 元素中，我们可以添加一个标题标签、三个段落标签，前两个段落标签显示单价和数量，第三个段落标签用于显示计算出来的总价，其中加减按钮用于增加或减少数量：

<h1>商品价格计算器</h1>
    <p>单价：{
       { price }}</p>
    <p>数量: <button v-show="num>0" @click="minus">-</button>{
       {num}}<button @click="plus">+</button></p>
    <p>总价：{
       { total }}</p>

这里我们使用了 Vue 的模板语法，通过 `{ { }}` 将数据绑定到 HTML 中。

## Vue 实例 ##

接下来，在 JavaScript 文件中创建一个 Vue 实例，将其挂载到 HTML 页面中的 `div#app` 元素上：

在 Vue 实例的选项中，我们需要先定义一些数据和方法。

## 数据 ##

首先，我们需要设置一个初始单价、初始数量和总价的值，这里我们设置单价为 998 元，数量为 1，总价为 998 元：

data() {
        
      return {
        
        price: 998,
        num: 1
      }
    },

这里使用了 Vue 实例的 `data` 选项，用于定义数据和变量。

## 方法 ##

接着，我们需要定义两个方法 `plus` 和 `minus`，用于增加或减少商品数量，并且实时计算出总价：

methods: {
        
      minus(){
        
        this.num--
      },
      plus(){
        
        this.num++
      }
    }

这里我们使用了 Vue 实例的 `methods` 选项，用于定义方法。

## 计算属性 ##

使用 `computed` 选项定义一个计算属性 `total`，用于计算商品的总价，其中计算方法是将 `num` 值乘以 `price` 值：

computed:{
        
      // 计算属性的具体配置是函数形式
      total(){
        
        // 必须返回一个数据
        return this.num*this.price
      }
    }

## 绑定数据和方法 ##

最后，我们需要将定义好的数据和方法绑定到 HTML 页面中的模板语法中：

<p>单价：{
       { price }}</p>
    <p>数量: <button v-show="num>0" @click="minus">-</button>{
       {num}}<button @click="plus">+</button></p>
    <p>总价：{
       { total }}</p>

这里使用了 Vue 的模板语法，通过 `{ { }}` 将数据绑定到 HTML 中，通过 `v-show` 和 `@click` 将方法绑定到按钮的点击事件上。

## 完整代码 ##

综上，以下是完整的商品价格计算器代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>商品价格计算器</title>
    </head>
    <body>
      <div id="app">
        <h1>商品价格计算器</h1>
        <p>单价：{
       { price }}</p>
        <p>数量: <button v-show="num>0" @click="minus">-</button>{
       {num}}<button @click="plus">+</button></p>
        <p>总价：{
       { total }}</p>
        
      </div>
    
      <script src="../js/vue3.js"></script>
      <script>
        let vm = Vue.createApp({
          
          data() {
          
            return {
          
              price: 998,
              num: 1
            }
          },
          methods: {
          
            minus(){
          
              this.num--
            },
            plus(){
          
              this.num++
            }
          },
          // 计算属性配置项 实际应用中 某个数据是需要使用data中其他数据计算得到
          computed:{
          
            // 计算属性的具体配置是函数形式
            total(){
          
              // 必须返回一个数据
              return this.num*this.price
            }
          }
        })
        vm.mount('#app')
      </script>
    </body>
    </html>

输出效果：  
![在这里插入图片描述][f3002f1a3314474ab28de233b5a2f3cf.png]

# vue3商品加减案例 #

![在这里插入图片描述][95b0b71d6a95425eb729e3552cf12b59.png]

这段代码是商家信息页面的 Vue 组件，主要作用是展示商家的基本信息和食品列表，并实现选择食品和结算功能。  
它通过发送请求获取商家信息和食品列表数据，并在页面中展示出来。  
用户可以通过点击加号和减号来选择需要购买的食品，同时底部购物车栏会实时更新已选择的食品的数量和总价格。  
当用户点击去结算按钮时，会跳转到订单页面并将已选择的食品和总价格存储到 `sessionStorage` 中。  
在页面加载前，组件会从 `sessionStorage` 中获取商家信息。

详细代码：

template 页面布局部分

<ul class="choese">
          <li class="choese-img" v-for="(food, index) in foods" :key="index">
            <div>
              <img src="../assets/img/sp01.png" alt="">
              <div>
                <p>{
        {
         food.foodName }}</p>
                <p>{
        {
         food.foodExplain }}</p>
                <p>¥{
        {
         food.foodPrice }}</p>
              </div>
            </div>
            <div>
              <i class="fa fa-minus-circle" @click="minus(index)"></i>
              <span id="num">{
        {
         food.num }}</span>
              <i class="fa fa-plus-circle" @click="add(index)"></i>
            </div>
          </li>
        </ul>
            
        <div class="bottom-tab">
          <div>
            <div>
              <p>¥{
        {
         allmoney }}</p>
              <p>配送费{
        {
         this.business.deliveryPrice }}元</p>
            </div>
            <div>
              <div>
                <i class="fa fa-shopping-cart fa-lg"></i>
              </div>
            </div>
            <div>{
        {
         allnum }}</div>
          </div>
          <div id="pay" @click="gotoOrders">去结算</div>
        </div>
      </div>

script 部分主要定义了数据和方法，computed 部分定义了计算属性，watch 部分监听总价格变化，beforeMount 和 mounted 部分则分别在挂载前和挂载后发送请求获取数据。

样式部分定义了页面样式。

--------------------

# 监听器配置项 watch #

`提示：这里可以添加本文要记录的大概内容：`

**监听器配置项：监听某个数据的变化**  
**定义函数：函数名必须是监听的数据名**  
**Vue 调用此函数时会传入两个参：新值、旧值**

Vue3 的监听器可以监听 Vue 实例中某个数据的变化，当这个数据变化时，就会自动执行相应的函数，这样可以实现一些自动更新页面、数据校验等功能。

具体来说，监听器主要有以下作用：

1.  自动更新页面：当 Vue 实例的某个数据变化时，监听器可以自动更新相关的页面内容，而不需要手动修改 DOM。
2.  数据校验：当 Vue 实例中的某个数据变化时，可通过监听器对输入的数据进行校验，保证数据的有效性。
3.  数据同步：当 Vue 实例中的某个数据绑定到多个组件中时，可通过监听器实现数据的同步，保证数据的一致性。
4.  监控数据变化：当 Vue 实例中的某个数据发生变化时，通过监听器可以获取到新旧值，从而实现数据的监控和统计。

Vue3 监听器是 Vue3 中非常重要的一个特性，它可以让我们的开发变得更加高效和灵活，使得我们能够更好地处理和管理数据。

## 简单类型写法 ##

【示例代码】：  
让数据减到零不再往下减

这段代码使用了 Vue3 的 `createApp` 方法创建了一个 Vue 实例 vm，实现了一个简单的计数器功能，点击按钮可以将 num 值递减。具体解释如下：

1.  首先，使用 createApp 方法创建了一个 Vue 实例 vm，这个实例包含了 data、methods 等选项。
2.  在 data 中定义了 num 属性，初始值为 1。
3.  在 methods 中定义了一个 minus 方法，当按钮被点击时，会将 num 的值减 1。
4.  最后，使用 vm.mount 方法将 Vue 实例挂载到页面上的 \#app 元素上，使其生效。

但是现在可以减到负数

接下来加上监听器，用这种方式控制num的数量，到零就不在让他往下减

// 监听器配置项：监听某个数据的变化
            watch: {
        
                // 定义函数 函数名必须是监听的数据名
                // Vue 调用此函数时会传入两个参 新值 旧值
                num(a,b){
        
                    this.num = a<0?0:a
                    // a<0吗？如果小于0正常赋值
                }
            }

## 深度监听写法 ##

如果监听的事件在对象中，那么监听器的写法必须是深度监听写法

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <button @click="minus">-</button>{
        {
        goods.num}}
        </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
        let vm = Vue.createApp({
        
            data() {
        
                return {
        
                    goods: {
        
                        num: 1
                    }
                }
            },
            methods: {
        
                minus(){
        
                    this.goods.num--
                }
            },
            // 监听器配置项：监听某个数据的变化
            watch: {
        
                // 如果监听的事件在对象中，那么监听器的写法必须是深度监听写法
                goods:{
        
                    deep:true,
                    handler(a,b){
        
                        this.goods.num = a.num<0?0:a.num
                    }
                }
            }
        })
        vm.mount('#app')
    </script>
    </html>

[f3002f1a3314474ab28de233b5a2f3cf.png]: https://img-blog.csdnimg.cn/f3002f1a3314474ab28de233b5a2f3cf.png
[95b0b71d6a95425eb729e3552cf12b59.png]: https://img-blog.csdnimg.cn/95b0b71d6a95425eb729e3552cf12b59.png