computed计算属性

于 2025-04-02 16:49:16 发布
阅读量942 收藏 6
点赞数 19
CC 4.0 BY-SA版权
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lrh122800/article/details/146954616

1.概念

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

2.语法

  1. 声明在 computed 配置项中，一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用 {{ 计算属性名}}

3.注意

  1. computed配置项和data配置项是同级的
  2. computed中的计算属性虽然是函数的写法，但他依然是个属性
  3. computed中的计算属性不能和data中的属性同名
  4. 使用computed中的计算属性和使用data中的属性是一样的用法
  5. computed中计算属性内部的this依然指向的是Vue实例

5.案例

<style>
  table {
    border: 1px solid #000;
    text-align: center;
    width: 240px;
  }
  th,td {
    border: 1px solid #000;
  }
  h3 {
    position: relative;
  }
</style>

<div id="app">
                <h3>礼物清单</h3>
                  <table>
                  <tr>
                  <th>名字</th>
                  <th>数量</th>
                  </tr>
                  <tr v-for="(item, index) in list" :key="item.id">
                  <td>{{ item.name }}</td>
                  <td>{{ item.num }}个</td>
                  </tr>
                  </table>

                  <!-- 目标：统计求和，求得礼物总数 -->
                  <p>礼物总数：? 个</p>
                  </div>
                  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 1 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      }
    })
  </script>

一、computed计算属性 VS methods方法

1.computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

  1. 写在computed配置项中
  2. 作为属性，直接使用
    • js中使用计算属性： this.计算属性
    • 模板中使用计算属性：{{计算属性}}

2.methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

  1. 写在methods配置项中
  2. 作为方法调用
    • js中调用：this.方法名()
    • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

  1. 缓存特性（提升性能）计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算 → 并再次缓存
  2. methods没有缓存特性
  3. 通过代码比较
<style>
  table {
    border: 1px solid #000;
    text-align: center;
    width: 300px;
  }
  th,td {
    border: 1px solid #000;
  }
  h3 {
    position: relative;
  }
  span {
    position: absolute;
    left: 145px;
    top: -4px;
    width: 16px;
    height: 16px;
    color: white;
    font-size: 12px;
    text-align: center;
    border-radius: 50%;
    background-color: #e63f32;
  }
</style>

<div id="app">
                <h3>礼物清单🛒<span>?</span></h3>
                  <table>
                  <tr>
                  <th>名字</th>
                  <th>数量</th>
                  </tr>
                  <tr v-for="(item, index) in list" :key="item.id">
                  <td>{{ item.name }}</td>
                  <td>{{ item.num }}个</td>
                  </tr>
                  </table>

                  <p>礼物总数：{{ totalCount }} 个</p>
                  </div>
                  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 3 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount () {
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>

4.总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

二、计算属性的完整写法

既然计算属性也是属性，能访问，应该也能修改了？

  1. 计算属性默认的简写，只能读取访问，不能 "修改"
  2. 如果要 "修改" → 需要写计算属性的完整写法

完整写法代码演示

<div id="app">
                姓：<input type="text" v-model="firstName"> +
                  名：<input type="text" v-model="lastName"> =
                    <span></span><br><br> 
                    <button>改名卡</button>
                    </div>
                    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '刘',
        lastName: '备'
      },
      computed: {

      },
      methods: {

      }
    })
  </script>

三、watch侦听器（监视器）

1.作用：

监视数据变化，执行一些业务逻辑或异步操作

2.语法：

  1. watch同样声明在跟data同级的配置项中
  2. 简单写法： 简单类型数据直接监视
  3. 完整写法：添加额外配置项
data: { 
  words: '苹果',
    obj: {
    words: '苹果'
  }
},

  watch: {
    // 该方法会在数据变化时，触发执行
    数据属性名 (newValue, oldValue) {
      一些业务逻辑 或 异步操作。 
    },
    '对象.属性名' (newValue, oldValue) {
      一些业务逻辑 或 异步操作。 
    }
  }

