Vue中watch/computed简介及其method使用场景

watch

1. 作用

• 用来监听data中定义的数据，当data中定义的数据发生了变化，那么watch中的key就会触发
• watch是一个对象
  watch: {}
• watch中可以设置多个类型的键值

2. 使用方式（ 重点 ）

• 方法

  watch: {
    fn () {}
  }

• 对象： （ 深度监听 ）

  watch: {
    fn: {
      handler(){},
      deep: true
    }
  }
  

计算属性

1. 使用方式

• 里面存放方法

    computed: {
      fn () {
        return ''   //必须要有返回值
      }
    }
  

• 里面存放对象

    computed: {
      newName: {
        get () {
          return '' //get里面要有return
        },
        set ( val ) { //val就是修改后的值
  
        }
      }
    }
  

  • 注意： 上面的get,set我们统一起了个名字叫做： 存储器，别人也叫getter/setter
  • get set 这两者， 对象中有，类里面也有
  • get set 是计算属性的 这个理解是错的

watch vs computed

1. watch是用来监听某一个数据的，当数据发生改变是，watch就会自动触发，然后我们可以进行一些任务
2. computed是为了暴露一个全局变量，这个全局变量是经由一定逻辑产生的
3. 什么时候选择 watch ？ 什么是选择 computed ? 什么时候选择 methods?

• 数据量较大，并且有异步操作我们选择 watch 应用场景： 上拉加载，下拉刷新
• computd的使用满足两个就可以了
  • 暴露一个类似全局变量的数据
  • 可以进行逻辑的处理
• methods的使用： 事件程序程序 （ 用户交互 ）