Day 51/100 Vue双向绑定原理及相关知识链接

写在前面的话

面多了,问题五花八门,但也有一些规律,比如,今儿的题就是常考题~

(一)Vue的双向绑定原理

实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。




vm.$set()原理

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化,所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

vm.$set()在new Vue()时候就被注入到Vue的原型上。

vm.$set()解决了什么问题? 避免滥用

在Vue.js里面只有data中已经存在的属性才会被Observe为响应式数据, 如果你是新增的属性是不会成为响应式数据, 因此Vue提供了一个api(vm.$set)来解决这个问题。



数据响应式原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,

那么vue是如果进行数据劫持的???

1)vue2.0版本是利用了Object.defineProperty()这个方法重新定义对象获取属性值的get和设置属性值set的操作来实现的。

2)vue3.0版本采用了Es6的Proxy对象来实现。


Object.defineProperty的缺点 :不能监听到数组变化

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

当你直接设置一个项的索引时, 例如: vm.items[indexOfItem] = newValue

当你修改数组的长度时, 例如: vm.items.length = newLength

无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。

https://www.cnblogs.com/YikaJ/p/4278255.html

所以vue才设置了7个变异数组(push、pop、shift、unshift、splice、sort、reverse)的 hack 方法来解决问题。

只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。如果能直接劫持一个对象,就不需要递归 + 遍历了


为什么vue3中改用proxy

1)defineProperty只能监听某个属性,不能对全对象监听,所以可以省去for in 提升效率

2)可以监听数组,不用再去单独对数组做操作

3)Proxy只是代理了原对象,不会污染原对象

那么,在vue中从一个数据到发生改变的过程是什么?


MVVM和MVC的区别

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

几乎所有的App都只干这么一件事:将数据展示给用户看,并处理用户对界面的操作。

MVC的思想:一句话描述就是Controller负责将Model的数据用View显示出来,换句话说就是在Controller里面把Model的数据赋值给View。


MVVM

什么是MVVM

MVVM:Model、View、ViewModel。

你会下意识地把它和MVC来对比,你会发现,MVVM多了一个ViewModel而少了Controller。

首先说一下多出来的ViewModel(VM,不是显存)。

VM的意义,和Model一样,在于数据。

Model负责对数据进行取和存,然而我们对数据的操作除了取和存以外,还有一个非常重要的操作:解析。



参考链接:

cnblogs.com/renzm0318/p/12289415.html

https://www.cnblogs.com/chenhuichao/p/10818396.html

https://www.cnblogs.com/canfoo/p/6891868.html

https://www.jianshu.com/p/77eaaf34e732

https://blog.csdn.net/qq_42068550/article/details/89480350

https://www.cnblogs.com/webcabana/p/11077628.html

你可能感兴趣的:(Day 51/100 Vue双向绑定原理及相关知识链接)