Find N3入網(wǎng)：最高支持16+1TB
OPPO將于近期登場的Find N3折疊屏目前已經(jīng)正式入網(wǎng)，型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
在 Vue 中，可以使用 v-on 指令來綁定事件監(jiān)聽器。
下面是一個示例，在點擊按鈕時觸發(fā)事件處理程序：
<template> <div> <button v-on:click="incrementCounter">{{ counter }}</button> </div></template><script>export default { data() { return { counter: 0 } }, methods: { incrementCounter() { this.counter++ } }}</script>在上面的例子中，點擊按鈕時會觸發(fā) incrementCounter 方法，然后將計數(shù)器增加 1。
還可以使用縮寫語法來綁定事件監(jiān)聽器，如下所示：
<button @click="incrementCounter">{{ counter }}</button>除了 click 事件之外，Vue.js 中還有許多其他可供監(jiān)聽的事件，還包括：
下面針對這些事件，分別配上案例，方便大家進(jìn)行理解
當(dāng)用戶在輸入框中輸入時觸發(fā)?？梢栽?input 標(biāo)簽上直接綁定 v-on:input 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作
<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>當(dāng)表單被提交時觸發(fā)。可以在 form 標(biāo)簽上直接綁定 v-on:submit 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作。
<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>當(dāng)元素獲得焦點時觸發(fā)。可以在元素標(biāo)簽上直接綁定 v-on:focus 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作
<template> <div> <input v-on:focus="onFocus" placeholder="Enter Something"> </div></template><script>export default { methods: { onFocus() { alert('Input focused!') } }}</script>當(dāng)元素失去焦點時觸發(fā)?？梢栽谠貥?biāo)簽上直接綁定 v-on:blur 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作
<template> <div> <input v-on:blur="onBlur" placeholder="Enter Something"> </div></template><script>export default { methods: { onBlur() { alert('Input blurred!') } }}</script>當(dāng)元素的值改變時觸發(fā)，通常用于 select 和 input[type="checkbox"]。可以在元素標(biāo)簽上直接綁定 v-on:change 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作
<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>當(dāng)按下鍵盤上的任意按鍵時觸發(fā)?？梢栽谠貥?biāo)簽上直接綁定 v-on:keydown 事件，并在事件處理程序中執(zhí)行相應(yīng)的操作
<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>@mouseenter 事件是在鼠標(biāo)指針移動到元素上方時觸發(fā)。
<template> <div> <button @mouseenter="mouseEnter">Hover me</button> </div></template><script>export default { methods: { mouseEnter() { console.log("Mouse entered button"); } }};</script>上面的示例中，當(dāng)用戶將鼠標(biāo)移動到按鈕上時，會在控制臺打印 "Mouse entered button" 。
由于 mouseleave，mousemove，mousedown，mouseup 這幾個事件都比較類似，這里我就不舉例子進(jìn)行展開介紹了。
Vue.js 是一個 JavaScript 框架，它采用數(shù)據(jù)驅(qū)動和組件化的思想，通過數(shù)據(jù)響應(yīng)式來更新視圖。
數(shù)據(jù)響應(yīng)式是 Vue 的核心機(jī)制之一，它會在 Vue 實例創(chuàng)建時對數(shù)據(jù)進(jìn)行觀察，當(dāng)數(shù)據(jù)發(fā)生變化時自動更新視圖。
代碼示例:
<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 屬性的值。當(dāng)我們點擊按鈕時，會調(diào)用 changeMessage 方法，改變 message 的值，由于 Vue 采用了數(shù)據(jù)響應(yīng)式，所以會自動更新視圖，使得 p 標(biāo)簽中的文本也變成 “Hello World”。
那么如何理解Vue背后的響應(yīng)式邏輯呢？
當(dāng)我們在 Vue 實例中定義了 data 屬性時，Vue 會對這些數(shù)據(jù)進(jìn)行觀察。當(dāng)我們給 data 中的屬性賦值時，Vue 會自動觸發(fā) setter，并在 setter 中進(jìn)行依賴收集和派發(fā)更新。
依賴收集是 Vue 實現(xiàn)數(shù)據(jù)響應(yīng)式的關(guān)鍵。當(dāng)我們在模板中使用了某個數(shù)據(jù)，Vue 會在渲染過程中自動為這個數(shù)據(jù)建立一個依賴，并將其加入到相應(yīng)的依賴收集器中。當(dāng)數(shù)據(jù)發(fā)生變化時，Vue 會根據(jù)依賴收集器中的依賴關(guān)系，自動更新相應(yīng)的視圖。
在上面的代碼中，我們在模板中使用了 {{ message }} 來渲染 message 屬性的值，Vue 會在渲染過程中自動將 {{ message }} 與 message 屬性建立依賴關(guān)系。當(dāng)我們點擊按鈕時，會調(diào)用 changeMessage 方法，改變 message 的值，Vue 會根據(jù)依賴關(guān)系，自動更新 {{ message }} 所在的視圖。
數(shù)據(jù)響應(yīng)式系統(tǒng)是 Vue.js 數(shù)據(jù)驅(qū)動視圖的基礎(chǔ)，它能使得 Vue.js 具有高度的可維護(hù)性和可擴(kuò)展性。
也許你會好奇，Vue 是如何實現(xiàn)響應(yīng)式的，那么我們先簡單的聊聊 Vue2 底層的代碼是如何實現(xiàn)響應(yīng)式的，感興趣的可以了解下。
Vue 的響應(yīng)式系統(tǒng)的實現(xiàn)主要基于 Object.defineProperty() 這個 JavaScript 內(nèi)置函數(shù)。在創(chuàng)建 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() 函數(shù)接受三個參數(shù)：對象、屬性名、屬性描述符。屬性描述符是一個對象，可以設(shè)置屬性的一些特性，如 value、writable、configurable、enumerable 等。
Vue 會在每個響應(yīng)式屬性上定義一個 getter 和一個 setter，來攔截對該屬性的讀寫操作。當(dāng)獲取屬性值時，調(diào)用的是 getter；當(dāng)修改屬性值時，調(diào)用的是 setter。
Vue 的 setter 中會對新值進(jìn)行檢測，如果發(fā)現(xiàn)新值和舊值不一樣，就會觸發(fā)相應(yīng)的更新操作。
Vue 使用了一個叫做 Dep 的依賴管理器，來維護(hù)響應(yīng)式數(shù)據(jù)與視圖更新之間的關(guān)系。Dep 類負(fù)責(zé)維護(hù)一個依賴列表，其中包含了所有讀取該屬性的 Watcher。當(dāng) setter 被調(diào)用時，會觸發(fā) Dep 的 notify() 方法，通知所有 Watcher 更新。
Watcher 的作用是監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并觸發(fā)視圖更新。它是 Vue 中重要的組成部分之一。
在 Vue 中，視圖和響應(yīng)式數(shù)據(jù)是一一對應(yīng)的，每個響應(yīng)式數(shù)據(jù)都對應(yīng)著一個或多個 Watcher。當(dāng)響應(yīng)式數(shù)據(jù)發(fā)生變化時，Watcher 會被觸發(fā)，從而更新視圖。
Watcher 的實現(xiàn)細(xì)節(jié)較為復(fù)雜，但大致流程如下：
Watcher 的實現(xiàn)細(xì)節(jié)較為復(fù)雜，下面是一個簡化版的 Watcher 類的示例代碼，幫助理解其實現(xiàn)原理：
class Watcher { constructor(vm, key, cb) { this.vm = vm this.key = key this.cb = cb // 將當(dāng)前 Watcher 實例指向 Dep.target // 這樣 Dep 就能夠收集到這個 Watcher Dep.target = this this.vm[this.key] // 觸發(fā) getter，收集依賴 Dep.target = null } update() { this.cb.call(this.vm, this.vm[this.key]) }}這個例子中，Watcher 類包含了三個屬性：vm、key、cb。vm 是 Vue 實例，key 是響應(yīng)式數(shù)據(jù)的名稱，cb 是更新視圖的回調(diào)函數(shù)。
在構(gòu)造函數(shù)中，Watcher 會將自己設(shè)置為 Dep.target，并讀取 vm[key]。這樣，在 vm[key] 的 getter 中就能夠收集到這個 Watcher。
update() 方法會在響應(yīng)式數(shù)據(jù)發(fā)生變化時被調(diào)用，更新視圖。
Watcher 類還包含其他一些方法，如 addDep()、depend()等，用于維護(hù)與 Dep 之間的關(guān)系，可以參考 Vue 源碼來了解這些方法的具體實現(xiàn)。
希望這些資料能夠幫助您更好的理解 Vue 的響應(yīng)式系統(tǒng)的實現(xiàn)。
Vue 3 的響應(yīng)式系統(tǒng)與 Vue 2 的響應(yīng)式系統(tǒng)有一些不同之處。
Vue 3 引入了一種新的響應(yīng)式實現(xiàn)方式，叫做 "Proxy based observation"。它使用了 JavaScript 內(nèi)置的 Proxy 對象來實現(xiàn)響應(yīng)式，而不再使用 Object.defineProperty()。
使用 Proxy 對象可以更簡單地實現(xiàn)響應(yīng)式，并且性能更優(yōu)，代碼實現(xiàn)更簡潔。
舉個例子，在 Vue 2 中，我們可以這樣創(chuàng)建一個響應(yīng)式對象:
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 中，我們可以這樣創(chuàng)建響應(yīng)式對象:
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"的新概念，用于描述一組可響應(yīng)數(shù)據(jù)，而不再依賴于組件實例。這樣可以讓響應(yīng)式系統(tǒng)更加靈活，更易于實現(xiàn)自定義組件。
總的來說, Vue 3 的響應(yīng)式系統(tǒng)使用了 JavaScript 內(nèi)置的 Proxy 對象，并引入了新的 reactivity 概念，提高了響應(yīng)式系統(tǒng)的靈活性和性能。在 Vue 3 中，每個組件實例都有自己的響應(yīng)式系統(tǒng)，而不再像 Vue 2 中那樣共用一個全局的響應(yīng)式系統(tǒng)。這樣可以更好地支持復(fù)雜的組件結(jié)構(gòu)和高性能的響應(yīng)式系統(tǒng)。
另外，Vue 3 中的響應(yīng)式系統(tǒng)還支持對 Map 和 Set 等新的數(shù)據(jù)類型的響應(yīng)式，這在 Vue 2 中是不支持的。
在 Vue 3 中，響應(yīng)式系統(tǒng)與虛擬 DOM 結(jié)合更緊密，更易于實現(xiàn)高性能的組件。Vue 3 中還引入了新的 Composition API，可以更靈活地編寫組件，更好地復(fù)用和組合組件邏輯。
總之，Vue 3 的響應(yīng)式系統(tǒng)是基于 JavaScript 內(nèi)置的 Proxy 對象實現(xiàn)，更加靈活高效，并支持新的數(shù)據(jù)類型和更好的組件編寫方式。
今天的分享就到這里，本篇文章我們一起學(xué)習(xí)了如何在 Vue 中定義事件 ，并且介紹了常用的事件。以及什么是響應(yīng)式，以及 Vue 底層是如何實現(xiàn)響應(yīng)式的，并對 Vue2 和 Vue3 的實現(xiàn)方式和差異進(jìn)行了介紹。下一篇文章，我將繼續(xù)介紹 Vue 其他方面的相關(guān)內(nèi)容，比如計算屬性 Computed 和 Watch 屬性，敬請期待。
本文鏈接：http://www.www897cc.com/showinfo-26-38519-0.htmlVue3 學(xué)習(xí)筆記，如何定義事件以及如何理解響應(yīng)式
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號