电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue實現簡易的雙向數據綁定

瀏覽:39日期:2022-10-15 09:24:36

主要是通過數據劫持和發布訂閱一起實現的

雙向數據綁定 數據更新時,可以更新視圖 視圖的數據更新是,可以反向更新模型 組成說明 Observe監聽器 劫持數據, 感知數據變化, 發出通知給訂閱者, 在get中將訂閱者添加到訂閱器中 Dep消息訂閱器 存儲訂閱者, 通知訂閱者調用更新函數 訂閱者Wather取出模型值,更新視圖 解析器Compile 解析指令, 更新模板數據, 初始化視圖, 實例化一個訂閱者, 將更新函數綁定到訂閱者上, 可以在接收通知二次更新視圖, 對于v-model還需要監聽input事件,實現視圖到模型的數據流動 基本結構HTML模板

<div id='app'> <form> <input type='text' v-model='username'> </form> <p v-bind='username'></p> </div> 一個根節點#app 表單元素,里面包含input, 使用v-model指令綁定數據username p元素上使用v-bind綁定數username MyVue類

簡單的模擬Vue類

將實例化時的選項options, 數據options.data進行保存 此外,通過options.el獲取dom元素,存儲到$el上

class MyVue { constructor(options) {this.$options = optionsthis.$el = document.querySelector(this.$options.el)this.$data = options.data } }實例化MyVue

實例化一個MyVue,傳遞選項進去,選項中指定綁定的元素el和數據對象data

