Vue--计算属性和监听属性

灰太狼 2022-12-07 04:27 190阅读 0赞

computed:计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要属性值还没有发生改变， 多次访问属性计算属性会立即返回之前的计算结果，而不必再次执行函数。如果不希望有缓存，就用函数代替。  
watch:侦听属性，响应数据的变化，需要在数据命令执行异步或开销较大的操作时，这个方式最有用。watch只能监听已经存在的属性，数组的push和pop等方法不会触发监听函数  
例：

<body>
        <div id="app">
           总和： {
       {totle}}
           <input v-model="question" placeholder="please input">
           {
       {answer}}
           总和： {
       {totle(10,5)}}
           总和：{
       {20|totle}}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data() {
                    return {
                        x:1,
                        y:4,
                        question: '',
                        answer: 'I cannot give you an answer until you ask a question!',
    
                    }
                },
                watch: {
                    question:function(newValue,oldValue){
                        console.log("newValue="+newValue,"oldValue="+oldValue);
                        this.answer = "I give you an anwser";
                    }
                },
                computed: {
                    // totle:function(){
                    //     var totle = this.x+this.y;
                    //     return totle;
                    // },
                    // //写法二
                    // totle(){
                    //     var totle = this.x+this.y;
                    //     return totle;
                    // },
                    //写法三
                    // totle:()=>{
                    //     // var totle = x+y;//不能用this，this会指向window
                    //     return (x,y)=>x+y;//箭头函数
                    // },
                       totle:function(){
                        // var totle = x+y;//不能用this，this会指向window
                        return (x,y)=>x+y;//箭头函数
                    },
                },
                filters:{//过滤器
                    totle:(x)=>x,
                },
            });
        </script>
    </body>