1.3计算属性computed

 

computed必须是纯函数

 

纯函数：固定的输入得到固定的输出

 

 

扩展：

函数柯里化：函数返回函数

<div id="box">

    {{ name.substring(0,1).toUpperCase()+name.substring(1)}}

</div> 

 

<script>

    var vm = new Vue({

        el:"#box",

        data:{

            name:"da"

        }

    })

</script>

 

---

 

计算属性computed：

<div id="box">

    {{ changeword }}

</div> 

 

<script>

    var vm = new Vue({

        el:"#box",

        data:{

            name:"da"

        },

        computed:{

            changeword:function(){

                return this.name.substring(0,1).toUpperCase() + this.name.substring(1);

            }

        }

    })

</script>

 

 

与methods的区别：

在标签里多次调用menthods方法，console.log执行多次；

而在标签里多次调用computed属性，console.log执行一次，调用缓存结果，

所以：

- 计算属性是基于他们的依赖进行缓存的，（存在js对象里）

- 计算属性只有在他的相关依赖发生改变时才会重新求值

举个例子：

method：

 <el-button type="primary" @click="a++">ADD TO A</el-button>
 <el-button type="primary" @click="b++">ADD TO B</el-button>
 <h3>A-{{a}}</h3>
 <h3>B-{{b}}</h3>
 <h3>age + a = {{addToA()}}</h3>
 <h3>age + b = {{addToB()}}</h3>

data() {
    return {
      a: 0,
      b: 0,
      age: 20,
  }
}

methods: {
    addToA() {
      console.log("ADD TO A");
      return this.a + this.age;
    },
    addToB() {
      console.log("ADD TO B");
      return this.b + this.age;
    },
}

点击A按钮，打印出AB，点击B按钮打印AB,console.log多次执行。

每点击一次都渲染DOM，是非常耗费性能的。

 

computed：

 <el-button type="primary" @click="a++">ADD TO A</el-button>
 <el-button type="primary" @click="b++">ADD TO B</el-button>
 <h3>A-{{a}}</h3>
 <h3>B-{{b}}</h3>
 <h3>age + a = {{addToA}}</h3>
 <h3>age + b = {{addToB}}</h3>

data() {
    return {
      a: 0,
      b: 0,
      age: 20
 }
},
  computed: {
    addToA() {
      console.log("ADD TO A");
      return this.a + this.age;
    },
    addToB() {
      console.log("ADD TO B");
      return this.b + this.age;
    }
  },

点击A按钮，打印出A，点击B打印出B,console.log()只执行一次。

使用的是虚拟DOM,把真是的DOM拷贝一份，操作的是虚拟DOM,虚拟DOM跟真实DOM不同时才会触发这个方法，如果相同就不会触发这个方法，耗时，大量搜索时才用计算属性。

 

---

 

 

v-model: 双向数据绑定  常用于表单元素

watch:监听

<div id="box">

    <p>单价：<input type = "text"  v-model="price"/></p>

    <p>数量：<input type = "text"  v-model="num"/></p>

        <p>总额：<span>{{sum}}</span></p>

</div> 

 

<script>

    var vm = new Vue({

        el:"#box",

        data:{

            price:100,

            num:1,

            sum:0

        },

        watch:{

            "num":function(){

                var sum = this.price*this.num;

                if(sum>1000){

                    this.sum = sum;

                }else{

                    this.sum = sum +100;

                }

            }

            "price":function(){

                var sum = this.price*this.num;

                if(sum>1000){

                    this.sum = sum;

                }else{

                    this.sum = sum +100;

                }

            }

 

        },

 

    })

</script>

          

 

//计算属性：

<div id="box">

    <p>单价：<input type = "text"  v-model="price"/></p>

    <p>数量：<input type = "text"  v-model="num"/></p>

        <p>总额：<span>{{getsum}}</span></p>

</div> 

 

<script>

    var vm = new Vue({

        el:"#box",

        data:{

            price:100,

            num:1,

            sum:0

        },

 

        computed:{

            getsum:function(){

                var sum = this.price*this.num;

                if(sum>1000){

                    this.sum = sum;

                }else{

                    this.sum = sum +100;

                }

            }

        }

 

    })

</script>

 

与watch区别：

watch:只能监测data属性中的单个变量的改变，代码冗余

computed:自动检测依赖，代码更精简

 

 

---

 

 

计算属性 set

 

给计算属性赋值 （意义不大）

 

 

 

 

 

 

不建议这么做，代码难以控制