Vue中Computed和Watch的用法及区别

前端  /  管理员 发布于 4年前   572

本篇文章介绍了vue中的计算属性computed和监听属性watch的区别，希望对学习vue前端框架的同学有帮助！

一、 计算属性（computed）

1.计算属性是为了模板中的表达式简洁，易维护，符合用于简单运算的设计初衷。

例如：

<p id="app">        {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }} </p>

运算过于复杂，冗长，且不好维护，因此我们对于复杂的运算应该 使用计算属性的方式去书写。

因此可改写为：

<body>    <div id="app">        {{ changewords }} // 渲染 不用写()    </div></body><script>    var vm = new Vue({            el: "#app",            data:{},    　　　　　// 计算属性            computed:{                changewords(){                    return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)                }            }     })</script>

总结：

1.变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号 。

2.根据传入的变量的变化 进行结果的更新。

3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次 计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算　一次，为了进行不必要的资源消耗，选择用计算属性。

计算属性模糊查询的例子：

<body>    <div id="app">        <input type="text" v-model="mytext">        <ul>            <li v-for="data in datalistcom" :key="data">                {{ data }}            </li>        </ul>    </div></body><script>    var vm = new Vue({        el: "#app",        data:{            datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],            mytext:''        },        computed:{            datalistcom(){                return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)            }        }    })</script>

二、监听属性（watch）

上面说到计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。

当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。

例子 ：

<body>    <div id="app">        <p>单价：<input type="text" v-model="price"></p>        <p>数量：<input type="text" v-model="number"></p>        <p>计算金额：{{sum}}</p>    </div></body><script>var vm  = new Vue({    el:"#app",    data:{        price:100,        number:1,        sum:0    },    //监听某一个值或者状态发生变化 变化就会触发watch     watch:{        // 监听的参数的名字要一致        price(){            console.log(this.price)            if(this.price*this.number < 1000 && this.price*this.number > 0){                this.sum = this.price*this.number + 100            }else{                this.sum = this.price*this.number            }        },        number(){            console.log(this.price)            if(this.price*this.number < 1000 && this.price*this.number > 0){                this.sum = this.price*this.number + 100            }else{                this.sum = this.price*this.number            }        }    }})</script>

计算属性 和属性监听的区别：

1.计算属性变量在computed中定义，属性监听在data中定义。

2.计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。

以上就是Vue中Computed和Watch的用法及区别的详细内容，更多请关注其它相关文章！


  • 上一条：
    ajax返回的json内容进行排序使用sort()方法实现
    下一条：
    Lua一维数组与多维数组的使用示例

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客