vue-计算属性与属性侦听器

一勺雪糕

已于 2023-08-04 09:52:50 修改

阅读量90

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-08-04 09:10:25 首次发布

本文链接：https://blog.csdn.net/TianMing_xe/article/details/132096173

版权

这里计算属性和侦听器，都用简单的加法计算案例来理解一下，以及利用触发方法来运算看一下看一下差别

计算属性

<!DOCTYPE html>
<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>属性计算器</title>
    <script src="../file/vue.js"></script>
  </head>
  <body>
    <div id="test">
      <!-- 这里 v-model.number了解一下，这里输入框的type属性值是text我们在
        从输入框中获取内容是常常是以字符串的形式，即使输入数字也会当成字符串
        处理，这样我们的加法运算只能变成字符的拼接.number则可以将我们输入框
        中输入的数字进行转换，可以进行加减运算，但是在输入框中输入英文字母或
        者汉字之类的依旧会进行字符串拼接，因为这些都是无法转为数字的-->
      第一种商品<input type="text" v-model.number="priceA" /><br />
      第二种商品<input type="text" v-model.number="priceB" /><br />
      总价格为{{count}}元
    </div>
    <script>
      new Vue({
        el: "#test",
        data: {
          priceA: "",
          priceB: "",
        },
        //computed为计算属性的参数，计算属性就是具有返回值的函数，其返回值可以当做data中的属性使用直接渲染到页面上
        computed: {
          //计算属性中的函数名必须为页面属性名以便于对页面进行渲染
          count() {
            //这里做一个判断令输入框中没有值时count的值默认为0
            if (this.priceA == "" && this.priceB == "") {
              //利用return返回值给页面中的插值表达式{{count}}赋值
              return 0;
            }
            //如果输入框中不为空则进行加法运算然后将运算结果进行渲染
            return this.priceA + this.priceB;
          },
        },
      });
    </script>
  </body>
</html>

计算属性效果图

输入框没有值时：

输入框有值时：

属性侦听器

属性侦听器，就是侦听data中的参数，看是否变化，一旦发生变化就执行方法

<!DOCTYPE html>
<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>属性侦听器</title>
    <script src="../file/vue.js"></script>
  </head>
  <body>
    <div id="test">
      第一种商品:<input type="text" v-model.number="priceA" /><br />
      第二种商品:<input type="text" v-model.number="priceB" /><br />
      打折后价格为：{{count}}
    </div>
    <script>
      new Vue({
        el: "#test",
        data: {
          priceA: "",
          priceB: "",
          count: "",
        },
        //watch用于侦听的参数
        watch: {
          //侦听data中的priceA属性是否发生变化，oldValue为变化之前参数，newValue为变化之后参数
          priceA(oldValue, newValue) {
            //变化之后将值与priceB属性值相加赋值给count
            this.count = this.priceA + this.priceB;
          },
          priceB(oldValue, newValur) {
            this.count = this.priceA + this.priceB;
          },
        },
      });
    </script>
  </body>
</html>

效果图

利用方法计算

<!DOCTYPE html>
<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>计算</title>
    <script src="../file/vue.js"></script>
  </head>
  <!-- 计算相加，通过事件的触发将输入框中的值进行运算 -->
  <body>
    <div id="aa">
      <!-- 给输入框绑定失去焦点的事件 -->
      <input type="number" v-model.number="bb" @change="update" />
      <input type="number" v-model.number="cc" @change="update" />
      总价格：{{count}}
    </div>
    <script>
      new Vue({
        el: "#aa",
        data: {
          count: 0,
          bb: "",
          cc: "",
        },
        methods: {
          //失去焦点后触发函数进行运算
          update() {
            this.count = this.bb + this.cc;
            if (this.bb == "" && this.cc == "") {
              this.count = 0;
            }
          },
        },
      });
    </script>
  </body>
</html>

效果图

其中一个输入框没有失去焦点时

输入框全部失去焦点时

总结

个人理解计算属性和属性侦听器，效果上都是相同的，随着输入框的变化进行不断地运算，区别计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；侦听器更多的是观察的作用，支持异步，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

利用触发事件函数进行运算不会随着输入框中信息的变化不断运算，只有在触发了事件才会调用方法进行运算