vue中computed和watch的区别是什么？

最新推荐文章于 2022-07-06 11:12:19 发布

teng28

最新推荐文章于 2022-07-06 11:12:19 发布

阅读量260

点赞数

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43359799/article/details/123136846

版权

Vue.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

vue中computed和watch的区别是什么？

计算属性（computed）: 通过其他元素构造新的元素，当其他元素变化时触发computed；当进入页面时加载dom时自动执行

使用场景(多对一)
当其它任意元素(a,b,c)发生变化时都可以触发computed重新构造给changewords

 <body>
 <div id="app">
     {{ changewords }} // 渲染 不用写()
 </div>
 </body>
 <script>
     var vm = new Vue({
             el: "#app",
             data:{
                 a:'1',
                 b:'2',
                 c:'3'
             },
     　　　　　// 计算属性
             computed:{
                 changewords(){
                     return this.a+this.b+this.c
                 }
             }
     })
 </script>

总结：

变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号
根据传入的变量的变化进行结果的更新。
计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因此提高了程序的性能。而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>
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>