如何定義事件

在 Vue 中，可以使用 v-on 指令來(lái)綁定事件監(jiān)聽(tīng)器。

下面是一個(gè)示例，在點(diǎn)擊按鈕時(shí)觸發(fā)事件處理程序：

<template>
  <div>
    <button v-on:click="incrementCounter">{{ counter }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter() {
      this.counter++
    }
  }
}
</script>

在上面的例子中，點(diǎn)擊按鈕時(shí)會(huì)觸發(fā) incrementCounter 方法，然后將計(jì)數(shù)器增加 1。

還可以使用縮寫(xiě)語(yǔ)法來(lái)綁定事件監(jiān)聽(tīng)器，如下所示：

<button @click="incrementCounter">{{ counter }}</button>

其他常見(jiàn)的監(jiān)聽(tīng)事件

除了 click 事件之外，Vue.js 中還有許多其他可供監(jiān)聽(tīng)的事件，還包括：

• input：當(dāng)用戶(hù)在輸入框中輸入時(shí)觸發(fā)。
• submit：當(dāng)表單被提交時(shí)觸發(fā)。
• focus：當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)。
• blur：當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。
• change：當(dāng)元素的值改變時(shí)觸發(fā)，通常用于 select 和 input[type="checkbox"]。
• keydown：當(dāng)按下鍵盤(pán)上的任意按鍵時(shí)觸發(fā)。
• keyup：當(dāng)松開(kāi)鍵盤(pán)上的任意按鍵時(shí)觸發(fā)。
• mouseenter：當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。
• mouseleave：當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)。
• mousemove：當(dāng)鼠標(biāo)指針在元素上移動(dòng)時(shí)觸發(fā)。
• mousedown：當(dāng)鼠標(biāo)按鈕被按下時(shí)觸發(fā)。
• mouseup：當(dāng)鼠標(biāo)按鈕被松開(kāi)時(shí)觸發(fā)。

下面針對(duì)這些事件，分別配上案例，方便大家進(jìn)行理解

1、input事件

當(dāng)用戶(hù)在輸入框中輸入時(shí)觸發(fā)?？梢栽?input 標(biāo)簽上直接綁定 v-on:input 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作

<template>
  <div>
    <input v-on:input="onInput" placeholder="Enter Something">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    onInput(event) {
      this.message = event.target.value
    }
  }
}
</script>

2、submit事件

當(dāng)表單被提交時(shí)觸發(fā)?？梢栽?form 標(biāo)簽上直接綁定 v-on:submit 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作。

<template>
  <div>
    <form v-on:submit.prevent="onSubmit">
      <input type="text" v-model="message">
      <button type="submit">Submit</button>
    </form>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    onSubmit() {
      alert('Form submitted!')
    }
  }
}
</script>

3、focus事件

當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)。可以在元素標(biāo)簽上直接綁定 v-on:focus 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作

<template>
  <div>
    <input v-on:focus="onFocus" placeholder="Enter Something">
  </div>
</template>

<script>
export default {
  methods: {
    onFocus() {
      alert('Input focused!')
    }
  }
}
</script>

4、blur事件

當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。可以在元素標(biāo)簽上直接綁定 v-on:blur 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作

<template>
  <div>
    <input v-on:blur="onBlur" placeholder="Enter Something">
  </div>
</template>

<script>
export default {
  methods: {
    onBlur() {
      alert('Input blurred!')
    }
  }
}
</script>

5、change事件

當(dāng)元素的值改變時(shí)觸發(fā)，通常用于 select 和 input[type="checkbox"]。可以在元素標(biāo)簽上直接綁定 v-on:change 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作

<template>
  <div>
    <select v-on:change="onChange">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  },
  methods: {
    onChange(event) {
      this.selectedOption = event.target.value
    }
  }
}
</script>

6、keydown事件

當(dāng)按下鍵盤(pán)上的任意按鍵時(shí)觸發(fā)。可以在元素標(biāo)簽上直接綁定 v-on:keydown 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作

<template>
  <div>
    <input v-on:keydown="onKeydown" placeholder="Press a key">
  </div>
</template>

<script>
export default {
  methods: {
    onKeydown(event) {
      alert(`Key pressed: ${event.key}`)
    }
  }
}
</script>

7、mouseenter事件

