2.4、Vue2计算属性

于 2025-04-11 11:54:03 发布
阅读量1.1k 收藏 18
点赞数 29
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/GQL___/article/details/147140620
版权

2.4.1、插值语法实现反转字符串

  <body>
    <!-- 需求：用户输入字符串，然后反转展示在页面中 -->
    <div id="app">
      <h1>{{msg}}</h1>
      输入的信息：<input type="text" v-model="info" /> <hr />
    <!--
        直接写在插值语法中，有以下三个问题：
            1. 可读性差。
            2. 代码没有得到复用。
            3. 难以维护。
         -->
      反转的信息：{{info.split('').reverse().join('')}} <hr />
      反转的信息：{{info.split('').reverse().join('')}} <hr />
      反转的信息：{{info.split('').reverse().join('')}} <hr />
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "插值语法-反转字符串案例",
          info: "",
        },
      });
    </script>
  </body>

vue官网中说：

模版内的表达式以及指令语法非常便利，但设计他们的初衷是用于简单运算，在模版中放入太多的逻辑会让模版过重且难以维护

2.4.2、方法实现反转字符串

  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      输入的信息：<input type="text" v-model="info" /> <br />
      <!-- 在插值语法中可以调用方法，小括号不能省略。
        这个方法需要是Vue实例所管理的。 -->
      反转的信息：{{reverseInfo()}} <br />
      <!-- 缺点：效率有问题 会重复调用 -->
      反转的信息：{{reverseInfo()}} <br />
      反转的信息：{{reverseInfo()}} <br />
      反转的信息：{{reverseInfo()}} <br />

    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "计算属性-反转字符串案例",
          info: "",
        },
        methods: {
          // 反转信息的方法
          reverseInfo() {
            return this.info.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>

2.4.3、计算属性实现反转字符串

1. 什么是计算属性？

使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性。

Vue的原有属性: data对象当中的属性可以叫做Vue的原有属性。

全新的属性: 表示生成了一个新的属性，和data中的属性无关了，新的属性也有自己的属性名和属性值。

2. 计算属性的作用？

代码得到了复用。

代码更加便于维护了。

代码的执行效率高了。

3. 计算属性怎么用？

语法格式：

computed : {// 这是一个计算属性，可以有多个计算属性

计算属性1 : {

// 当读取计算属性1的值的时候或该计算属性所关联的Vue原有属性的值发生变化时，getter方法被自动调用。

get(){},

// 当修改计算属性1的值的时候，setter方法被自动调用。

set(val){}

},

计算属性2 : {},

}

(1)计算属性需要使用新的配置项：computed

(2)计算属性通过vm.$data ，vm._data 是无法访问的。

(3)计算属性的getter/setter方法中的this是vm。

(4)计算属性的getter方法的调用时机：

①第一个时机：初次访问该属性。

②第二个时机：计算属性所依赖的数据发生变化时。

(5)计算属性的setter方法的调用时机：

①当计算属性被修改时。（在setter方法中通常是修改属性，因为只有当属性值变化时，计算属性的值就会联动更新。注意：计算属性的值被修改并不会联动更新属性的值。）

(6)计算属性没有真正的值，每一次都是依赖data属性计算出来的。

(7)计算属性的getter和setter方法不能使用箭头函数，因为箭头函数的this不是vm。而是window。

 <body>
    <div id="app">
      <h1>{{msg}}</h1>
      输入的信息：<input type="text" v-model="info" /> <br />
      反转的信息：{{reversedInfo}}<br />
      反转的信息: <input type="text" v-model="reversedInfo" />

      <!-- 多次调用计算属性，只会执行一次，效率高 -->
      {{fun}} <br />
      <!-- {{fun}} <br />
      {{fun}} <br />
      {{fun}} <br />
      {{fun}} <br /> -->
      <!-- 多次调用方法，每次都是执行，效率低 -->
      <!-- {{hello()}} <br />
      {{hello()}} <br />
      {{hello()}} <br />
      {{hello()}} <br />
      {{hello()}} <br /> -->
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "计算属性-反转字符串案例",
          info: "",
        },
        methods: {
          hello() {
            console.log("hello方法执行了");
            return "hello";
          },
        },
        computed: {
          // 可以定义多个计算属性
          fun: {
            // get方法的调用时机
            get() {
              console.log("getter方法调用了");
              //console.log(this === vm)
              return "haha" + this.info;
            },
            // 不能使用箭头函数，使用箭头函数会导致this的指向是：window
            // get:()=>{
            //     console.log('getter方法调用了')
            //     console.log(this === vm)
            //     return 'haha'
            // },
            set(val) {
              console.log("setter方法调用了");
              //console.log(this === vm)
            },
          },
          // 完整写法
          /* reversedInfo : { 
                get(){
                    return this.info.split('').reverse().join('')
                },
                // 当修改计算属性的时候，set方法被自动调用。
                set(val){
                    //console.log('setter方法被调用了。')
                    // 不能这么更改计算属性的值，这样做就递归了。
                    //this.reversedInfo = val
                    // 怎么修改计算属性呢？原理：计算属性的值变还是不变，取决于计算属性关联的Vue原始属性的值。
                    // 也就是说：reversedInfo变还是不变，取决于info属性的值变不变。
                    // 将值赋给info，通过info来实现反推修改，
                    //例如，需要将翻转值修改为hello，则需要反转给info，通过info再反转回来
                    // 本质上：修改计算属性，实际上就是通过修改Vue的原始属性来实现的。
                    this.info = val.split('').reverse().join('')
                }
            } */

          // 简写形式：set不需要的时候。
          reversedInfo() {
            return this.info.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
4、计算属性的简写形式

只考虑读取，不考虑修改时，可以启用计算属性的简写形式。

1. computed : {  
2.     reversedInfo(){  
3.         console.log('getter被调用了');  
4.         return this.info.split('').reverse().join('')  
5.     }  
6. }

2.5、侦听属性

2.5.1、侦听属性作用

侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时，执行某段代码。

2.5.2、watch配置项

监视属性变化时需要使用watch配置项
可以监视多个属性，监视哪个属性，请把这个属性的名字拿过来即可。
i.可以监视Vue的原有属性
ii.如果监视的属性具有多级结构，一定要添加单引号：'a.b'
iii.无法直接监视对象深层次属性，如a.b，b属性压根不存在。
iv.启用深度监视，默认是不开启深度监视的。
v.也可以监视计算属性

2.5.3、如何深度监视：

(1) 监视多级结构中某个属性的变化，写法是：’a.b.c’ : {}。注意单引号哦。
(2) 监视多级结构中所有属性的变化，可以通过添加深度监视来完成：deep : true

2.5.4、 如何后期添加监视：

(1) 调用API：vm.$watch(‘number1’, {})

2.5.5、 watch的简写：

(1) 简写的前提：当不需要配置immediate和deep时，可以简写。

(2) 如何简写？

① watch:{

number1(newVal,oldVal){},

number2(newVal, oldVal){}

}

(3) 后期添加的监视如何简写？

① vm.$watch(‘number1’, function(newVal, oldVal){})

  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      数字：<input type="text" v-model="number" /><br />
      数字：<input type="text" v-model="a.b" /><br />
      数字：<input type="text" v-model="a.c" /><br />
      数字：<input type="text" v-model="a.d.e.f" /><br />
      数字(后期添加监视)：<input type="text" v-model="number2" /><br />
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "侦听属性的变化",
          // 原有属性
          number: 0,
          //   多层次属性
          a: {
            b: 0,
            c: 0,
            d: {
              e: {
                f: 0,
              },
            },
          },
          number2: 0,
        },
        // 计算属性
        computed: {
          hehe() {
            return "haha" + this.number;
          },
        },
        watch: {
          //1、可以监视多个属性，监视哪个属性，请把这个属性的名字拿过来即可。
          //1.1 可以监视Vue的原有属性
          /* number : {
            // 初始化的时候，调用一次handler方法。
            immediate : true,
            // 这里有一个固定写死的方法，方法名必须叫做：handler
            // handler方法什么时候被调用呢？当被监视的属性发生变化的时候，handler就会自动调用一次。
            // handler方法上有两个参数：第一个参数newValue，第二个参数是oldValue
            // newValue是属性值改变之后的新值。
            // oldValue是属性值改变之前的旧值。
            handler(newValue, oldValue){
                console.log(newValue, oldValue)
                // this是当前的Vue实例。
                // 如果该函数是箭头函数，这个this是window对象。不建议使用箭头函数。
                console.log(this)
            }
                }, */
          //1.2 如果监视的属性具有多级结构，一定要添加单引号：'a.b'
          /* 'a.b' : {  
                    handler(newValue, oldValue){
                        console.log('@')
                    } 
                },

                'a.c' : {  
                    handler(newValue, oldValue){
                        console.log('@')
                    } 
                }, */
          // 无法监视b属性，因为b属性压根不存在。
          /* b : {  
                    handler(newValue, oldValue){
                        console.log('@')
                    } 
                } */
          //1.3 启用深度监视，默认是不开启深度监视的。
          a: {
            // 什么时候开启深度监视：当你需要监视一个具有多级结构的属性，并且监视所有的属性，需要启用深度监视。
            deep: true,
            handler(newValue, oldValue) {
              console.log("@");
            },
          },
          //1.4 也可以监视计算属性
          /* hehe : {
                    handler(a , b){
                        console.log(a, b)
                    }
                } */

          //2、 监视某个属性的时候，也有简写形式，什么时候启用简写形式？
          // 当只有handler回调函数的时候，可以使用简写形式。
          number(newValue, oldValue) {
            console.log(newValue, oldValue);
          },
        },
      });

      //3、 如何后期添加监视？调用Vue相关的API即可。
      //3.1 语法：vm.$watch('被监视的属性名', {})
      /* vm.$watch('number2', {
            immediate : true,
            deep : true,
            handler(newValue, oldValue){
                console.log(newValue, oldValue)
            }
        }) */

      //3.2 这是后期添加监视的简写形式。
      vm.$watch("number2", function (newValue, oldValue) {
        console.log(newValue, oldValue);
      });
    </script>
  </body>

