<返回更多

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

2023-12-06  今日头条  前端达人
加入收藏

如何定义事件

在 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 中还有许多其他可供监听的事件,还包括:

下面针对这些事件,分别配上案例,方便大家进行理解

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

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

关键词:Vue3      点击(7)
声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多Vue3相关>>>