[Book]Vue.js权威指南（脸谱）第四章计算属性

第四章计算属性

一.什么是计算属性

1. 计算属性：当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。
2. computed中的getter

<div id="app">
    我的全名：{
   
   {fullName}}
    <br>
    我的年龄：{
   
   {age}}岁
</div>
<script>
    var vm = new Vue({
     
     
        el:"#app",
        data:{
     
     
            firstName:"Dell",
            lastName:"Lee",
            age:28
        },
        //计算属性
        computed:{
     
     
            fullName:function(){
     
     
                console.log("计算了一次");
			return	this.firstName + " " + this.lastName
            }
        }
    })
</script>

3. computed中的getter和setter

<div id="app">
    我的全名：{
   
   {fullName}}
</div>
<hr>
<p>  在控制台输入  vm.fullName='Alice Rachel'  从而改变fullName的值</p>
<p>Alice Rachel  是输出的</p>
<p>"Alice Rachel"  是返回的</p>
<script>
    var vm = new Vue({
     
     
        el:"#app",
        data:{
     
     
            firstName:"Dell",
            lastName:"Lee",
        },
        //计算属性
        computed:{
     
     
            fullName:{
     
     
                get:function(){
     
     
                    return	this.firstName + " " + this.lastName
                },
                set:function(value){
     
     
                    console.log(value);
                }

            }
        }
    })

</script>

<div id="app">
    {
   
   {fullName}}
</div>
<hr>
<!--：var arr = value.split(""); this.firstName = arr[0]; this.lastName = arr[1];-->
<p>在控制台输入   vm.firstName='Alice'</p>
<p>页面的firstName会改变为 "Alice"</p>
<p>在控制台输入   vm.lastName='Rachel'</p>
<p>页面的lastName会改变为 "Rachel"</p>

"Rachel"
<script>
    var vm = new Vue({
     
     
        el:"#app",
        data:{
     
     
            firstName:"Dell",
            lastName:"Lee",
        },
        //计算属性
        computed:{
     
     
            fullName:{
     
     
                get:function(){
     
     

                    return	this.firstName + " " + this.lastName
                },
                set:function(value){
     
     
                    var arr = value.split("");
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                    console.log(value);
                }

            }
        }
    })
</script>

二.计算属性缓存

三.常见问题

1. 计算属性getter不执行的场景
2. 在v-repeat中使用计算属性
   有时候从后端获得JSON数据集合后，我们需要对单条数据应用计算属性。