Vue实现双向绑定的方法

2024-12-01 技术教程

这篇文章主要讲解了Vue实现双向绑定的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

1.发布者-订阅者模式（backbone.js）

思路：使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化，我们将代理事件到发布者-订阅者模式，这会反过来将变化广播并传播到所有绑定的对象和元素。

2.脏值检查（angular.js）

思路：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过setInterval()定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测，大致如下：

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )XHR响应事件 ( $http )浏览器Location变更事件 ( $location )Timer事件( $timeout , $interval )执行 $digest() 或 $apply()3.数据劫持（Vue.js）

思路：vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Object.defineProperty()：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

当获取hello属性时，触发get；设置hello值时，触发set；这就是vue实现双向绑定的核心

完整代码如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-model</title></head><body><div id='app'><h3>{{title}}</h3><input id='i' v-model='text' type="text"><h2>{{text}}</h2><button v-on:click='clickMe'>click me</button></div><script>//Dom类解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图//并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图class Doms {constructor(node, vm) {if (node) {this.$frag = this.nodeToFragment(node, vm)return this.$frag}}nodeToFragment(node, vm) {//将dom转换成fragmentvar frag = document.createDocumentFragment()var child;while (child = node.firstChild) {this.compileElement(child, vm)frag.appendChild(child)}return frag}compileElement(node, vm) {//获取v-model属性,给dom赋值var reg = /\{\{(.*)\}\}/ //匹配双括号里面的任何字符if (node.nodeType === 1) {//element元素var attr = node.attributes;for (var i = 0; i < attr.length; i++) {if (attr[i].nodeName == 'v-model') {var name = attr[i].nodeValue//获取绑定的keynode.addEventListener('input', function (e) {vm[name] = e.target.value//触发set方法})new Watcher(vm, node, name, 'value')} else if (attr[i].nodeName.includes(':')) {var eventType = attr[i].nodeName.split(':')[1]//事件名var cb = vm.methods && vm.methods[attr[i].nodeValue]if (eventType && cb) {node.addEventListener(eventType, cb.bind(vm), false)}}}if (node.childNodes && node.childNodes.length) {//如果还有子节点递归[...node.childNodes].forEach(n => this.compileElement(n, vm))}}if (node.nodeType === 3) {//textif (reg.test(node.nodeValue)) {var name = RegExp.$1name = name.trim()new Watcher(vm, node, name, 'nodeValue')}}}}class Vue {//Vue类constructor(params) {this.data = params.data //获取属性this.methods = params.methods //获取方法this.observe(params.data, this)//监听属性var id = params.el;var dom = new Doms(document.getElementById(id), this)document.getElementById(id).appendChild(dom)params.mounted.call(this)}observe(obj, vm) {//读取data内属性，并监听if (!obj || typeof obj !== 'object') returnObject.keys(obj).forEach(key => this.defineReactive(vm, key, obj[key]))}defineReactive(obj, key, val) {//利用Object.defineProperty监听属性改变var dep = new Dep()Object.defineProperty(obj, key, {get: function () {if (Dep.target) {//添加订阅者watcher到主题对象Depdep.addSub(Dep.target)}return val},set: function (newVal) {if (newVal === val) returnval = newValconsole.log(val)//作为发布者发布通知dep.notify()}})}}class Dep {//收集订阅者的容器类constructor() {this.subs = []}addSub(sub) {this.subs.push(sub)}notify() {this.subs.forEach(sub => sub.update())}}class Watcher {constructor(vm, node, name, type) {Dep.target = thisthis.name = namethis.node = nodethis.vm = vmthis.type = typethis.update()Dep.target = null}update() {this.get()this.node[this.type] = this.value//订阅者执行响应操作}get() {this.value = this.vm[this.name]//触发响应属性的get}}var vm = new Vue({el: 'app',data: {text: 'lyl',title: 'hello world'},methods: {clickMe() {this.title = 'hello world'}},mounted() {setTimeout(() => {this.title = '你好'}, 1000);}})</script></body></html>

看完上述内容，是不是对Vue实现双向绑定的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。