Vue基础之动态绑定数据（methods方法和计算属性对比）

1.template中写入布局

   

    动态添加1：

    动态添加2：

    全名（methods完成）：{{addTotalName()}}

   

    全名(计算属性完成)：{{fullName}}

2.script代码

data中写入属性

methods: {

addTotalName(){

      //Vue中methods中this是指向Vue，在Vue外的this指向window

      return this.firstName+"-"+this.secondName;

    }

}

计算属性fullName本身不存在，通过已有的"属性"计算而来,即Vue中data中自定义的属性

  原理：底层借助了Object.defineProperty中的getter和setter

  计算属性最终会出现在Vue本身上，直接用即可，如以上直接拿fullName即可

  computed:{

    //fullName为计算出来的新属性

      fullName:{

        //get有什么用？当有人读取fullName时，get会被调用，且返回值为fullName的值

        //get什么时候调用？

        //1.由于computed计算属性有缓存机制，在初次读取fullName时，会调用

        //2.所依赖的数据（this.firstName，this.secondName）发生变化时候会调用

        get(){

            return this.firstName+"-"+this.secondName;

        },

        //set是fullName需要被修改的时候调用,value为修改后的值

        set(value){

            //可以通过value.split("-")[0],[1]获取到新的值赋值给this.firstName和this.secondName

        }

      }

  }

总结：计算属性相对于methods数据绑定，其特点是有缓存，methods没有缓存，fullName重复被读取且依赖数据无变化时，只调用一次，故相对于methods方法绑定更能节省资源，性能更加优化；methods则在重复读取时候被多次调用，即读取一次调用一次。