Vue computed和watch

Posted 2023-04-10

参考技术A

computed是一个计算属性,类似于过滤器,对绑定到view的数据进行处理，根据计算所依赖的属性动态返回新的计算结果。

computed和data的定义不可重名，否则是会报错的。
computed是基于它们的响应式依赖进行缓存的 ，只在相关响应式依赖发生改变时它们才会重新求值，如果依赖没有改变，多次访问 fullName 这个计算属性，都会立刻返回之前的结果，不必再重新计算。
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。

watch选项是一个对象，键是data里面的数据，值是对应的回调函数，回调函数有两个参数分别为修改后的值newValue和修改前的值oldValue。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。

watch在实例加载时是默认不监听的，使用 immediate:true ，可以在首次加载时也做监听。
watch只监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听，使用 deep:true 可进行深度监听。

computed与watch的应用场景：computed一般应用在多个数据影响一个数据的操作，如购物车。watch一般使用在一个数据来影响多个数据的操作，如搜索框

1.computed函数必须用return返回计算的值，watch没有return的必须要求
2.computed有缓存，如果依赖的值没有改变，调用computed函数时则不会执行函数重新计算，直接返回缓存的值。watch没有缓存，每次监听的值发生改变都会执行。

vue watch和computed的使用场景

watch 监听某个数据的变化（监听完调用什么函数） 一个数据影响多个数据 （比如：浏览器自适应、监控路由对象、监控自身属性变化）

computed 计算后返回新 一个数据受多个数据影响（比如：计算总价格、过滤某些数据）

computed是用来处理你使用watch和methods的时候无法处理（比如有缓存的时候监听不了数据变化），或者是处理起来并不太恰当的情况的，利用computed处理methods存在的重复计算情况

watch: {
firstName(val) { this.fullName = val + this.lastName }
}

computed: {
fullName() { this.firstName + this.lastName; }
}

 

watch 场景：

1、自适应浏览器（监听浏览器宽高、如果有变化就存在localStorage里面去，或者有变化就通知其他组件改变化）

data() {
  return {
    height: ‘‘
  }
},
mounted() {
  const _this = this
  this.height = document.documentElement.clientHeight
  localStorage.setItem(‘whVal‘, JSON.stringify({‘height‘: this.height }))
  window.onresize = function temp() {
    _this.height = document.documentElement.clientHeight
  }
},
watch: {
  // 如果发生改变，这个函数就会运行
  height() {
    this.changeFixed(this.width, this.height)
    // eventBus.$emit(‘onresize‘, {‘height‘: this.height }) 或者通知其他组件变化
  }
},
methods: {
  changeFixed(width, height) { // 动态修改样式
    localStorage.setItem(‘Layout‘, JSON.stringify({‘height‘: height }))
  }
}

2、监控路由对象

new Vue({
        el: ‘#app‘,
        router: router, //开启路由对象
        watch: {
          ‘$route‘: function(newroute, oldroute) {
            console.log(newroute, oldroute);
            //可以在这个函数中获取到当前的路由规则字符串是什么
            //那么就可以针对一些特定的页面做一些特定的处理
       }
    }
 })

 

 

computed 场景：

1、作为过滤器：展开更多

<li v-for="(item,index) in addressListFilter" :class="{‘check‘:checkIndex == index}" @click="checkIndex=index;selectedAddrId=item._id"></li>
<a @click="expand" v-bind:class="{‘open‘:limit>3}">展开更多</a>

data(){
  return {
    addressList:[],   // 地址列表
    limit:3,   // 限制默认显示3个地址
　　checkIndex:0
  }
},
computed:{
  addressListFilter(){
    return this.addressList.slice(0,this.limit);
  }
},
methods:{
  expand(){  //  点击more更多
    if(this.limit ==3){
      this.limit = this.addressList.length;
    }else{
      this.limit =3;
    }
  }
}
}

 

2、作为过滤器：tab切换

<span v-for="(item,index) in navList" :key="index" @click="type = index" :class="{‘active‘:type===index}">{{item}}</span>
<li v-for="(item,index) in taskListfilter" :key="index">
</li>
data() {
    return {
      navList: [‘全部‘, ‘实时单‘, ‘竞价单‘],
      type:0,
      taskList:[]
    }
},
computed: {
  taskListfilter() {
    switch (this.type) {
      case 0:return this.taskList
      case 1:return this.taskList.filter(item => item.type === ‘实时单‘)
      case 2:return this.taskList.filter(item => item.type === ‘竞价单‘)
      // default :return this.taskList
    }
  }
}