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的使用： 事件程序程序 （ 用户交互 ）

混入mixins

实际意义：将组件的选项抽离出去，单独管理，复用

• 有两种使用形式
  • 局部混入
  • 全局混入