Vue中Computed和Watch的区别及其用法

今天小编给大家分享的是Vue中Computed和Watch的区别及其用法，相信很多人都不太了解，为了让大家更加了解Computed和Watch，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。

创新互联-专业网站定制、快速模板网站建设、高性价比辉南网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式辉南网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖辉南地区。费用合理售后完善，10余年实体公司更值得信赖。

一、计算属性（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>

Vue中Computed和Watch的区别及其用法

二、监听属性（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的区别及其用法就分享到这里了，希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。

分享题目：Vue中Computed和Watch的区别及其用法
转载注明：https://www.cdcxhl.com/article46/iehhhg.html

成都网站建设公司_创新互联，为您提供网站策划、网站建设、虚拟主机、企业网站制作、用户体验、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容