Vue的计算属性,方法与侦听器以及计算属性的 getter 和 setter

最新推荐文章于 2023-02-20 08:37:28 发布

xyphf_和派孔明

最新推荐文章于 2023-02-20 08:37:28 发布

阅读量276

点赞数

分类专栏： vue.js入门

本文链接：https://blog.csdn.net/xyphf/article/details/83691681

版权

vue.js入门专栏收录该内容

93 篇文章 6 订阅

订阅专栏

本文深入探讨Vue.js中计算属性的使用方法与优势，包括简洁的语法、高效的性能表现，以及与方法、侦听器的区别。通过实例展示了计算属性的getter和setter如何工作，帮助开发者更好地理解和应用Vue计算属性。

摘要由CSDN通过智能技术生成

计算属性：优先推荐，原因：既简洁又性能高

<body>
  <div id="app">
    {{fullName}}
    {{age}}
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'hello',
        lastName: 'world',
        age: 28
      }, 
      // 计算属性
      computed: {
        fullName: function() {
          console.log("计算了一次");
          return this.firstName + " " + this.lastName;
        }
      }
    })
  </script>
<body>

方法

<body>
  <div id="app">
    {{fullName()}}
    {{age}}
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'hello',
        lastName: 'world',
        age: 28
      }, 
      methods: {
        fullName: function() {
          console.log("计算了一次");
          return this.firstName + " " + this.lastName;
        }
      }
    })
  </script>
<body>

侦听器

<body>
  <div id="app">
    {{fullName}}
    {{age}}
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'hello',
        lastName: 'world',
        fullName: 'hello world',
        age: 28
      },
      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: 'hello',
        lastName: 'world',
      }, 
      // 计算属性
      computed: {
        fullName: {
          get: function() {
            console.log("计算了一次");
            return this.firstName + " " + this.lastName;
          }
          set: function(value) {
            var arr = value.split(" ");
            this.firstName = arr[0];
            this.lastName = arr[1];
          }
        }
      }
    })
  </script>
<body>