1 Vue计算属性简介

　　1）定义：我们需要一个属性，但是这个属性不存在，但是可以通过已有的属性计算得来，那么就可以定义一个计算属性。

　　2）原理：底层借助了Object.defineproperty方法提供的getter和setter

　　3）get什么时候调用 :

　　　　初次读取fullName时

　　　　所依赖的数据发生变化时

　　4）优势：与methods实现相比，内部有缓存机制（复用），效率更高，调用方便

　　5）其它

　　　　计算属性最终会出现在vm上，直接读取使用即可

　　　　计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

　　　　计算属性和data属性都是属性-不能重名

 

2 场景演示

　　如下图，有两个输入框，一个标题，标题的值由第一个输入框和第二个输入框的值通过'-'拼接，并且每个输入框最多只取5个字符

　

 

2.1 使用v-bind实现

<body>

   <div id="root">
    <input v-model="name" ></input> <br/><br/>
    <input v-model="address" ></input> <br/> <br/>
    <h1>{{name.slice(0,5)}}-{{address.slice(0,5)}}</h1>

   </div>

   <script type="text/javascript" >
    const vm = new Vue({
        el:'#root',
        data:{
            name:'历史',
            address:'杭州'
        }
    })

    </script>
</body>

 

2.2 使用函数实现

2.2.1 示例

<body>

   <div id="root">
    <input v-model="name" ></input> <br/><br/>
    <input v-model="address" ></input> <br/> <br/>
    <h1>{{nameAndaddress()}}</h1>

   </div>

   <script type="text/javascript" >
    const vm = new Vue({
        el:'#root',
        data:{
            name:'历史',
            address:'杭州'
        },
        methods: {
            nameAndaddress(){
                return this.name.slice(0,5) + '-' + this.address.slice(0,5)
            }
        },
    })

    </script>
</body>

 

 

2.2.2 示例2

　　标题变为三个

<body>

    <div id="root">
     <input v-model="name" ></input> <br/><br/>
     <input v-model="address" ></input> <br/> <br/>
     <h1>{{nameAndaddress()}}</h1>
     <h1>{{nameAndaddress()}}</h1>
     <h1>{{nameAndaddress()}}</h1>
 
    </div>
 
    <script type="text/javascript" >
     const vm = new Vue({
         el:'#root',
         data:{
             name:'历史',
             address:'杭州'
         },
         methods: {
             nameAndaddress(){
                console.log('nameAndaddress函数被调用')
                 return this.name.slice(0,5) + '-' + this.address.slice(0,5)
             }
         },
     })
 
     </script>
 </body>

 

 

 发现函数被调用了三次

 

2.3 使用计算属性

2.3.1 示例

　　计算属性中我们直接返回一个字符串，实际上它默认给我们定义了getter函数

<body>

 <div id="root">
  <input v-model="name" value="张三"></input> <br/><br/>
  <input v-model="address" value="杭州"></input> <br/>
  <h1>{{nameAddress}}</h1>

 </div>

 <script type="text/javascript" >

  const vm = new Vue({
    el:'#root',
    data:{
      name:'历史',
      address:'杭州'
    },
    computed:{
      nameAddress(){
        return this.name.slice(0,5) + "-" + this.address.slice(0,5)
      }
    }
  })

  </script>
</body>

　　完整写法

<body>

 <div id="root">
  <input v-model="name" value="张三"></input> <br/><br/>
  <input v-model="address" value="杭州"></input> <br/>
  <h1>{{nameAddress}}</h1>

 </div>

 <script type="text/javascript" >

  const vm = new Vue({
    el:'#root',
    data:{
      name:'历史',
      address:'杭州'
    },
    computed:{
      nameAddress:{
        get(){
            console.log('getter调用')
            return this.name.slice(0,5) + "-" + this.address.slice(0,5)
        }
        
      }
    }
  })

  </script>
</body>

 

 我们可以发现，getter函数在初始化的时候被调用一次，在两个输入框的值改变的时候也被调用了，因为getter函数会在所依赖的数据发生变化时被调用

 

2.3.2 计算属性的缓存机制

　　把标题变为三个

<body>

 <div id="root">
  <input v-model="name" value="张三"></input> <br/><br/>
  <input v-model="address" value="杭州"></input> <br/>
  <h1>{{nameAddress}}</h1>
  <h1>{{nameAddress}}</h1>
  <h1>{{nameAddress}}</h1>

 </div>

 <script type="text/javascript" >

  const vm = new Vue({
    el:'#root',
    data:{
      name:'历史',
      address:'杭州'
    },
    computed:{
      nameAddress:{
        get(){
            console.log('getter调用')
            return this.name.slice(0,5) + "-" + this.address.slice(0,5)
        }
        
      }
    }
  })

  </script>
</body>

 

 

发现getter函数值调用了一次。因为计算属性采用了缓存机制

计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

 

2.4 比较三种方法的优劣

　　第一种：直接使用数据绑定

　　　　看起来比较方便。但是，我们对于模板的要求是尽量清晰简洁。在{{}}进行处理，如果更复杂一点，就会放入过多的代码，有悖于这个原则。

　　　　代码复用性低。

　　第二种：函数

　　　　没有缓存机制

　　第三章：计算属性

　　　　有缓存机制

 

3 vue计算属性语法

3.1 完整语法

    computed: {
        计算属性名: {
            set(值){

            },
            get(){
                return 值
            }
        }
    }

 

3.2 简写语法

　　只有getter函数的时候

computed: {
        计算属性名(){
            return xxx
        }
    }

 

4 完整写法的示例

<body>

 <div id="root">
  <input v-model="name"></input> <br/><br/>
  <input v-model="address" ></input> <br/>
  <input v-model="nameAddress"></input>


 </div>

 <script type="text/javascript" >

  const vm = new Vue({
    el:'#root',
    data:{
      name:'历史',
      address:'杭州'
    },
    computed:{
      nameAddress:{
        get(){
            console.log('getter调用')
            return this.name.slice(0,5) + "-" + this.address.slice(0,5)
        },
        set(value){
            console.log(value)
            this.name='heiheihei'
            this.address='xixixi'
        }
        
      }
    }
  })

  </script>
</body>