2.5、计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_60060362/article/details/144396153

2.5.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.5.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.5.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. }