时间戳

首页 > 技术文章 > Vue中watch与computed的区别

Vue中watch与computed的区别

wueiwn 2021-07-10 17:37 原文

一、 计算属性（computed）

1.计算属性是为了模板中的表达式简洁，易维护，符合用于简单运算的设计初衷。对于运算过于复杂，冗长，且不好维护，因此我们对于复杂的运算应该 使用计算属性的方式去书写。

下面来看代码体验一下吧

<div id="app">
        <h1>
            {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
        </h1>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                myname: 'xiaowu3'
            },

        })
    </script>

由上可以看出在html标签中的代码过多，不方便于我们进行对代码的管理，因此我们可以利用计算属性computed对其进行简化

<div id="app">
        <h1>
            {{ changewords}}
        </h1>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                myname: 'xiaowu3'
            },
            computed: {
                changewords() {
                    return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1)
                }
            }

        })
    </script>

总结：

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

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

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

二、监听属性（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>
        const app = new Vue({
            el: "#app",
            data: {
                price: 100,
                number: 1,
                sum: 100
            },
            //监听某一个值或者状态发生变化 变化就会触发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
                    } else {
                        this.sum = this.price * this.number
                    }
                }
            }
        })
    </script>

三.它们的使用场景

computed ：　　　
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的例子： 如购物车商品结算的时候
watch：
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　如搜索数据
 

 

推荐阅读