@mouseenter 事件是在鼠標(biāo)指針移動(dòng)到元素上方時(shí)觸發(fā)。

<template>
  <div>
    <button @mouseenter="mouseEnter">Hover me</button>
  </div>
</template>

<script>
export default {
  methods: {
    mouseEnter() {
      console.log("Mouse entered button");
    }
  }
};
</script>

上面的示例中，當(dāng)用戶(hù)將鼠標(biāo)移動(dòng)到按鈕上時(shí)，會(huì)在控制臺(tái)打印 "Mouse entered button" 。

由于 mouseleave，mousemove，mousedown，mouseup 這幾個(gè)事件都比較類(lèi)似，這里我就不舉例子進(jìn)行展開(kāi)介紹了。

聊一聊 Vue 的響應(yīng)式

Vue.js 是一個(gè) JavaScript 框架，它采用數(shù)據(jù)驅(qū)動(dòng)和組件化的思想，通過(guò)數(shù)據(jù)響應(yīng)式來(lái)更新視圖。

數(shù)據(jù)響應(yīng)式是 Vue 的核心機(jī)制之一，它會(huì)在 Vue 實(shí)例創(chuàng)建時(shí)對(duì)數(shù)據(jù)進(jìn)行觀察，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)自動(dòng)更新視圖。

代碼示例:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello World'
    }
  }
}
</script>

在這個(gè)例子中，我們?cè)谀０逯惺褂昧穗p括號(hào)語(yǔ)法來(lái)渲染 message 屬性的值。當(dāng)我們點(diǎn)擊按鈕時(shí)，會(huì)調(diào)用 changeMessage 方法，改變 message 的值，由于 Vue 采用了數(shù)據(jù)響應(yīng)式，所以會(huì)自動(dòng)更新視圖，使得 p 標(biāo)簽中的文本也變成 “Hello World”。

那么如何理解Vue背后的響應(yīng)式邏輯呢？

當(dāng)我們?cè)?Vue 實(shí)例中定義了 data 屬性時(shí)，Vue 會(huì)對(duì)這些數(shù)據(jù)進(jìn)行觀察。當(dāng)我們給 data 中的屬性賦值時(shí)，Vue 會(huì)自動(dòng)觸發(fā) setter，并在 setter 中進(jìn)行依賴(lài)收集和派發(fā)更新。

依賴(lài)收集是 Vue 實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的關(guān)鍵。當(dāng)我們?cè)谀０逯惺褂昧四硞€(gè)數(shù)據(jù)，Vue 會(huì)在渲染過(guò)程中自動(dòng)為這個(gè)數(shù)據(jù)建立一個(gè)依賴(lài)，并將其加入到相應(yīng)的依賴(lài)收集器中。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue 會(huì)根據(jù)依賴(lài)收集器中的依賴(lài)關(guān)系，自動(dòng)更新相應(yīng)的視圖。

在上面的代碼中，我們?cè)谀０逯惺褂昧?{{ message }} 來(lái)渲染 message 屬性的值，Vue 會(huì)在渲染過(guò)程中自動(dòng)將 {{ message }} 與 message 屬性建立依賴(lài)關(guān)系。當(dāng)我們點(diǎn)擊按鈕時(shí)，會(huì)調(diào)用 changeMessage 方法，改變 message 的值，Vue 會(huì)根據(jù)依賴(lài)關(guān)系，自動(dòng)更新 {{ message }} 所在的視圖。

數(shù)據(jù)響應(yīng)式系統(tǒng)是 Vue.js 數(shù)據(jù)驅(qū)動(dòng)視圖的基礎(chǔ)，它能使得 Vue.js 具有高度的可維護(hù)性和可擴(kuò)展性。

延伸閱讀：Vue2 底層響應(yīng)式實(shí)現(xiàn)邏輯

也許你會(huì)好奇，Vue 是如何實(shí)現(xiàn)響應(yīng)式的，那么我們先簡(jiǎn)單的聊聊 Vue2 底層的代碼是如何實(shí)現(xiàn)響應(yīng)式的，感興趣的可以了解下。

