1 计算属性的基本了解1.1 认识Mustache语法的不做

模板中的表达式非常便利，但设计的初衷时为了简单的运算，如果时复杂的逻辑运算，会比较难以维护，不容易理解其中的意思，

例如:

<div id="app">    <!-- 正常绑定数据 -->    {{msg}}    <!-- 对数据进行逻辑处理, 反向字符串 -->    {{msg.split("").reverse().join("")}}    <!-- 多次使用功能反向逻辑 -->    {{msg.split("").reverse().join("")}}    {{msg.split("").reverse().join("")}}    {{msg.split("").reverse().join("")}}</div><script>       const vm = new Vue({        el: "#app",        data: {            msg: "hello",        }    })</script>

这样就非常不方便,因为如果我需要多次使用这个逻辑时就不那么方便了，所以对于任何复杂的逻辑运算，你都需要使用逻辑运算。

同时将太多的逻辑放入模板中处理，就会使得模板很臃肿，这样不利于代码的维护。

1.2 使用方法弥补Mustache的不足

那么我们首先可能会想到的及时使用方法, 把这些复杂的逻辑定义为一个方法, 然后通过多次调用这个方法来达到逻辑复用的目的

例如

<div id="app">    <!-- 利用方法来处理逻辑 -->    {{ reverseStr() }}    <!-- 多次调用方法复用代码逻辑 -->    {{ reverseStr() }}    {{ reverseStr() }}    {{ reverseStr() }}</div><script>       const vm = new Vue({        el: "#app",        data: {            msg: "hello",        },        methods: {            reverseStr(){                return this.msg.split("").reverse().join("")            }        }    })</script>

其实我们发现这样可以达到复用的目的, 但是如果我们测试就会发现,函数在每一次调用的时候都会执行, 都会重新计算, 如果调用100次,函数就会执行100次, 对于性能不是特别好, 因为每一次的结果都是一样的

那么我们有没有办法吧数据缓存下来呢, 就不用每次都计算了呢?还真有

1.3 计算属性的了解

Vue给我们提供了一个计算属性Computed, 计算属性中的方法也是函数, 但是跟方法不同, 计算数据会将计算的结果挂在到Vue实例对象的属性上. 这样每次调用的时候,都是在调用Vue实例的属性, 这样我们同样的逻辑计算的结果就得到了缓存,每次使用属性值就可以了

例如:

