vue蓄力1：通俗易懂了解Vue双向绑定原理及实现

最新推荐文章于 2022-04-03 14:20:32 发布
最新推荐文章于 2022-04-03 14:20:32 发布
阅读量323 收藏
点赞数
分类专栏： vue

有部分TypeScript，defineProperty，es6语法，不懂的请自行查阅哦！
阅读目录

 

回到顶部
 

1. 前言

每当被问到Vue数据双向绑定原理的时候，大家可能都会脱口而出：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。虽然一句话把大概原理概括了，但是其内部的实现方式还是值得深究的，本文就以通俗易懂的方式剖析Vue内部双向绑定原理的实现过程。

回到顶部

2. 思路分析

所谓MVVM数据双向绑定，即主要是：数据变化更新视图，视图变化更新数据。如下图：

也就是说：

  • 输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
  • data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。

要实现这两个过程，关键点在于数据变化如何更新视图，因为视图变化更新数据我们可以通过事件监听的方式来实现。所以我们着重讨论数据变化如何更新视图。

数据变化更新视图的关键点则在于我们如何知道数据发生了变化，只要知道数据在什么时候变了，那么问题就变得迎刃而解，我们只需在数据变化的时候去通知视图更新即可。

回到顶部

3. 使数据对象变得“可观测”

数据的每次读和写能够被我们看的见，即我们能够知道数据什么时候被读取了或数据什么时候被改写了，我们将其称为数据变的‘可观测’。

要将数据变的‘可观测’，我们就要借助前言中提到的Object.defineProperty方法了，关于该方法，MDN上是这么介绍的：

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

在本文中，我们就使用这个方法使数据变得“可观测”。

首先，我们定义一个数据对象car：

let car = {
        'brand':'BMW',
        'price':3000
    }

我们定义了这个car的品牌brand是BMW,价格price是3000。现在我们可以通过car.brand和car.price直接读写这个car对应的属性值。但是，当这个car的属性被读取或修改时，我们并不知情。那么应该如何做才能够让car主动告诉我们，它的属性被修改了呢？

接下来，我们使用Object.defineProperty()改写上面的例子：

    let car = {}
    let val = 3000
    Object.defineProperty(car, 'price', {
        get(){
            console.log('price属性被读取了')
            return val
        },
        set(newVal){
            console.log('price属性被修改了')
            val = newVal
        }
    })

通过Object.defineProperty()方法给car定义了一个price属性，并把这个属性的读和写分别使用get()和set()进行拦截，每当该属性进行读或写操作的时候就会出发get()和set()。如下图：

可以看到，car已经可以主动告诉我们它的属性的读写情况了，这也意味着，这个car的数据对象已经是“可观测”的了。

为了把car的所有属性都变得可观测，我们可以编写如下两个函数：

/**
     * 把一个对象的每一项都转化成可观测对象
     * @param { Object } obj 对象
     */
    function observable (obj) {
        if (!obj || typeof obj !== 'object') {
            return;
        }
        let keys = Object.keys(obj);
        keys.forEach((key) =>{
            defineReactive(obj,key,obj[key])
        })
        return obj;
    }
    /**
     * 使一个对象转化成可观测对象
     * @param { Object } obj 对象
     * @param { String } key 对象的key
     * @param { Any } val 对象的某个key的值
     */
    function defineReactive (obj,key,val) {
        Object.defineProperty(obj, key, {
            get(){
                console.log(`${key}属性被读取了`);
                return val;
            },
            set(newVal){
                console.log(`${key}属性被修改了`);
                val = newVal;
            }
        })
    }

现在，我们就可以这样定义car:

let car = observable({
        'brand':'BMW',
        'price':3000
    })

car的两个属性都变得可观测了。

回到顶部

4. 依赖收集

完成了数据的'可观测'，即我们知道了数据在什么时候被读或写了，那么，我们就可以在数据被读或写的时候通知那些依赖该数据的视图更新了，为了方便，我们需要先将所有依赖收集起来，一旦数据发生变化，就统一通知更新。其实，这就是典型的“发布订阅者”模式，数据变化为“发布者”，依赖对象为“订阅者”。

现在，我们需要创建一个依赖收集容器，也就是消息订阅器Dep，用来容纳所有的“订阅者”。订阅器Dep主要负责收集订阅者，然后当数据变化的时候后执行对应订阅者的更新函数。