Vue 的響應(yīng)式系統(tǒng)的實(shí)現(xiàn)主要基于 Object.defineProperty() 這個(gè) JavaScript 內(nèi)置函數(shù)。在創(chuàng)建 Vue 實(shí)例時(shí)，Vue 會(huì)遍歷 data 選項(xiàng)中的所有屬性，使用 Object.defineProperty() 為它們定義 getter 和 setter。

在這里介紹一下Object.defineProperty的用法：

var obj = {};
Object.defineProperty(obj, 'name', {
  value: 'Jack',
  writable: true,
  configurable: true,
  enumerable: true
});
console.log(obj.name)  //'Jack'

Object.defineProperty() 函數(shù)接受三個(gè)參數(shù)：對(duì)象、屬性名、屬性描述符。屬性描述符是一個(gè)對(duì)象，可以設(shè)置屬性的一些特性，如 value、writable、configurable、enumerable 等。

Vue 會(huì)在每個(gè)響應(yīng)式屬性上定義一個(gè) getter 和一個(gè) setter，來(lái)攔截對(duì)該屬性的讀寫(xiě)操作。當(dāng)獲取屬性值時(shí)，調(diào)用的是 getter；當(dāng)修改屬性值時(shí)，調(diào)用的是 setter。

Vue 的 setter 中會(huì)對(duì)新值進(jìn)行檢測(cè)，如果發(fā)現(xiàn)新值和舊值不一樣，就會(huì)觸發(fā)相應(yīng)的更新操作。

Vue 使用了一個(gè)叫做 Dep 的依賴(lài)管理器，來(lái)維護(hù)響應(yīng)式數(shù)據(jù)與視圖更新之間的關(guān)系。Dep 類(lèi)負(fù)責(zé)維護(hù)一個(gè)依賴(lài)列表，其中包含了所有讀取該屬性的 Watcher。當(dāng) setter 被調(diào)用時(shí)，會(huì)觸發(fā) Dep 的 notify() 方法，通知所有 Watcher 更新。

Watcher 的作用是監(jiān)聽(tīng)響應(yīng)式數(shù)據(jù)的變化，并觸發(fā)視圖更新。它是 Vue 中重要的組成部分之一。

在 Vue 中，視圖和響應(yīng)式數(shù)據(jù)是一一對(duì)應(yīng)的，每個(gè)響應(yīng)式數(shù)據(jù)都對(duì)應(yīng)著一個(gè)或多個(gè) Watcher。當(dāng)響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)，Watcher 會(huì)被觸發(fā)，從而更新視圖。

Watcher 的實(shí)現(xiàn)細(xì)節(jié)較為復(fù)雜，但大致流程如下：

• 在 Vue 實(shí)例創(chuàng)建時(shí)，為每個(gè)視圖綁定的響應(yīng)式數(shù)據(jù)創(chuàng)建一個(gè) Watcher。
• Watcher 會(huì)在它所監(jiān)聽(tīng)的響應(yīng)式數(shù)據(jù)上注冊(cè)一個(gè) Dep。
• 當(dāng)響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)，會(huì)觸發(fā) Dep 的 notify() 方法，從而通知所有 Watcher 更新。
• Watcher 會(huì)調(diào)用自己的 update() 方法更新視圖。

Watcher 的實(shí)現(xiàn)細(xì)節(jié)較為復(fù)雜，下面是一個(gè)簡(jiǎn)化版的 Watcher 類(lèi)的示例代碼，幫助理解其實(shí)現(xiàn)原理：

class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm
    this.key = key
    this.cb = cb

    // 將當(dāng)前 Watcher 實(shí)例指向 Dep.target
    // 這樣 Dep 就能夠收集到這個(gè) Watcher
    Dep.target = this
    this.vm[this.key] // 觸發(fā) getter，收集依賴(lài)
    Dep.target = null
  }

  update() {
    this.cb.call(this.vm, this.vm[this.key])
  }
}

這個(gè)例子中，Watcher 類(lèi)包含了三個(gè)屬性：vm、key、cb。vm 是 Vue 實(shí)例，key 是響應(yīng)式數(shù)據(jù)的名稱(chēng)，cb 是更新視圖的回調(diào)函數(shù)。

在構(gòu)造函數(shù)中，Watcher 會(huì)將自己設(shè)置為 Dep.target，并讀取 vm[key]。這樣，在 vm[key] 的 getter 中就能夠收集到這個(gè) Watcher。

