一文看懂Vue中的computed和watch

737 阅读2分钟

computed-计算属性

为什么要用computed?

  • computed 主要用于对绑定到 UI 中的数据进行处理;
  • 如果直接在 template 中处理数据,需要写一些复杂的逻辑和表达式,会显得很累赘,也不好维护。
<div class="example">
  {{ message.split('').reverse().join('')}}
<div>

如果需要通过复杂逻辑来处理数据,推荐大家使用计算属性。

computed主要用法

getter

template

<div>
  <p>原始值:{{ message }}</p>
  <p>计算属性值:{{ message }}</p>
</div>

data


const vm = new Vue({
  data(){
    return { message: 'hello' }
  }
  computed:{
    reverseMessage(){
      return this.message.split('').reverse().join('')
    }
  }
})

// 输出结果
// 原始值:Hello
// 计算属性值:olleH

getter和setter

  • computed默认只有getter,不过在需要时可以提供一个 setter;
  • getter主要用于读取当前属性数据,并计算和返回当前属性的值;
  • setter监听当前属性值的变化,一变化立即执行并更新相关属性的数据。
const vm = new Vue({
  data(){
   return {
     firstName: 'Foo',
     lastName: 'Bar'
   }
  },
  computed: {
    fullName(){
      get(){
        return this.firstName + '' + this.lastName
      },
      set(newValue){// value就是fullName最新的值
        const names = value.split(' ')
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  }
})

watch-侦听器

定义

数据变化时,执行一个函数。

主要用法

用法一

template

<div>
  <button @click=" n += 1 ">n+1</button>
  <button @click=" obj.a + 'hi' ">obj.a + 'hi'</button>
  <button @click=" obj.a = {a:'a'} ">obj.a = 新对象</button>
</div>

data

const vm = new Vue({
  data(){
    return {
      n: 0,
      obj: {a:'a'}
    }
  },
  watch:{
    n(){ console.log('n 变了')}
  },
  obj:{
    handler(value, oldValue){ console.log('obj 变了') },
    deep: true // 如果想让Vue认为一个对象发生了变化,就用deep: true,反之用 deep: false
  },
  "obj.a"{
    handler(value, oldValue){ console.log('obj.a 变了') },
    immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
  }
})

注意:不能在 watch 中使用 this。

用法二

vm.$watch('xxx', fn, {deep: true, immediate: true})

computed和watch

相同点

都是在数据变化时去执行一个函数。

不同点

  • watch有immediate,表示在第一次渲染时是否要执行该函数;另一个是deep,表示我们在监听对象时,是否要监听对象里面的变化;

  • computed用于计算出一个值,调用时不用加括号,根据依赖会自动缓存。

总结

  • computed主要用于计算比较复杂的数据;
  • watch主要用于监听数据,同时对数据进行一些操作;
  • 遇到一个可以使用computed和watch实现的需求时,优先使用computed;

本文使用 mdnice 排版