江苏龙网

  1. 主页 > 生活百科 > >

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

Vue3

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 的实现细节较为复杂，但大致流程如下：

上一篇：原生CSS嵌套使用，你学明白了吗？

下一篇：MySQL时间存储终极指南：选择最适合你的时间类型！