创建消息订阅器Dep:

    class Dep {
        constructor(){
            this.subs = []
        },
        //增加订阅者
        addSub(sub){
            this.subs.push(sub);
        },
        //判断是否增加订阅者
        depend () {
            if (Dep.target) {
                this.addSub(Dep.target)
            }
        },

        //通知订阅者更新
        notify(){
            this.subs.forEach((sub) =>{
                sub.update()
            })
        }
    }
Dep.target = null;

有了订阅器，再将defineReactive函数进行改造一下，向其植入订阅器：

function defineReactive (obj,key,val) {
        let dep = new Dep();
        Object.defineProperty(obj, key, {
            get(){
                dep.depend();
                console.log(`${key}属性被读取了`);
                return val;
            },
            set(newVal){
                val = newVal;
                console.log(`${key}属性被修改了`);
                dep.notify()                    //数据变化通知所有订阅者
            }
        })
    }

从代码上看，我们设计了一个订阅器Dep类，该类里面定义了一些属性和方法，这里需要特别注意的是它有一个静态属性 target，这是一个全局唯一 的Watcher，这是一个非常巧妙的设计，因为在同一时间只能有一个全局的 Watcher 被计算，另外它的自身属性 subs 也是 Watcher 的数组。

我们将订阅器Dep添加订阅者的操作设计在getter里面，这是为了让Watcher初始化时进行触发，因此需要判断是否要添加订阅者。在setter函数里面，如果数据变化，就会去通知所有订阅者，订阅者们就会去执行对应的更新的函数。

到此，订阅器Dep设计完毕，接下来，我们设计订阅者Watcher.

回到顶部

5. 订阅者Watcher