update() 方法會(huì)在響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)被調(diào)用，更新視圖。

Watcher 類(lèi)還包含其他一些方法，如 addDep()、depend()等，用于維護(hù)與 Dep 之間的關(guān)系，可以參考 Vue 源碼來(lái)了解這些方法的具體實(shí)現(xiàn)。

希望這些資料能夠幫助您更好的理解 Vue 的響應(yīng)式系統(tǒng)的實(shí)現(xiàn)。

延伸閱讀：Vue3 響應(yīng)式的實(shí)現(xiàn)邏輯

Vue 3 的響應(yīng)式系統(tǒng)與 Vue 2 的響應(yīng)式系統(tǒng)有一些不同之處。

Vue 3 引入了一種新的響應(yīng)式實(shí)現(xiàn)方式，叫做 "Proxy based observation"。它使用了 JavaScript 內(nèi)置的 Proxy 對(duì)象來(lái)實(shí)現(xiàn)響應(yīng)式，而不再使用 Object.defineProperty()。

使用 Proxy 對(duì)象可以更簡(jiǎn)單地實(shí)現(xiàn)響應(yīng)式，并且性能更優(yōu)，代碼實(shí)現(xiàn)更簡(jiǎn)潔。

舉個(gè)例子，在 Vue 2 中，我們可以這樣創(chuàng)建一個(gè)響應(yīng)式對(duì)象:

let data = { count: 0 }
Object.defineProperty(data, 'count', {
  get() {
    console.log('count get')
    return count
  },
  set(newValue) {
    console.log('count set')
    count = newValue
  }
})

而在 Vue 3 中，我們可以這樣創(chuàng)建響應(yīng)式對(duì)象:

let data = reactive({ count: 0 })

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log(`get ${key}`)
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      console.log(`set ${key}`)
      return Reflect.set(target, key, value, receiver)
    }
  })
}

在Vue3中，還引入了一個(gè)叫做"reactivity"的新概念，用于描述一組可響應(yīng)數(shù)據(jù)，而不再依賴(lài)于組件實(shí)例。這樣可以讓響應(yīng)式系統(tǒng)更加靈活，更易于實(shí)現(xiàn)自定義組件。

總的來(lái)說(shuō), Vue 3 的響應(yīng)式系統(tǒng)使用了 JavaScript 內(nèi)置的 Proxy 對(duì)象，并引入了新的 reactivity 概念，提高了響應(yīng)式系統(tǒng)的靈活性和性能。在 Vue 3 中，每個(gè)組件實(shí)例都有自己的響應(yīng)式系統(tǒng)，而不再像 Vue 2 中那樣共用一個(gè)全局的響應(yīng)式系統(tǒng)。這樣可以更好地支持復(fù)雜的組件結(jié)構(gòu)和高性能的響應(yīng)式系統(tǒng)。

另外，Vue 3 中的響應(yīng)式系統(tǒng)還支持對(duì) Map 和 Set 等新的數(shù)據(jù)類(lèi)型的響應(yīng)式，這在 Vue 2 中是不支持的。

在 Vue 3 中，響應(yīng)式系統(tǒng)與虛擬 DOM 結(jié)合更緊密，更易于實(shí)現(xiàn)高性能的組件。Vue 3 中還引入了新的 Composition API，可以更靈活地編寫(xiě)組件，更好地復(fù)用和組合組件邏輯。

總之，Vue 3 的響應(yīng)式系統(tǒng)是基于 JavaScript 內(nèi)置的 Proxy 對(duì)象實(shí)現(xiàn)，更加靈活高效，并支持新的數(shù)據(jù)類(lèi)型和更好的組件編寫(xiě)方式。

結(jié)束

今天的分享就到這里，本篇文章我們一起學(xué)習(xí)了如何在 Vue 中定義事件 ，并且介紹了常用的事件。以及什么是響應(yīng)式，以及 Vue 底層是如何實(shí)現(xiàn)響應(yīng)式的，并對(duì) Vue2 和 Vue3 的實(shí)現(xiàn)方式和差異進(jìn)行了介紹。下一篇文章，我將繼續(xù)介紹 Vue 其他方面的相關(guān)內(nèi)容，比如計(jì)算屬性 Computed 和 Watch 屬性，敬請(qǐng)期待。