Vue中computed和watch的用法和区别

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

computed中的get和set

一、Get

一般情况下，我们只是使用了computer中的gettter属性，默认只有 getter，我们只是单纯的使用了gettter属性

就像下面的例子
在这里插入图片描述
二、Set

只有当computed监测的值变化的时候，也就是我下面例子中的fullName变化的时候，set才回被调用

 <div class="hello">
    <div id="example">
      <p>firstName值: {
   
   {firstName}}</p>
      <p>fullName值: {
   
   {fullName}}</p>
    </div>
    <button @click="ClickCeshi">点击改变fullName的值</button>
  </div>

data () {
    
    
  return {
    
    
    firstName: 'Foo'
  }
},
methods: {
    
    
  ClickCeshi () {
    
    
    this.fullName = 'fullName的新值'
  }
},
computed: {
    
    
  fullName: {
    
    
    get: function () {
    
    
      console.log('调用了getter属性')
      return '***' + this.firstName + '***'
    },
    set: function (newValue) {
    
    
      console.log('调用了settter属性')
      console.log(newValue)
      this.firstName = newValue
    }
  }
}

上面的点击事件，改变fullName的值

没有点击点击事件之前，页面的输出：可以看到，在没有进行任何操作之前getter就会自动执行，页面中的fullName已经改变
在这里插入图片描述
点击过点击事件之后，调用乐set，便可以进行操作了

与warch之间的区别:

刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，但是我们不能类似这样监控，比如：

watch:{
    
    
goodsList.price(newVal,oldVal){
    
    
    //监控商品列表中是商品价格
}
}

这样会报错。只能监控整个对象或单个变量，如下所示：

data(){
    
    
　　　　　　　　return {
    
    
　　　　　　　　　　example0:"",
　　　　　　　　　　example1:"",
　　　　　　　　　　example2:{
    
    
 　　　　　　　　　　　　inner0:1, 　　　　　　　　　
                        　　　innner1:2 　　　　　　　　　
                    　}
　　　　　　}
　　　　},
watch:{
    
    
　example0(newVal,oldVal){
    
    //监控单个变量
           ……
   }，example2(newVal,oldVal){
    
    //监控对象
           ……
   }，
}

watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
在这里插入图片描述
监听appversionName用下面的方式，将对象和属性用引号的方式：‘对象名.属性名’（newVal,oldVal）{}

watch: {
    
    
     "dialogForm.appversionName"(newVal, oldVal) {
    
    
       console.log("新值："+newVal,"旧值："+ oldVal);
     }
   },

监听情况如下：
在这里插入图片描述

Vue中computed和watch的用法和区别

猜你喜欢