Vue学习日记之计算属性

在Vue中存在着普通属性和计算属性，普通属性指的就是那些在data中定义的，直接使用的属性。

   而计算属性指的是：

1. 由computed:{...}定义的

2. 它是一个函数，必须显式的return

3. 像普通属性一样去使用

4. 当function中的data值发生改变时，计算属性才会调用function，此时的计算属性值已经缓存下来

5. 只是引用计算属性，但是data中的值没有改变时，计算属性的function时不会被调用的

6. 计算属性和data中的属性一样都是在beforeCreate()之后才被初始化的，因此计算属性会自行初始化一次

<div id="app">
   <input type="text" v-model="a">+
    <input type="text" v-model="b">=
    <input type="text" v-model="c">
   <p>{{c}}</p>
</div>


</body>

<script>

    /*
    * computed---创建计算属性
    * */
   var vm=new Vue({
       el:'#app',
       data:{
           a:'',
           b:''
       },
       computed:{
    'c':function () {
        console.log('被调用了');
               return this.a+this.b

           }
       }
   })
</script>

运行结果：

   我们可以看到，我们使用p标签引用的c值，并没有引起计算属性c的function回调。因此计算属性只有在function中data的值发生变化时才会发生。值得注意的是，在vue实例初始化的时候，计算属性也会被初始化（function回调，调用一次）