2.5.6. computed和watch如何选择？

比大小的案例

2.5.6.1、watch实现
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      数值1：<input type="number" v-model="num1" /><br />
      数值2：<input type="number" v-model="num2" /><br />
      比较大小：{{compareResult}}
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "比较大小的案例",
          num1: 0,
          num2: 0,
          compareResult: "",
        },
        watch: {
          // 监视num1
          num1: {
            immediate: true,
            handler(val) {
              let result = val - this.num2;
              if (result == 0) {
                this.compareResult = val + " = " + this.num2;
              } else if (result > 0) {
                this.compareResult = val + " > " + this.num2;
              } else {
                this.compareResult = val + " < " + this.num2;
              }
            },
          },
          // 监视num2
          num2: {
            immediate: true,
            handler(val) {
              let result = this.num1 - val;
              if (result == 0) {
                this.compareResult = this.num1 + " = " + val;
              } else if (result > 0) {
                this.compareResult = this.num1 + " > " + val;
              } else {
                this.compareResult = this.num1 + " < " + val;
              }
            },
          },
        },
      });
    </script>
  </body>
2.5.6.2、computed实现
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      数值1：<input type="number" v-model="num1" /><br />
      数值2：<input type="number" v-model="num2" /><br />
      比较大小：{{compareResult}}
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "比较大小的案例",
          num1: 0,
          num2: 0,
        },
        computed: {
          // 计算属性的简写形式
          compareResult() {
            let result = this.num1 - this.num2;
            if (result == 0) {
              return this.num1 + " = " + this.num2;
            } else if (result > 0) {
              return this.num1 + " > " + this.num2;
            } else {
              return this.num1 + " < " + this.num2;
            }
          },
        },
      });
    </script>
  </body>