const myVm = new MyVue({ el: ’#app’, data: {username: ’LastStarDust’ } })Observe監聽器實現

劫持數據是為了修改數據的時候可以感知, 發出通知, 執行更新視圖操作

class MyVue { constructor(options) {// ...// 監視數據的屬性this.observable(this.$data) } // 遞歸遍歷數據對象的所有屬性, 進行數據屬性的劫持 { username: ’LastStarDust’ } observable(obj) {// obj為空或者不是對象, 不做任何操作const isEmpty = !obj || typeof obj !== ’object’if(isEmpty) { return}// [’username’]const keys = Object.keys(obj)keys.forEach(key => { // 如果屬性值是對象,遞歸調用 let val = obj[key] if(typeof val === ’object’) { this.observable(val) } // this.defineReactive(this.$data, ’username’, ’LastStarDust’) this.defineReactive(obj, key, val)})return obj } // 數據劫持,修改屬性的get和set方法 defineReactive(obj, key, val) {Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { console.log(`取出${key}屬性值: 值為${val}`) return val }, set(newVal) { // 沒有發生變化, 不做更新 if(newVal === val) { return } console.log(`更新屬性${key}的值為: ${newVal}`) val = newVal }}) } }Dep消息訂閱器

存儲訂閱者, 收到通知時,取出訂閱者,調用訂閱者的update方法

// 定義消息訂閱器 class Dep { // 靜態屬性 Dep.target,這是一個全局唯一 的Watcher,因為在同一時間只能有一個全局的 Watcher static target = null constructor() {// 存儲訂閱者this.subs = [] } // 添加訂閱者 add(sub) {this.subs.push(sub) } // 通知 notify() {this.subs.forEach(sub => { // 調用訂閱者的update方法 sub.update()}) } }將消息訂閱器添加到數據劫持過程中

為每一個屬性添加訂閱者

defineReactive(obj, key, val) {const dep = new Dep()Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { // 會在初始化時, 觸發屬性get()方法,來到這里Dep.target有值,將其作為訂閱者存儲起來,在觸發屬性的set()方法時,調用notify方法 if(Dep.target) { dep.add(Dep.target) } console.log(`取出${key}屬性值: 值為${val}`) return val }, set(newVal) { // 沒有發生變化, 不做更新 if(newVal === val) { return } console.log(`更新屬性${key}的值為: ${newVal}`) val = newVal dep.notify() }}) }訂閱者Wather

從模型中取出數據并更新視圖

// 定義訂閱者類 class Wather { constructor(vm, exp, cb) {this.vm = vm // vm實例this.exp = exp // 指令對應的字符串值, 如v-model='username', exp相當于'username'this.cb = cb // 回到函數 更新視圖時調用this.value = this.get() // 將自己添加到消息訂閱器Dep中 } get() {// 將當前訂閱者作為全局唯一的Wather,添加到Dep.target上Dep.target = this// 獲取數據,觸發屬性的getter方法const value = this.vm.$data[this.exp]// 在執行添加到消息訂閱Dep后, 重置Dep.targetDep.target = nullreturn value } // 執行更新 update() {this.run() } run() {// 從Model模型中取出屬性值const newVal = this.vm.$data[this.exp]const oldVal = this.valueif(newVal === oldVal) { return false}// 執行回調函數, 將vm實例,新值,舊值傳遞過去this.cb.call(this.vm, newVal, oldVal) } }解析器Compile 解析模板指令,并替換模板數據,初始化視圖; 將模板指令對應的節點綁定對應的更新函數,初始化相應的訂閱器; 初始化編譯器, 存儲el對應的dom元素, 存儲vm實例, 調用初始化方法 在初始化方法中, 從根節點開始, 取出根節點的所有子節點, 逐個對節點進行解析 解析節點過程中 解析指令存在, 取出綁定值, 替換模板數據, 完成首次視圖的初始化 給指令對應的節點綁定更新函數, 并實例化一個訂閱器Wather 對于v-model指令, 監聽’input’事件,實現視圖更新是,去更新模型的數據

// 定義解析器 // 解析指令,替換模板數據,初始視圖 // 模板的指令綁定更新函數, 數據更新時, 更新視圖 class Compile { constructor(el, vm) {this.el = elthis.vm = vmthis.init(this.el) } init(el) {this.compileEle(el) } compileEle(ele) {const nodes = ele.children// 遍歷節點進行解析for(const node of nodes) { // 如果有子節點,遞歸調用 if(node.children && node.children.length !== 0) { this.compileEle(node) } // 指令時v-model并且是標簽是輸入標簽 const hasVmodel = node.hasAttribute(’v-model’) const isInputTag = [’INPUT’, ’TEXTAREA’].indexOf(node.tagName) !== -1 if(hasVmodel && isInputTag) { const exp = node.getAttribute(’v-model’) const val = this.vm.$data[exp] const attr = ’value’ // 初次模型值推到視圖層,初始化視圖 this.modelToView(node, val, attr) // 實例化一個訂閱者, 將更新函數綁定到訂閱者上, 未來數據更新,可以更新視圖 new Wather(this.vm, exp, (newVal)=> { this.modelToView(node, newVal, attr) }) // 監聽視圖的改變 node.addEventListener(’input’, (e) => { this.viewToModel(exp, e.target.value) }) } // 指令時v-bind if(node.hasAttribute(’v-bind’)) { const exp = node.getAttribute(’v-bind’) const val = this.vm.$data[exp] const attr = ’innerHTML’ // 初次模型值推到視圖層,初始化視圖 this.modelToView(node, val, attr) // 實例化一個訂閱者, 將更新函數綁定到訂閱者上, 未來數據更新,可以更新視圖 new Wather(this.vm, exp, (newVal)=> { this.modelToView(node, newVal, attr) }) }} } // 將模型值更新到視圖 modelToView(node, val, attr) {node[attr] = val } // 將視圖值更新到模型上 viewToModel(exp, val) {this.vm.$data[exp] = val } }完整代碼

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body> <div id='app'> <form> <input type='text' v-model='username'> </form> <div> <span v-bind='username'></span> </div> <p v-bind='username'></p> </div> <script> class MyVue { constructor(options) {this.$options = optionsthis.$el = document.querySelector(this.$options.el)this.$data = options.data// 監視數據的屬性this.observable(this.$data)// 編譯節點new Compile(this.$el, this) } // 遞歸遍歷數據對象的所有屬性, 進行數據屬性的劫持 { username: ’LastStarDust’ } observable(obj) {// obj為空或者不是對象, 不做任何操作const isEmpty = !obj || typeof obj !== ’object’if(isEmpty) { return}// [’username’]const keys = Object.keys(obj)keys.forEach(key => { // 如果屬性值是對象,遞歸調用 let val = obj[key] if(typeof val === ’object’) { this.observable(val) } // this.defineReactive(this.$data, ’username’, ’LastStarDust’) this.defineReactive(obj, key, val)})return obj } // 數據劫持,修改屬性的get和set方法 defineReactive(obj, key, val) {const dep = new Dep()Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { // 會在初始化時, 觸發屬性get()方法,來到這里Dep.target有值,將其作為訂閱者存儲起來,在觸發屬性的set()方法時,調用notify方法 if(Dep.target) { dep.add(Dep.target) } console.log(`取出${key}屬性值: 值為${val}`) return val }, set(newVal) { // 沒有發生變化, 不做更新 if(newVal === val) { return } console.log(`更新屬性${key}的值為: ${newVal}`) val = newVal dep.notify() }}) } } // 定義消息訂閱器 class Dep { // 靜態屬性 Dep.target,這是一個全局唯一 的Watcher,因為在同一時間只能有一個全局的 Watcher static target = null constructor() {// 存儲訂閱者this.subs = [] } // 添加訂閱者 add(sub) {this.subs.push(sub) } // 通知 notify() {this.subs.forEach(sub => { // 調用訂閱者的update方法 sub.update()}) } } // 定義訂閱者類 class Wather { constructor(vm, exp, cb) {this.vm = vm // vm實例this.exp = exp // 指令對應的字符串值, 如v-model='username', exp相當于'username'this.cb = cb // 回到函數 更新視圖時調用this.value = this.get() // 將自己添加到消息訂閱器Dep中 } get() {// 將當前訂閱者作為全局唯一的Wather,添加到Dep.target上Dep.target = this// 獲取數據,觸發屬性的getter方法const value = this.vm.$data[this.exp]// 在執行添加到消息訂閱Dep后, 重置Dep.targetDep.target = nullreturn value } // 執行更新 update() {this.run() } run() {// 從Model模型中取出屬性值const newVal = this.vm.$data[this.exp]const oldVal = this.valueif(newVal === oldVal) { return false}// 執行回調函數, 將vm實例,新值,舊值傳遞過去this.cb.call(this.vm, newVal, oldVal) } } // 定義解析器 // 解析指令,替換模板數據,初始視圖 // 模板的指令綁定更新函數, 數據更新時, 更新視圖 class Compile { constructor(el, vm) {this.el = elthis.vm = vmthis.init(this.el) } init(el) {this.compileEle(el) } compileEle(ele) {const nodes = ele.childrenfor(const node of nodes) { if(node.children && node.children.length !== 0) { // 遞歸調用, 編譯子節點 this.compileEle(node) } // 指令時v-model并且是標簽是輸入標簽 const hasVmodel = node.hasAttribute(’v-model’) const isInputTag = [’INPUT’, ’TEXTAREA’].indexOf(node.tagName) !== -1 if(hasVmodel && isInputTag) { const exp = node.getAttribute(’v-model’) const val = this.vm.$data[exp] const attr = ’value’ // 初次模型值推到視圖層,初始化視圖 this.modelToView(node, val, attr) // 實例化一個訂閱者, 將更新函數綁定到訂閱者上, 未來數據更新,可以更新視圖 new Wather(this.vm, exp, (newVal)=> { this.modelToView(node, newVal, attr) }) // 監聽視圖的改變 node.addEventListener(’input’, (e) => { this.viewToModel(exp, e.target.value) }) } if(node.hasAttribute(’v-bind’)) { const exp = node.getAttribute(’v-bind’) const val = this.vm.$data[exp] const attr = ’innerHTML’ // 初次模型值推到視圖層,初始化視圖 this.modelToView(node, val, attr) // 實例化一個訂閱者, 將更新函數綁定到訂閱者上, 未來數據更新,可以更新視圖 new Wather(this.vm, exp, (newVal)=> { this.modelToView(node, newVal, attr) }) }} } // 將模型值更新到視圖 modelToView(node, val, attr) {node[attr] = val } // 將視圖值更新到模型上 viewToModel(exp, val) {this.vm.$data[exp] = val } } const myVm = new MyVue({ el: ’#app’, data: {username: ’LastStarDust’ } }) // console.log(Dep.target) </script></body></html>

以上就是vue實現簡易的雙向數據綁定的詳細內容,更多關于vue 實現雙向數據綁定的資料請關注好吧啦網其它相關文章!

標簽: Vue
相關文章:
主站蜘蛛池模板: POS机办理_个人POS机免费领取 - 银联POS机申请首页 | 北京模型公司-工业模型-地产模型-施工模型-北京渝峰时代沙盘模型制作公司 | 超声波气象站_防爆气象站_空气质量监测站_负氧离子检测仪-风途物联网 | 浴室柜-浴室镜厂家-YINAISI · 意大利设计师品牌 | 咿耐斯 |-浙江台州市丰源卫浴有限公司 | 缓蚀除垢剂_循环水阻垢剂_反渗透锅炉阻垢剂_有机硫化物-郑州威大水处理材料有限公司 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 云南成人高考_云南成考网| 影像测量仪_三坐标测量机_一键式二次元_全自动影像测量仪-广东妙机精密科技股份有限公司 | 自动记录数据电子台秤,记忆储存重量电子桌称,设定时间记录电子秤-昆山巨天 | 龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司_龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司 | 雾度仪_雾度计_透光率雾度仪价格-三恩时(3nh)光电雾度仪厂家 | 北京发电车出租-发电机租赁公司-柴油发电机厂家 - 北京明旺盛安机电设备有限公司 | 截齿|煤截齿|采煤机截齿|掘进机截齿|旋挖截齿-山东卓力截齿厂家报价 | 立刷【微电签pos机】-嘉联支付立刷运营中心 | 合肥活动房_安徽活动板房_集成打包箱房厂家-安徽玉强钢结构集成房屋有限公司 | DWS物流设备_扫码称重量方一体机_快递包裹分拣机_广东高臻智能装备有限公司 | 珠宝展柜-玻璃精品展柜-首饰珠宝展示柜定制-鸿钛展柜厂家 | 云南标线|昆明划线|道路标线|交通标线-就选云南云路施工公司-云南云路科技有限公司 | 分光色差仪,测色仪,反透射灯箱,爱色丽分光光度仪,美能达色差仪维修_苏州欣美和仪器有限公司 | RTO换向阀_VOC高温阀门_加热炉切断阀_双偏心软密封蝶阀_煤气蝶阀_提升阀-湖北霍科德阀门有限公司 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 电主轴-高速精密电主轴-高速电机厂家-瑞德沃斯品牌有限公司 | 间甲酚,间甲酚厂家-山东祥东新材料 | 淘气堡_室内儿童乐园_户外无动力儿童游乐设备-高乐迪(北京) | 杭州高温泵_热水泵_高温油泵|昆山奥兰克泵业制造有限公司 | 可程式恒温恒湿试验箱|恒温恒湿箱|恒温恒湿试验箱|恒温恒湿老化试验箱|高低温试验箱价格报价-广东德瑞检测设备有限公司 | 深圳3D打印服务-3D打印加工-手板模型加工厂-悟空打印坊 | 森旺-A级防火板_石英纤维板_不燃抗菌板装饰板_医疗板 | 123悬赏网_发布悬赏任务_广告任务平台| 天津次氯酸钠酸钙溶液-天津氢氧化钠厂家-天津市辅仁化工有限公司 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | Type-c防水母座|贴片母座|耳机接口|Type-c插座-深圳市步步精科技有限公司 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 捆扎机_气动捆扎机_钢带捆扎机-沈阳海鹞气动钢带捆扎机公司 | X光检测仪_食品金属异物检测机_X射线检测设备_微现检测 | 绿叶|绿叶投资|健康产业_绿叶投资集团有限公司 | 合肥角钢_合肥槽钢_安徽镀锌管厂家-昆瑟商贸有限公司 | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 | 环氧树脂地坪漆_济宁市新天地漆业有限公司 | 【中联邦】增稠剂_增稠粉_水性增稠剂_涂料增稠剂_工业增稠剂生产厂家 | 电磁流量计厂家_涡街流量计厂家_热式气体流量计-青天伟业仪器仪表有限公司 |