如何定義事件
在 Vue 中，可以使用 v-on 指令來綁定事件監聽器。
下面是一個示例，在點擊按鈕時觸發事件處理程序：
<template>
<div>
<button v-on:click="incrementCounter">{{ counter }}</button>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
methods: {
incrementCounter() {
this.counter++
}
}
}
</script>
在上面的例子中，點擊按鈕時會觸發 incrementCounter 方法，然后將計數器增加 1。
還可以使用縮寫語法來綁定事件監聽器，如下所示：
<button @click="incrementCounter">{{ counter }}</button>
其他常見的監聽事件
除了 click 事件之外，Vue.js 中還有許多其他可供監聽的事件，還包括：
- input：當用戶在輸入框中輸入時觸發。
- submit：當表單被提交時觸發。
- focus：當元素獲得焦點時觸發。
- blur：當元素失去焦點時觸發。
- change：當元素的值改變時觸發，通常用于 select 和 input[type="checkbox"]。
- keydown：當按下鍵盤上的任意按鍵時觸發。
- keyup：當松開鍵盤上的任意按鍵時觸發。
- mouseenter：當鼠標指針移動到元素上時觸發。
- mouseleave：當鼠標指針移出元素時觸發。
- mousemove：當鼠標指針在元素上移動時觸發。
- mousedown：當鼠標按鈕被按下時觸發。
- mouseup：當鼠標按鈕被松開時觸發。
下面針對這些事件，分別配上案例，方便大家進行理解
1、input事件
當用戶在輸入框中輸入時觸發。可以在 input 標簽上直接綁定 v-on:input 事件，并在事件處理程序中執行相應的操作
<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事件
當表單被提交時觸發。可以在 form 標簽上直接綁定 v-on:submit 事件，并在事件處理程序中執行相應的操作。
<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事件
當元素獲得焦點時觸發。可以在元素標簽上直接綁定 v-on:focus 事件，并在事件處理程序中執行相應的操作
<template>
<div>
<input v-on:focus="onFocus" placeholder="Enter Something">
</div>
</template>
<script>
export default {
methods: {
onFocus() {
alert('Input focused!')
}
}
}
</script>
4、blur事件
當元素失去焦點時觸發。可以在元素標簽上直接綁定 v-on:blur 事件，并在事件處理程序中執行相應的操作
<template>
<div>
<input v-on:blur="onBlur" placeholder="Enter Something">
</div>
</template>
<script>
export default {
methods: {
onBlur() {
alert('Input blurred!')
}
}
}
</script>
5、change事件
當元素的值改變時觸發，通常用于 select 和 input[type="checkbox"]。可以在元素標簽上直接綁定 v-on:change 事件，并在事件處理程序中執行相應的操作
<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事件
當按下鍵盤上的任意按鍵時觸發。可以在元素標簽上直接綁定 v-on:keydown 事件，并在事件處理程序中執行相應的操作
<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 事件是在鼠標指針移動到元素上方時觸發。
<template>
<div>
<button @mouseenter="mouseEnter">Hover me</button>
</div>
</template>
<script>
export default {
methods: {
mouseEnter() {
console.log("Mouse entered button");
}
}
};
</script>
上面的示例中，當用戶將鼠標移動到按鈕上時，會在控制臺打印 "Mouse entered button" 。
由于 mouseleave，mousemove，mousedown，mouseup 這幾個事件都比較類似，這里我就不舉例子進行展開介紹了。
聊一聊 Vue 的響應式
Vue.js 是一個 JAVAScript 框架，它采用數據驅動和組件化的思想，通過數據響應式來更新視圖。
數據響應式是 Vue 的核心機制之一，它會在 Vue 實例創建時對數據進行觀察，當數據發生變化時自動更新視圖。
代碼示例:
<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>
在這個例子中，我們在模板中使用了雙括號語法來渲染 message 屬性的值。當我們點擊按鈕時，會調用 changeMessage 方法，改變 message 的值，由于 Vue 采用了數據響應式，所以會自動更新視圖，使得 p 標簽中的文本也變成 “Hello World”。
那么如何理解Vue背后的響應式邏輯呢？
當我們在 Vue 實例中定義了 data 屬性時，Vue 會對這些數據進行觀察。當我們給 data 中的屬性賦值時，Vue 會自動觸發 setter，并在 setter 中進行依賴收集和派發更新。
依賴收集是 Vue 實現數據響應式的關鍵。當我們在模板中使用了某個數據，Vue 會在渲染過程中自動為這個數據建立一個依賴，并將其加入到相應的依賴收集器中。當數據發生變化時，Vue 會根據依賴收集器中的依賴關系，自動更新相應的視圖。
在上面的代碼中，我們在模板中使用了 {{ message }} 來渲染 message 屬性的值，Vue 會在渲染過程中自動將 {{ message }} 與 message 屬性建立依賴關系。當我們點擊按鈕時，會調用 changeMessage 方法，改變 message 的值，Vue 會根據依賴關系，自動更新 {{ message }} 所在的視圖。
數據響應式系統是 Vue.js 數據驅動視圖的基礎，它能使得 Vue.js 具有高度的可維護性和可擴展性。
延伸閱讀：Vue2 底層響應式實現邏輯
也許你會好奇，Vue 是如何實現響應式的，那么我們先簡單的聊聊 Vue2 底層的代碼是如何實現響應式的，感興趣的可以了解下。
Vue 的響應式系統的實現主要基于 Object.defineProperty() 這個 JavaScript 內置函數。在創建 Vue 實例時，Vue 會遍歷 data 選項中的所有屬性，使用 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() 函數接受三個參數：對象、屬性名、屬性描述符。屬性描述符是一個對象，可以設置屬性的一些特性，如 value、writable、configurable、enumerable 等。
Vue 會在每個響應式屬性上定義一個 getter 和一個 setter，來攔截對該屬性的讀寫操作。當獲取屬性值時，調用的是 getter；當修改屬性值時，調用的是 setter。
Vue 的 setter 中會對新值進行檢測，如果發現新值和舊值不一樣，就會觸發相應的更新操作。
Vue 使用了一個叫做 Dep 的依賴管理器，來維護響應式數據與視圖更新之間的關系。Dep 類負責維護一個依賴列表，其中包含了所有讀取該屬性的 Watcher。當 setter 被調用時，會觸發 Dep 的 notify() 方法，通知所有 Watcher 更新。
Watcher 的作用是監聽響應式數據的變化，并觸發視圖更新。它是 Vue 中重要的組成部分之一。
在 Vue 中，視圖和響應式數據是一一對應的，每個響應式數據都對應著一個或多個 Watcher。當響應式數據發生變化時，Watcher 會被觸發，從而更新視圖。
Watcher 的實現細節較為復雜，但大致流程如下：
- 在 Vue 實例創建時，為每個視圖綁定的響應式數據創建一個 Watcher。
- Watcher 會在它所監聽的響應式數據上注冊一個 Dep。
- 當響應式數據發生變化時，會觸發 Dep 的 notify() 方法，從而通知所有 Watcher 更新。
- Watcher 會調用自己的 update() 方法更新視圖。
Watcher 的實現細節較為復雜，下面是一個簡化版的 Watcher 類的示例代碼，幫助理解其實現原理：
class Watcher {
constructor(vm, key, cb) {
this.vm = vm
this.key = key
this.cb = cb
// 將當前 Watcher 實例指向 Dep.target
// 這樣 Dep 就能夠收集到這個 Watcher
Dep.target = this
this.vm[this.key] // 觸發 getter，收集依賴
Dep.target = null
}
update() {
this.cb.call(this.vm, this.vm[this.key])
}
}
這個例子中，Watcher 類包含了三個屬性：vm、key、cb。vm 是 Vue 實例，key 是響應式數據的名稱，cb 是更新視圖的回調函數。
在構造函數中，Watcher 會將自己設置為 Dep.target，并讀取 vm[key]。這樣，在 vm[key] 的 getter 中就能夠收集到這個 Watcher。
update() 方法會在響應式數據發生變化時被調用，更新視圖。
Watcher 類還包含其他一些方法，如 addDep()、depend()等，用于維護與 Dep 之間的關系，可以參考 Vue 源碼來了解這些方法的具體實現。
希望這些資料能夠幫助您更好的理解 Vue 的響應式系統的實現。
延伸閱讀：Vue3 響應式的實現邏輯
Vue 3 的響應式系統與 Vue 2 的響應式系統有一些不同之處。
Vue 3 引入了一種新的響應式實現方式，叫做 "Proxy based observation"。它使用了 JavaScript 內置的 Proxy 對象來實現響應式，而不再使用 Object.defineProperty()。
使用 Proxy 對象可以更簡單地實現響應式，并且性能更優，代碼實現更簡潔。
舉個例子，在 Vue 2 中，我們可以這樣創建一個響應式對象:
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 中，我們可以這樣創建響應式對象:
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中，還引入了一個叫做"reactivity"的新概念，用于描述一組可響應數據，而不再依賴于組件實例。這樣可以讓響應式系統更加靈活，更易于實現自定義組件。
總的來說, Vue 3 的響應式系統使用了 JavaScript 內置的 Proxy 對象，并引入了新的 reactivity 概念，提高了響應式系統的靈活性和性能。在 Vue 3 中，每個組件實例都有自己的響應式系統，而不再像 Vue 2 中那樣共用一個全局的響應式系統。這樣可以更好地支持復雜的組件結構和高性能的響應式系統。
另外，Vue 3 中的響應式系統還支持對 Map 和 Set 等新的數據類型的響應式，這在 Vue 2 中是不支持的。
在 Vue 3 中，響應式系統與虛擬 DOM 結合更緊密，更易于實現高性能的組件。Vue 3 中還引入了新的 Composition API，可以更靈活地編寫組件，更好地復用和組合組件邏輯。
總之，Vue 3 的響應式系統是基于 JavaScript 內置的 Proxy 對象實現，更加靈活高效，并支持新的數據類型和更好的組件編寫方式。
結束
今天的分享就到這里，本篇文章我們一起學習了如何在 Vue 中定義事件 ，并且介紹了常用的事件。以及什么是響應式，以及 Vue 底層是如何實現響應式的，并對 Vue2 和 Vue3 的實現方式和差異進行了介紹。下一篇文章，我將繼續介紹 Vue 其他方面的相關內容，比如計算屬性 Computed 和 Watch 屬性，敬請期待。
