计算属性

vue2
1.4k 词
计算属性

计算属性#

概念：基于 现有的数据 ，计算出来的 新属性 。依赖的数据变化，自动重新计算

语法：

  1. 声明在 computed配置项 （与data/methods等同列） 中，一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用： {{ 计算属性名 }}

计算属性--可以将一段 求值的代码 进行封装 

computed: {
    计算属性名(){
        基于现有数据，编写求值逻辑
        return 结果
    }
},

案例-小黑的礼物清单#

名字 数量
{{ item.name }} {{ item.num }}个

礼物总数：{{ totalCount }}个

<table>
    <thead>
        <tr>
            <th>名字</th>
            <th>数量</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item, index) in giftList" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.num }}个</td>
        </tr>
    </tbody>
</table>
<p>礼物总数：{{ totalCount }}个</p>
// 案例-礼物清单
const gift = new Vue({
    el: '#gift',
    data: {
        giftList: [
            { id: 1, name: '篮球', num: 1 },
            { id: 2, name: '乐高', num: 2 },
            { id: 3, name: '铅笔', num: 5 },
        ],
    },
    computed: {
        totalCount() {
            // 基于现有数据，编写求值逻辑
            // 对this.giftList中的num进行求和
            let total = this.giftList.reduce((sum, item) => (sum += item.num), 0);
            return total;
        },
    },
});

computed计算属性 VS methods方法#

computed计算属性#

作用：封装了一段对于 数据 的处理，求得一个 结果

语法：

  1. 写在 computed 配置项中
  2. 作为属性，直接使用-- this.计算属性 / {{ 计算属性 }}

methods方法#

作用：给实例提供一个 方法 ，调用以处理 业务逻辑

语法：

  1. 写在 methods 配置项中
  2. 作为方法，需要调用-- this.方法名() / {{ 方法名() }} / @事件名=" 方法名 "

使用 methods 来封装数据的处理，其实也可以

使用 computed 来封装是因为它有个更大的 优势 ： 缓存特性

缓存特性 （提升性能） #

计算属性会对计算出来的 结果缓存 ，再次使用直接读取缓存，依赖项变了，会 自动 重新计算，并 再次缓存

计算属性完整写法#

计算属性默认的简写写法，只能读取访问， 不能'修改'

若要 '修改' ，需要用计算属性的 完整写法 

computed: {
    计算属性名:{
        get(){
            一段代码逻辑（计算逻辑）
            return 结果
        },
        set(修改的值){
            一段代码逻辑（修改逻辑）
        }
    }
},
+ = {{ fullName }} 
<div id="modifyname">
    <label for="firstName">姓：</label>
    <input type="text" id="firstName" v-model="firstName" />
    +
    <label for="lastName">名：</label>
    <input type="text" id="lastName" v-model="lastName" />
    =
    <span>{{ fullName }}</span>
    <br />
    <button @click="changeName">改名卡</button>
</div>
// 计算属性完整写法
const modifyName = new Vue({
    el: '#modifyname',
    data: {
        firstName: '刘',
        lastName: '德华',
    },
    methods: {
        changeName() {
            this.fullName = '张学友';
        },
    },
    computed: {
        // 简写--获取
        // fullName() {
        //     return this.firstName + this.lastName;
        // },
        // 完整写法--获取+设置
        fullName: {
            // 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存），会将返回值作为求值的结果
            get() {
                return this.firstName + this.lastName;
            },
            // 当fullName计算属性，被修改赋值时，执行set()，修改的值，传递给set方法的形参
            set(value) {
                // 对于姓名作修改操作
                // 用slice来截取
                // 这里只对单字姓做操作，未考虑复姓
                this.firstName = value.slice(0, 1);
                this.lastName = value.slice(1);
            },
        },
    },
});