3.侦听器代码准备

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 18px;
  }
  #app {
    padding: 10px 20px;
  }
  .query {
    margin: 10px 0;
  }
  .box {
    display: flex;
  }
  textarea {
    width: 300px;
    height: 160px;
    font-size: 18px;
    border: 1px solid #dedede;
    outline: none;
    resize: none;
    padding: 10px;
  }
  textarea:hover {
    border: 1px solid #1589f5;
  }
  .transbox {
    width: 300px;
    height: 160px;
    background-color: #f0f0f0;
    padding: 10px;
    border: none;
  }
  .tip-box {
    width: 300px;
    height: 25px;
    line-height: 25px;
    display: flex;
  }
  .tip-box span {
    flex: 1;
    text-align: center;
  }
  .query span {
    font-size: 18px;
  }

  .input-wrap {
    position: relative;
  }
  .input-wrap span {
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 12px;
  }
  .input-wrap i {
    font-size: 20px;
    font-style: normal;
  }
</style>

<div id="app">
  <!-- 条件选择框 -->
  <div class="query">
                       <span>翻译成的语言：</span>
                         <select>
                         <option value="italy">意大利</option>
                         <option value="english">英语</option>
                         <option value="german">德语</option>
                         </select>
                         </div>

                         <!-- 翻译框 -->
                         <div class="box">
                         <div class="input-wrap">
                         <textarea v-model="words"></textarea>
                         <span><i>⌨️</i>文档翻译</span>
                         </div>
                         <div class="output-wrap">
                         <div class="transbox">mela</div>
                         </div>
                         </div>
                         </div>
                         <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>

      const app = new Vue({
        el: '#app',
        data: {
          words: ''
        },
      })
    </script>

十二、翻译案例-代码实现

<script>

  const app = new Vue({
    el: '#app',
    data: {
      //words: ''
      obj: {
        words: ''
      },
      result: '', // 翻译结果
      // timer: null // 延时器id
    },
    // 具体讲解：(1) watch语法 (2) 具体业务实现
    watch: {
      // 该方法会在数据变化时调用执行
      // newValue新值, oldValue老值（一般不用）
      // words (newValue) {
      //   console.log('变化了', newValue)
      // }

      'obj.words' (newValue) {
        // console.log('变化了', newValue)
        // 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
        clearTimeout(this.timer)
        this.timer = setTimeout(async () => {
          const res = await axios({
            url: 'https://applet-base-api-t.itheima.net/api/translate',
            params: {
              words: newValue
            }
          })
          this.result = res.data.data
          console.log(res.data.data)
        }, 300)
      }
    }
  })
</script>

三、watch侦听器

1.语法

完整写法 —>添加额外的配置项

  1. deep:true 对复杂类型进行深度监听
  2. immdiate:true 初始化 立刻执行一次
data: {
  obj: {
    words: '苹果',
      lang: 'italy'
  },
},

  watch: {// watch 完整写法
    对象: {
      deep: true, // 深度监视
        immdiate:true,//立即执行handler函数
        handler (newValue) {
        console.log(newValue)
      }
    }
  }

2.需求

  • 当文本框输入的时候 右侧翻译内容要时时变化
  • 当下拉框中的语言发生变化的时候 右侧翻译的内容依然要时时变化
  • 如果文本框中有默认值的话要立即翻译

3.代码实现

<script> 
  const app = new Vue({
    el: '#app',
    data: {
      obj: {
        words: '小黑',
        lang: 'italy'
      },
      result: '', // 翻译结果
    },
    watch: {
      obj: {
        deep: true, // 深度监视
        immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
        handler (newValue) {
          clearTimeout(this.timer)
          this.timer = setTimeout(async () => {
            const res = await axios({
              url: 'https://applet-base-api-t.itheima.net/api/translate',
              params: newValue
            })
            this.result = res.data.data
            console.log(res.data.data)
          }, 300)
        }
      } 
    }
  })
</script>

4.总结

watch侦听器的写法有几种？

1.简单写法

watch: {
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

2.完整写法

watch: {// watch 完整写法
  数据属性名: {
    deep: true, // 深度监视(针对复杂类型)
      immediate: true, // 是否立刻执行一次handler
      handler (newValue) {
      console.log(newValue)
    }
  }
}

lrh122800
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值