2019-01-26

#  VUE的计算属性，方法，侦听器

（1）计算属性，方法，侦听器

```

<div>{{fullName}}</div>

<div>{{fullName()}}</div>//通过调用函数来显示fullName

<div>{{fullName}}</div>//通过侦听器来显示fullName

<script>

var vm = new Vue({

    el:"#app",

    data:{

        firestName:"Dell",

        lastName:"Lee"

        fullName："Dell Lee",//通过侦听器来实现显示效果需要书写定义这个

    },

    //方法可以与计算属性实现同样的效果，但是使用效果不如计算属性

    methods:{

        fullName:()=>{

            return this.firstName + " " + this.lastName

        }

    }

    //计算属性，，计算属性有缓存机制。再为改变fullName中的数据时，重新渲染页面时，可以被直接调用，不需要重新执行，性能更高

    computed:{

        fullName:()=>{

            return this.firstName + " " + this.lastName

        }，

    //侦听器,通过侦听firstName和lastName的改变来显示fullName，与计算属性一样有缓存机制，只有当watch中的值改变时才会重新编译加载。但是比computed复杂

    watch：{

        firstName:()=>{

            this.fullName=this.firstName +  " " + thislastName;

        },

        lastName:()=>{

            this.fullName = this.firstName + " " + this.lastName;

            }

    }

    }

})

</script>

```

（2）计算属性的setter和getter

```

<div id="app">

    {{fullName}}

</div>

<script>

var vm = new Vue({

    el:"#app",

    data:{

        firestName:"Dell",

        lastName:"Lee"

    },

    computed:{

        fullName:{

        //计算属性的get方法

            get:()=>{

              return this.firstName + " " + this.lastName

            }，

            //set接受外部传入的value值

            set:function(value){

            var arr = value.split("");

            this.firstName = arr[0];

            this.lastName = arr[1];

                console.log(value);

            }

        }

    }

</script>

```