Vue3 学习笔记，如何定义事件以及如何理解响应式

如何定义事件

在 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 属性，敬请期待。