vue的计算属性和侦听属性，方法

Question

我自己写todolist的时候,做已完成和未完成筛选的时候，发现用计算属性只能执行一次，再就动不了了。
下面的代码是把filterlists放到方法里面，就可以用了，但是放到计算里面就只执行一次。
计算属性不是依赖有更新，自己就会更新吗。

<template>
    <div class="demo">
        <h1>vue-todolist</h1>
        <p id="newlist">
            <input v-model="newtodo" v-on:keyup.enter="addlist" type="text">
            <time>{{uptime}}</time>
        </p>
        <ul class="mylist">
            <h3 style="margin:0">mylist-todo</h3>
            <li v-for="item in filterlists()">
                <input type="checkbox"  v-model="item.ischeck">
                <span v-bind:class="{completed:item.ischeck}">{{item.text}}</span>
                <span @click="dellist(item)" class="del">&times;</span>
                <span class="addtime">{{item.addtime}}</span>
            </li>
        </ul>
        <div class="control">
            <button @click="mycom">已完成</button>
            <button @click="mynot">未完成</button>
            <button @click="myall">全部</button>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                newtodo:'',
                lists:[],
                compoleted:false,
                notyet:false
            }
        },
        props:{
            uptime:{
                type:String
            }
        },
        methods:{
            addlist(){
                if(this.newtodo){
                    this.lists.push({
                        text:this.newtodo.trim(),
                        ischeck:false,
                        addtime:this.uptime
                    });
                    this.newtodo='';
                }
            },
            dellist(thisdata){
                this.lists.splice(this.lists.indexOf(thisdata),1);
            },
            myall(){
                this.completed=false;
                this.notyet=false;
            },
            mycom(){
                this.completed=true;
                this.notyet=false;
            },
            mynot(){
                this.completed=false;
                this.notyet=true;
            },
            filterlists:function(){
                if(this.completed){
                    return this.lists.filter(function(todo){
                        return todo.ischeck
                    })
                }else if(this.notyet){
                    return this.lists.filter(function(todo){
                        return !todo.ischeck
                    })
                }else{
                    return this.lists;
                }
            }
        },
        computed:{

        }
        
    }
</script>

这是页面效果

Answer 1

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。你的filelist写成计算属性太复杂了，没有明显地依赖哪个data,可能因此监测不到

Answer 2

建议你把completed 维护为一个状态，计算属性里根据这一个状态进行过滤就好了。
如：status = [all: 全部, open: 未完成, closed: 已完成];

   filterlists:function(){
       if(this.status === 'all') {
           return this.lists;
       } else {
           return this.lists.filter(value => this.status === 'closed' ? value.ischeck : !value.ischeck)
       }
   }

Answer 3

给你复制一段文档中的话吧

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。