vue计算属性

Vue.js 的视图不建议书写复杂逻辑，这样不利于维护

封装函数是很好的方式，但有时重复的计算会消耗不必要的性能。

 

 

如何提高执行效率？

计算属性使用时为属性形式，访问时会自动执行对应函数。

 

 

methods 与 computed 区别

• computed 具有缓存型，methods 没有。

• computed 通过属性名访问，methods 需要调用。

• computed 仅适用于计算操作。

准备一个数组，根据数组数据创建列表。

• 要求：当数据大于10时创建 li，否则不创建。

• 思考以下三种实现方式：

• v-if 与 v-for 结合

• v-for 与 methods 结合

• v-for 与 计算属性结合

<div id="app">

        <ul>

            <!-- <li  v-if="item>10" v-for="item in fn()">{{item}}</li> -->

            <!-- <li  v-for="item in fn()">{{item}}</li> -->

            <li v-for="item in result">{{item}}</li>

        </ul>

    </div>

    <script src="javascript/vue.js"></script>

    <script>

        var vm = new Vue({

            el : '#app',

            data:{

                arr:[1,11,2,22,3,33,4,44]

            },

            methods: {

                fn(){

                   var resArr = [];

                   for(var i = 0;i< this.arr.length ; i++) {

                    if(this.arr[i] > 10){

                        resArr.push(this.arr[i]);

                    }

                   }

                   return resArr;

                }

            },

            computed:{

                result(){

                    return this.arr.filter(item => item > 10)

                }

            }

        })

计算属性的 setter

• 计算属性默认只有 getter，Vue.js 也允许给计算属性设置

setter 。

<div id="app">
    <p>{{ fullName }}</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: '张',
        lastName: '三'
      },
      computed: {
        // 默认书写方式：
        /* fullName () {
          return this.firstName + this.lastName;
        } */

        // 分开书写 getter 与 setter
        fullName: {
          get () {
            return this.firstName + this.lastName;
          },
          set (newValue) {
            console.log(newValue)
            var nameArr = newValue.split(' ');
            this.firstName = nameArr[0];
            this.lastName = nameArr[1];
          }
        }
      }
    });
 

计算属性的 setter

• 计算属性默认只有 getter，Vue.js 也允许给计算属性设置

setter 。