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

實際意義：將組件的選項抽離出去，單獨管理，複用

• 有兩種使用形式
  • 局部混入
  • 全局混入