订阅者Watcher在初始化的时候需要将自己添加进订阅器Dep中，那该如何添加呢？我们已经知道监听器Observer是在get函数执行了添加订阅者Wather的操作的，所以我们只要在订阅者Watcher初始化的时候出发对应的get函数去执行添加订阅者操作即可，那要如何触发get的函数，再简单不过了，只要获取对应的属性值就可以触发了，核心原因就是因为我们使用了Object.defineProperty( )进行数据监听。这里还有一个细节点需要处理，我们只要在订阅者Watcher初始化的时候才需要添加订阅者，所以需要做一个判断操作，因此可以在订阅器上做一下手脚：在Dep.target上缓存下订阅者，添加成功后再将其去掉就可以了。订阅者Watcher的实现如下：

    class Watcher {
        constructor(vm,exp,cb){
            this.vm = vm;
            this.exp = exp;
            this.cb = cb;
            this.value = this.get();  // 将自己添加到订阅器的操作
        },

        update(){
            let value = this.vm.data[this.exp];
            let oldVal = this.value;
            if (value !== oldVal) {
                this.value = value;
                this.cb.call(this.vm, value, oldVal);
            },
        get(){
            Dep.target = this;  // 缓存自己
            let value = this.vm.data[this.exp]  // 强制执行监听器里的get函数
            Dep.target = null;  // 释放自己
            return value;
        }
    }

过程分析：

订阅者Watcher 是一个 类，在它的构造函数中，定义了一些属性：

  • vm:一个Vue的实例对象；
  • exp:是node节点的v-model或v-on：click等指令的属性值。如v-model="name"，exp就是name;
  • cb:是Watcher绑定的更新函数;

当我们去实例化一个渲染 watcher 的时候，首先进入 watcher 的构造函数逻辑，就会执行它的 this.get() 方法，进入 get 函数，首先会执行：

Dep.target = this;  // 缓存自己

实际上就是把 Dep.target 赋值为当前的渲染 watcher ,接着又执行了：

let value = this.vm.data[this.exp]  // 强制执行监听器里的get函数

在这个过程中会对 vm 上的数据访问，其实就是为了触发数据对象的getter。

每个对象值的 getter都持有一个 dep，在触发 getter 的时候会调用 dep.depend() 方法，也就会执行this.addSub(Dep.target),即把当前的 watcher 订阅到这个数据持有的 dep 的 subs 中，这个目的是为后续数据变化时候能通知到哪些 subs 做准备。

这样实际上已经完成了一个依赖收集的过程。那么到这里就结束了吗？其实并没有，完成依赖收集后，还需要把 Dep.target 恢复成上一个状态，即：

Dep.target = null;  // 释放自己

因为当前vm的数据依赖收集已经完成，那么对应的渲染Dep.target 也需要改变。

而update()函数是用来当数据发生变化时调用Watcher自身的更新函数进行更新的操作。先通过let value = this.vm.data[this.exp];获取到最新的数据,然后将其与之前get()获得的旧数据进行比较，如果不一样，则调用更新函数cb进行更新。

至此，简单的订阅者Watcher设计完毕。

回到顶部

6. 测试

完成以上工作后，我们就可以来真正的测试了。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="name"></h1>
    <input type="text">
    <input type="button" value="改变data内容" onclick="changeInput()">
    
<script src="observer.js"></script>
<script src="watcher.js"></script>
<script>
    function myVue (data, el, exp) {
        this.data = data;
        observable(data);                      //将数据变的可观测
        el.innerHTML = this.data[exp];           // 初始化模板数据的值
        new Watcher(this, exp, function (value) {
            el.innerHTML = value;
        });
        return this;
    }

    var ele = document.querySelector('#name');
    var input = document.querySelector('input');
    
    var myVue = new myVue({
        name: 'hello world'
    }, ele, 'name');
    
    //改变输入框内容
    input.oninput = function (e) {
        myVue.data.name = e.target.value
    }
    //改变data内容
    function changeInput(){
        myVue.data.name = "难凉热血"
    
    }
</script>
</body>
</html>

observer.js

    /**
     * 把一个对象的每一项都转化成可观测对象
     * @param { Object } obj 对象
     */
    function observable (obj) {
        if (!obj || typeof obj !== 'object') {
            return;
        }
        let keys = Object.keys(obj);
        keys.forEach((key) =>{
            defineReactive(obj,key,obj[key])
        })
        return obj;
    }
    /**
     * 使一个对象转化成可观测对象
     * @param { Object } obj 对象
     * @param { String } key 对象的key
     * @param { Any } val 对象的某个key的值
     */
    function defineReactive (obj,key,val) {
        let dep = new Dep();
        Object.defineProperty(obj, key, {
            get(){
                dep.depend();
                console.log(`${key}属性被读取了`);
                return val;
            },
            set(newVal){
                val = newVal;
                console.log(`${key}属性被修改了`);
                dep.notify()                    //数据变化通知所有订阅者
            }
        })
    }
    class Dep {
        
        constructor(){
            this.subs = []
        }
        //增加订阅者
        addSub(sub){
            this.subs.push(sub);
        }
        //判断是否增加订阅者
        depend () {
            if (Dep.target) {
                this.addSub(Dep.target)
            }
        }

        //通知订阅者更新
        notify(){
            this.subs.forEach((sub) =>{
                sub.update()
            })
        }
        
    }
    Dep.target = null;

watcher.js

    class Watcher {
        constructor(vm,exp,cb){
            this.vm = vm;
            this.exp = exp;
            this.cb = cb;
            this.value = this.get();  // 将自己添加到订阅器的操作
        }
        get(){
            Dep.target = this;  // 缓存自己
            let value = this.vm.data[this.exp]  // 强制执行监听器里的get函数
            Dep.target = null;  // 释放自己
            return value;
        }
        update(){
            let value = this.vm.data[this.exp];
            let oldVal = this.value;
            if (value !== oldVal) {
                this.value = value;
                this.cb.call(this.vm, value, oldVal);
            }
    }
}

效果：

完整代码,在这里https://github.com/SanlyShi/vueBinding

回到顶部

7. 总结

总结一下：

实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。


再附一个 更花的图

（完）

使用JSDoc

复制代码

 /**基础类型*/
 /**@type {string} */

 /**联合类型 */
 /**@type {string | number} */

 /**数组类型 */
 /**@type {string[]} */
 /**@type {Array.<string>} */

 /**对象字面量类型 */
 /**@type {a:string,b:number} */

 /**map-like 类型 */
 /**@type {Object.<string,number>} */

 /**array-like 类型 */
 /**@type {Object.<number,object>} */

 /**closure 语法 */
 /**@type {function(string,boolean):number} */
 /**TypeScript 语法 */
 /**@type {(a:string,b:string) => number} */

 /**函数类型 */
 /**@type {function} */

 /**任意类型 */
 /**@type {*} */
 /**@type {?} */

 /**导入类型 */
 /**@param {import('./a').Pet} */
 /**@typedef Pet {import("./a").Pet} */
 /**@type {Pet} */

 /**params语法类似于type,唯一区别于可选属性 ,arg可选且默认值为test*/
 /**@param [arg = 'test'] */

 /**返回值类型 */
 /**@return {string} */

 /**复杂类型 */
 /**@typedef {prop1:string,prop2:string,prop3?:number} SpecialType */
 /**@typedef {(prop1:string,prop2?:number) => number} Predicate*/

 /**泛型类型 */
 /**@template T */
 /**@param {T} */
 /**@return {T} */
 function id(x) {return x;}

 /**指定this的类型 */
 /**@this {HTMLElement} */

复制代码

 

/**基础类型*/

/**@type{string} */

 

/**联合类型 */

/**@type{string | number} */

 

/**数组类型 */

/**@type{string[]} */

/**@type{Array.<string>} */

 

/**对象字面量类型 */

/**@type{a:string,b:number} */

 

/**map-like 类型 */

/**@type{Object.<string,number>} */

 

/**array-like 类型 */

/**@type{Object.<number,object>} */

 

/**closure 语法 */

/**@type{function(string,boolean):number} */

/**TypeScript 语法 */

/**@type{(a:string,b:string) => number} */

 

/**函数类型 */

/**@type{function} */

 

/**任意类型 */

/**@type{*} */

/**@type{?} */

 

/**导入类型 */

/**@param{import('./a').Pet} */

/**@typedefPet {import("./a").Pet} */

/**@type{Pet} */

 

/**params语法类似于type,唯一区别于可选属性 ,arg可选且默认值为test*/

/**@param [arg = 'test'] */

 

/**返回值类型 */

/**@return{string} */

 

/**复杂类型 */

/**@typedef{prop1:string,prop2:string,prop3?:number}SpecialType */

/**@typedef{(prop1:string,prop2?:number) => number}Predicate*/

 

/**泛型类型 */

/**@templateT */

/**@param{T} */

/**@return{T} */

function id(x) {return x;}

 

/**指定this的类型 */

/**@this{HTMLElement} */


原文转自：https://www.cnblogs.com/wangjiachen666/p/9883916.html



更形象的在这儿哦！！！！！！！！！！
 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1 id="name"></h1>
	<input type="text">
	
<script src="observer.js"></script>
<script src="watcher.js"></script>
<script>
	function myVue (data, el, exp) {
	    this.data = data;
		observable(data);                      //将数据变的可观测
		console.log("我要读取name属性数据了")
	    el.innerHTML = this.data[exp];           // 初始化模板数据的值
	    new Watcher(this, exp, function (value) {
			console.log("你妹，你猜傻子标签，我显示出来行了吧")
	        el.innerHTML = value;
	    });
	    return this;
	}

	var ele = document.querySelector('#name');
	var input = document.querySelector('input');
	
    var myVue = new myVue({
		name: '我是实例name属性的初始值'
	}, ele, 'name');
 	
	//改变输入框内容
    input.oninput = function (e) {
		console.log("~~~~~~~~~~~动作分隔符~~~~~~~~~~~~~~bling~bling~~~~~~~")
		console.log("监听输入框变化，变化后将目标值赋值给实例的name属性")
    	myVue.data.name = e.target.value
    }
</script>
</body>
</html>
	/**
	 * 把一个对象的每一项都转化成可观测对象
	 * @param { Object } obj 对象
	 */
	function observable (obj) {
		console.log("对对象属性做出变化监听")
		if (!obj || typeof obj !== 'object') {
        	return;
    	}
		let keys = Object.keys(obj);
		keys.forEach((key) =>{
			defineReactive(obj,key,obj[key])
		})
		return obj;
	}
	/**
	 * 使一个对象转化成可观测对象
	 * @param { Object } obj 对象
	 * @param { String } key 对象的key
	 * @param { Any } val 对象的某个key的值
	 */
	function defineReactive (obj,key,val) {
		console.log("进入监听属性设置")
		let dep = new Dep();
		Object.defineProperty(obj, key, {
			get(){
				console.log(`${key}属性被读取了`);
				dep.depend();
				return val;
			},
			set(newVal){
				val = newVal;
				console.log(`${key}属性被修改了，实例中的值已经被更新啦`);
				dep.notify()                    //数据变化通知所有订阅者
			}
		})
	}

	// 消息订阅器Dep，用来容纳所有的“订阅者”
	class Dep {
		
		constructor(){
			console.log("初始化Dep依赖收集器（依赖该数据的视图）")
			this.subs = []
		}
		//增加订阅者
		addSub(sub){
			console.log('增加订阅者')
			this.subs.push(sub);
		}
        //判断是否增加订阅者
		depend () {
			console.log("判断是否增加订阅者")
		    if (Dep.target) {
				console.log("我曹，订阅者target不是空了，那我要存起来")
		     	this.addSub(Dep.target)
		    }
		}

		//通知订阅者更新
		notify(){
			console.log("我去，好像数据被谁改了！那我要去通知儿子们更新了")
			this.subs.forEach((sub) =>{
				sub.update()
			})
		}
		
	}
	Dep.target = null;
// 订阅者Watcher
	class Watcher {
		constructor(vm,exp,cb){
			console.log("初始化观察者构造器")
		    this.vm = vm;
		    this.exp = exp;
		    this.cb = cb;
		    this.value = this.get();  // 将自己添加到订阅器的操作
		}
		get(){
			Dep.target = this;  // 缓存自己
			console.log("现在开始Dep的target不是空啦，是一个Watcher订阅者")
			console.log("那我要再把初始化的name属性的值get一次")
			let value = this.vm.data[this.exp]  // 强制执行监听器里的get函数
			console.log("既然存好了，那我就把茅坑让出来了，我要清空Dep的target，至此，监听完成，初始化完成，下面更新一下试试吧")
        	Dep.target = null;  // 释放自己
        	return value;
		}
		update(){
			console.log("嗯，好吧，我是他儿子，我要变了")

			console.log("我来看下实例中的新值")
			let value = this.vm.data[this.exp];

			console.log("我来看下我这个订阅者里存的值")
			let oldVal = this.value;
			
        	if (value !== oldVal) {
				console.log("我擦，不一样，那赶紧跟进人家的新玩意儿吧")
				this.value = value;
				
				console.log("光我自己知道了不行啊，我要让外面的傻子标签页显示出来")
                this.cb.call(this.vm, value, oldVal);
			}
	}
}

 

sanly_shi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue的双向绑定原理及实现
10-17
主要介绍了vue双向绑定原理及实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue数据双向绑定原理及简单实现方法
08-27
Vue 数据双向绑定原理及简单实现方法 数据双向绑定是 Vue 框架的核心特性之一，它通过数据劫持结合发布者-订阅者模式来实现的。下面将详细介绍 Vue 数据双向绑定原理及简单实现方法。 一、数据劫持 Vue 中的数据...
通俗易懂了解Vue双向绑定原理及实现
liuyuanyan的博客
12-06 401
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
面试总结：vue实现数据双向绑定的原理
mrhuanhuan的博客
09-27 2万+
vue实现数据双向绑定的原理就是用Object.defineproperty()重新定义（set方法）对象设置属性值和（get方法）获取属性值的操纵来实现的 Object.property()方法的解释：Object.property(参数1，参数2，参数3)   返回值为该对象obj 其中参数1为该对象（obj），参数2为要定义或修改的对象的属性名，参数3为属性描述符，属性描述符是一个对象，...
vue2的双向绑定简单理解
qq_45829293的博客
04-03 1763
vue2中是通过Object.definedProperty()来实现数组的劫持， 当vue初始化数据上的对象之后，在控制台打印可以看到有get和set方法，get是在读取属性值触发的函数，set是设置属性值触发的函数。 var Book = {} var name = ''; Object.defineProperty(Book, 'name', { set: function (value) { name = value; console.log('你取了一个书名叫做' + va
Android DataBing详解
热门推荐
willba的博客
05-10 2万+
转载于http://blog.csdn.net/qdjdeveloper/article/details/62236309        前几天小试牛刀写了一篇 Android DataBinding 初探，只是简单的介绍了一下 DataBinding 的几个小问题，并没有特别详细的去介绍 DataBinding 的更多方法，这几天看了一下 DataBinding 的官网的相关内容，觉得有必
android 读写系统日历、插入事件、添加多个提醒的问题
冰糖会发光
11-01 5175
最近在写APP读写系统日历，遇到不少坑，总结一下。 1.个别手机无法读写系统日历。 2.添加了日历账户，过不久会自动消失。 3.一个事件如何添加多个提醒。 下面一一解答： 1.其他手机都可以读写系统日历，但红米NOTE无法读写，首先确认了读写日历的权限已经添加完成（高版本获取权限的方法自行百度）。本人也下载了很多其他日历相关的应用，在红米NOTE上都可以读写到系统日历，由此确认肯定是
Vue 3.0双向绑定原理的实现方法
10-16
主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
深入理解vue.js双向绑定的实现原理
10-20
【Vue.js 双向绑定实现原理】 Vue.js 是一款基于 MVVM 架构的前端框架，它的核心特性之一就是响应式的数据绑定系统。双向绑定使得数据模型(model)和视图(view)之间能实时同步，无需手动操作 DOM。下面将详细解释 ...
浅谈vue中数据双向绑定的实现原理
08-29
Vue中的数据双向绑定实现原理 在Vue框架中，数据双向绑定是指视图层和数据层之间的相互影响关系。当数据层的数据发生变化时，视图层也会相应地更新；同样，当视图层的数据发生变化时，数据层也会相应地更新。这种...
大白话理解Vue数据双向绑定原理
可可爱爱的你吖的博客
08-04 528
Vue的数据双向绑定原理就是采用 数据劫持结合发布者-订阅者模式来实现的，其原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。 思路整理：通过obj.defineProperty()来对属性进行劫持，达到监听数据变动的目的 1.实现一个数据监听器Observer,能够对数据对象的所有属性进行监听，如有变动可拿到最新值并同指订阅者 2.实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板
VUE数据侦测原理
Mencre的博客
10-22 449
一、VUE2中的实现方法 1. 前言 我们知道：数据驱动视图的关键点则在于我们如何知道数据发生了变化，只要知道数据在什么时候变了，那么问题就变得迎刃而解，我们只需在数据变化的时候去通知视图更新即可。 要想知道数据什么时候被读取了或数据什么时候被改写了，其实不难，JS为我们提供了Object.defineProperty方法，通过该方法我们就可以轻松的知道数据在什么时候发生变化。 2. Object.definePropety ES5 提供了 Object.defineProperty 方法，该方法可以在一个
简述Vue的双向数据绑定的理解
一夜枫林
03-02 289
Vue实现双向数据绑定的原理： 就是利用了Object.Property()这个方法，重新定义了对获取属性值(get)和设置属性(set)的操作来实现的， 它接收的三个参数，要操作的对象，要定义或者要修改的对象的属性名， 属性描述符。重点接收最后的属性描述符，属性描述符是一个对象， 主要有两种形式：数据的描述性和存取描述符。这两种对象只能选择 一种使用，不能混合两种描述符的属性同时使用。 每个组件实例都对， 应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性， 记录为依赖。之后当依赖
Vue面试题精选：Vue原理以及双向数据绑定的实战过程
The_qianduan的博客
04-18 1363
Vue面试题精选：Vue原理以及双向数据绑定的实战过程 1 MVVM 双向数据绑定指的是，将对象属性变化与视图的变化相互绑定。换句话说，如果有一个拥有name属性的user对象，与元素的内容绑定，当给user.name赋予一个新值，页面元素节点也会相应的显示新的数据。同样的，如果页面元素(通常是input）上的数据改变，输入一个新的值会导致user对象中的name属性发生变化。 MVVM最早由微软...
创新药系列阿尔兹海默病千万患者迎来新疗法.pdf
07-18
医疗行业研究报告
2024全球数字营销趋势报告25页.pdf
最新发布
07-18
医疗行业研究报告
计算机控制专业技术.doc
07-18
计算机
计算机审计方法.doc
07-18
计算机
Vue面试深度解析：从基础到双向数据绑定原理
- Compile：Vue编译器解析模板指令，将模板中的变量替换为实际数据，并初始化视图。同时，它会为每个指令绑定一个更新函数，用于监听数据变化。 - Watcher：Watcher作为Observer和Compile之间的通信桥梁，每当数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值