Vue中watch-computed-methods

Vue中watch-computed-methods

watch

1. 作用

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

1. 使用方式（ 重点 ）

• 方法

    watch: {
      fn () {}
    }

• 对象： （ 深度监听 ）

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

## 计算属性
1. 使用方式
    - 里面存放方法
    ```javascript
      computed: {
        fn () {
          return ''   //必须要有返回值
        }
      }

- 里面存放对象
?```javascript
  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的使用： 事件程序程序 （ 用户交互 ）

原文地址：https://www.cnblogs.com/xiaohanga/p/11068715.html