五十八、Vue中的计算属性，方法和侦听器计算属性，方法和侦听器计算属性中的Getter和Setter

72 阅读 0 评论 48 点赞

我是靠谱客的博主紧张超短裙，最近开发中收集的这篇文章主要介绍五十八、Vue中的计算属性，方法和侦听器计算属性，方法和侦听器计算属性中的Getter和Setter，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

@Author：Runsen
@Date：2020/10/15

本篇是水篇，记录前端的学习，争取早日拿到前端offer

计算属性，方法和侦听器

所以，对于任何复杂逻辑，你都应当使用计算属性。（官方原话）

<body>
  <div id="app">
    {{FullName}}
    <!-- 方法使用的{{FullName()}} -->
    {{age}}
  </div>
  <script>
     var vm = new Vue({
       el :  "#app",
       data:{
         FirstName : "Liu",
         LastName: "Runsen",
         FullName: "Liu Runsen",
         age: 21
       },
       // 计算属性 内置缓存 优先
       computed: {
         FullName:function(){
           console.log("计算了一次");
           return this.FirstName + "" + this.LastName
         }
       }
      // 方法
      // methods: {
      //   FullName:function(){
      //     console.log("计算了一次");
      //     return this.FirstName + "" + this.LastName
      //   }
      // },
      // watch侦听器
    //   watch: {
    //     FirstName:function(){
    //       console.log("计算了一次");
    //       this.FullName = this.FirstName + "" + this.LastName
    //     },
    //     LastName:function(){
    //       console.log("计算了一次");
    //       this.FullName = this.FirstName + "" + this.LastName
    //     }
    //   },
     })
  </script>
</body>

计算属性中的Getter和Setter

<body>
  <div id="app">
      {{FullName}}
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data:{
        FirstName : "Liu",
        LastName: "Runsen",
      },
      // 计算属性
      computed: {
        // 
        // FullName:function(){
        //   return this.FirstName + "" + this.LastName
        // }
        FullName:{
          get:function(){
            return this.FirstName + "" + this.LastName
          },
          set:function(value){
            // console.log(value);
            var arr = value.split(" ")
            this.FirstName = arr[0]
            this.LastName = arr[1]
          } 
        }
      },
    })
  </script>
</body>