2.5.6.3、总结

(1) 以上比较大小的案例可以用computed完成，并且比watch还要简单。所以要遵守一个原则：computed和watch都能够完成的，优先选择computed。

(2) 如果要开启异步任务，只能选择watch。因为computed依靠return。watch不需要依赖return。

比较大小的案例：延迟3s出现结果

    watch: {
          // 监视num1
          num1: {
            immediate: true,
            handler(val) {
              let result = val - this.num2;
              // 需求2:3s后出现比较结果
              //  此时使用箭头函数，箭头函数没有this，会向上找到num1，num1是vm的属性，
              //   如果将此时箭头函数转成普通函数，this就会是window
              setTimeout(() => {
                if (result == 0) {
                  this.compareResult = val + " = " + this.num2;
                } else if (result > 0) {
                  this.compareResult = val + " > " + this.num2;
                } else {
                  this.compareResult = val + " < " + this.num2;
                }
              }, 3000);
            },
          },

          // 监视num2
          num2: {
            immediate: true,
            handler(val) {
              let result = this.num1 - val;
              setTimeout(() => {
                if (result == 0) {
                  this.compareResult = this.num1 + " = " + val;
                } else if (result > 0) {
                  this.compareResult = this.num1 + " > " + val;
                } else {
                  this.compareResult = this.num1 + " < " + val;
                }
              }, 3000);
            },
          },
        },
      
 computed: {
          // 计算属性的简写形式
          // 计算结果3s后显示，由于setTimeout是异步的，是有js引擎调用的，所以它的this是window，可以使用箭头函数
          compareResult() {
            setTimeout(() => {
              let result = this.num1 - this.num2;
              if (result == 0) {
                return this.num1 + " = " + this.num2;
              } else if (result > 0) {
                return this.num1 + " > " + this.num2;
              } else {
                return this.num1 + " < " + this.num2;
              }
            }, 3000);
          },

2.5.7. 关于函数的写法，写普通函数还是箭头函数？

(1) 不管写普通函数还是箭头函数，目标是一致的，都是为了让this和vm相等。

(2) 所有Vue管理的函数，建议写成普通函数。

(3) 所有不属于Vue管理的函数，例如setTimeout的回调函数、Promise的回调函数、AJAX的回调函数，建议使用箭头函数。

@Cedric
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值