如何定义事件
在 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 属性，敬请期待。
