小百科项目---vue实现前端收藏功能代码（简洁易懂）

1.需求

2.实现

<!--被收藏的次数-->
<li class="like">
    <span class="iconfont">&#xe663;</span>
    {{ blogData.f_collection_sum }}
</li>
<!--是否被收藏的样式-->
<li class="like" v-model="key">
    <span class="iconfont">
        <i v-if = "!isCollection" class="el-icon-star-off" :key="0" @click="onCollection"></i>
        <i v-else class="el-icon-star-on" :key="1" @click="onCollection"></i>
    </span>
</li>

onCollection(){
    if(this.isCollection){
        //取消收藏
        let params = {};
        let f_special_document_id = localStorage.getItem("f_special_document_id");
        params.f_special_document={
            f_special_document_id:f_special_document_id,
        };
        delSort(params).then(response => {
            if (response.data.httpStatus === 200) {
                this.$notify({
                    title: "成功",
                    message: "取消收藏",
                    type: "success",
                    offset: 100
                });
                this.key = 0; //使用key值区分两种状态的样式
                this.isCollection = false; //待收藏状态
                this.blogData.f_collection_sum -= 1; 收藏数减一            
             } else {
                this.$notify.error({
                    title: "错误",
                    message: response.data.message,
                    offset: 100
                });
            }
        });
    }else{
        //新增收藏
        let params = {};
        let f_special_document_id = localStorage.getItem("f_special_document_id");
        let f_special_document_name = localStorage.getItem("f_special_document_name");
        params.f_special_document={
            f_special_document_id:f_special_document_id,
            f_special_document_name:f_special_document_name,
        }
        addSort(params).then(response => {
            if (response.data.httpStatus === 200) {
                this.$notify({
                    title: "成功",
                    message: "收藏成功",
                    type: "success",
                    offset: 100
                });
                this.key = 1;
                this.isCollection = true;
                this.blogData.f_collection_sum += 1;
            } else {
                this.$notify.error({
                    title: "错误",
                    message: response.data.message,
                    offset: 100
                });
            }
        })
    }
},

3.谨记

只要页面中的代码任一处有逻辑错误或者其他错误时，都会导致收藏样式出现时好时坏的情况，不能只排查实现收藏样式相关代码的错误！！！

之前收藏样式的实现时好时坏，换了各种写法，最后不知道为啥莫名其妙好了，反正暂时没有再出现时好时坏的情况。
今天项目要接近尾声了，在整体测试的时候，发现有的页面收藏样式可用，有的页面需要手动刷新浏览器样式才会更新，f12查看后，发现样式失灵的页面都会报一个错误leghth字段undefined，排查代码后发现只有控制本页面中的评论样式处的代码使用了length字段。

<div class="noComment" v-if="comments.length == 0">还没有评论，快来抢沙发吧！</div>

我在data处定义的comments是一个空数组，即comments:[],然后又发现只有没有评论的页面才会出现收藏样式失效的情况，然后我竟然还去百度了空数组求长度的写法，一度陷入自我怀疑状态，最后发现接口返回的comments是null，根本不是空数组！

<div class="noComment" v-if="comments == null">还没有评论，快来抢沙发吧！</div>

注意：
一个长度为0的数组我们称之为空数组，空数组是一个真正的对象，只是包含元素个数为0。
null数组是一个空引用。
假设一个方法返回一个数组，如果它返回null，则调用方法必须先判断是否返回null，才能对返回数组进一步处理，而如果返回空数组，则无须null引用检查。