<div id="app">    <!-- 利用计算属性来处理逻辑 -->    {{ reverseMsg }}    {{ reverseMsg }</div><script>       const vm = new Vue({        el: "#app",        data: {            msg: "hello",        },        methods: {            reverseStr(){                console.log(11)                return this.msg.split("").reverse().join("")            }        },        computed:{            reverseMsg(){                return this.msg.split("").reverse().join("")            }        }    })</script>

这里我们在Vue 的 computed 属性中定义了一个方法 reverseMsg , Vue会自动计算这个方法的结果, 不需要我们自己调用, vue会将计算后的结果添加给Vue 实例对象的同名属性. 这就是我们所说的计算属性

因为是属性的关系,我们在{{}}中使用的使用不需要添加()执行, 就跟我们平时调用data 属性中的数据一样使用就好了

而且我们可以测试在多次调用计算属性的时候, 计算属性会不会被多次调用,

computed:{    reverseMsg(){        console.log(22)        return this.msg.split("").reverse().join("")    }}

我们会发现无论你使用多少次计算属性, 计算属性的方法都只会执行一次,

这样就有弥补了Mustache语法和方法复用逻辑带来的问题

1.4 数据发生变化

如果如果我的数据发生了变化, 那计算后的结果也应该发生变化, 那么在数据发生变化的时候, 计算属性会不会执行呢,答案是肯定的.

例如:

<div id="app">    <!-- 利用计算属性来处理逻辑 -->    {{ reverseMsg }}    {{ reverseMsg }}    <!-- 点击按钮改变数据 -->    <button @click="changeMsg">点击改变数据</button></div><script>       const vm = new Vue({        el: "#app",        data: {            msg: "hello",        },        methods: {            changeMsg(){                this.msg = "word"            }        },        computed:{            reverseMsg(){                console.log(22)                return this.msg.split("").reverse().join("")            }        }    })</script>

通过案例; 当我们点击改变数据按钮的时候, 数据发生变化, 数据一定发生变化,就会自动触发依赖这个数据的计算属性的方法, 通过计算的得到的结果将会覆盖原来的属性的结果, 也就会重现渲染页面结果

1.5 为什么称呼为计算属性

很多小伙伴要问? 为什么说他是属性而不是方法呢,铭铭就是定义了一个函数嘛

其实这个问题只要理解对象的属性和方法的区别就能理解

例如

var obj = {    name:'姓名',    eat: function(){        console.log("吃饭")    }}

这个对象,我们称obj对象有一个属性name,和方法eat,为什么这么叫

其实eat也是obj对象的属性, 只不过这个属性值是一个函数,我们把属性值为函数的属性成为方法, 因为函数能实现一定的功能.

理解了属性和方法的区别以后,我们在来理解Vue的计算属性.

此时我们去控制台打印Vue实例化对象

代码就是上面计算属性那一节的代码,

通过在控制台的打印我们发现,Vue初始化的选项对象中,无论是data属性,methods属性还是computed属性中的值都会挂载在Vue实例化对象身上,成为Vue实例对象的属性.

此时也会发现,

methods属性中的值在成为Vue实例对象属性时值为函数,所以叫methods为方法属性.data属性中的中数据成为Vue实例对象属性是值就是data中定义的值,有趣的是computed属性中定义的reverseMsg是一个函数, 但是在成为Vue实例对象属性后,结果却不是函数,而是函数的执行结果

所以现在能理解为什么称为计算属性了吧,因为computed属性中的方法名会成为Vue实例对象的属性,但是值不是函数,所以不会被称呼为方法,同时因为属性的值是计算而来的,一次称呼计算属性.

2. 计算属性的getter和setter2.1 计算属性语法的了解

重点要注意这个属性,computed是属性不是方法

方法是不会有缓存的,但是computed会根据依赖(依赖是归vue管理的数据,可以响应式的变化)的变化重新处理逻辑进行数据的缓存

其实计算由两部分组成,为get和set(不能只写set),一般情况下通过js赋值影响其他人或者表单元素设置值的时候会调用set方法

其实想想就能理解, 对象的属性, 获取的时候不就是get 当你改变对象属性的值,不就是重新赋值了嘛,也就是set啊,

语法:

{    computed:{         // 计算属性写成对象,就需要手动设置get方法,set方法        sum:{            get(){                // 获取时调用的方法              },            set(val){                    // 设置时调用           }        },                    // 如果计算属性写成函数,默认调用的就是get方法,没有set方法         sum(){         }    }}

2.2 get 语法

那么我们首先来看get 获取计算属性的值

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

我们默认的计算就是只有get操作

例如:

一般都没有set,只有输入框这种可能有set

<div id="app">    <!-- 显示计算属性结果-->    <div>        firstname:        <input type="text" v-model="firstName">    </div>    <div>        lastname:        <input type="text" v-model="lastName">    </div>    <div>        getfullname:        <input type="text" v-model="fullName">    </div>    <div>        setfullname:        <input type="text" v-model="fullName">    </div></div><script>       const vm = new Vue({        el: "#app",        data: {            firstName:"Foo",            lastName: "Bar",        },        computed:{            // 这里Fullname只有get功能            fullName(){                return this.firstName + ' ' + this.lastName            }        }    })</script>

我们发现每次计算属性FullName所依赖的firstname 和lastname 值一旦发生变化, FullName也将重新计算获取最新的计算结果,

2.3 set语法

但是如果我想改变计算属性的值,能不能反向的修改firstname 和lastname的值呢, 发现不可以,因为我们没有添加set计算属性设置

如果想添加计算属性的set功能,我们就的改变咱们计算属性的写法

<script>       const vm = new Vue({        el: "#app",        data: {            firstName:"Foo",            lastName: "Bar"        },        computed:{            fullName:{                // 计算属性的get                get(){                    console.log("get")                    return this.firstName + ' ' + this.lastName                },                // 计算属性的set, set是设置,设置就需要新值传入                set(value){                    console.log("set")                    let fullNameArr = value.split(" ");                    this.firstName = fullNameArr[0] ? fullNameArr[0]: '';                    this.lastName = fullNameArr[1] ? fullNameArr[1]: '';                }            }        }    })</script>

3. 案例区案例: 全选按钮

<div id="app">    <!-- 全选案例-->    <div>        全选: <input type="checkbox" v-model="checkAll">    </div>    <ul>        <li            v-for="fruit in fruits"             :key="fruit.title"            >            <input type="checkbox" v-model="fruit.isSelect">            {{fruit.title}}: 价格{{fruit.price}}元/斤        </li>    </ul></div><script>       const vm = new Vue({        el: "#app",        data: {            fruits:[                {                    title:"西瓜",                    price: 10,                    isSelect:false,                },                {                    title:"苹果",                    price: 22,                    isSelect:false,                },                {                    title:"香蕉",                    price: 11,                    isSelect:false,                }            ]        },        computed:{            checkAll:{                get(){                    console.log(11)                    // 如果用户全部选中,那么计算数据返回true,否则返回false                    return this.fruits.every((fruit) => {                        return fruit.isSelect;                    })                },                set(isCheckAll){                    // 更加用户是否点击全选改变数据里的选中问题                    this.fruits.forEach(fruit => {                        fruit.isSelect = isCheckAll                    });                }            }        }    })</script>