Vue的双向数据绑定原理是什么( 三 ) _组件

方法四、$attrs/$
多级组件嵌套需要传递数据时，通常使用的方法是通过vuex 。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法---- a t t r s / attrs/ attrs/

文章插图
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外) 。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合选项一起使用。
$：包含了父作用域中的 (不含 . 修饰器的) v-on 事件监听器。它可以通过 v-on="$" 传入内部组件
方法五、/
和主要为高阶插件/组件库提供用例，但如果你能在业务中熟练运用，可以达到事半功倍的效果！’
方法六、$ / $与$refs
具体来说看需求咯。技术只是手段，目的达到才是王道
方法四的案例

接下来我们看个跨级通信的例子：// index.vue浪里行舟复制代码// childCom1.vuefoo: {{ foo }}

childCom1的$attrs: {{ $attrs }}

复制代码// childCom2.vueboo: {{ boo }}

childCom2: {{ $attrs }}

复制代码// childCom3.vuechildCom3: {{ $attrs }}

复制代码

如上图所示$attrs表示没有继承数据的对象，格式为{属性名：属性值} 。Vue2.4提供了$attrs , $ 来传递数据与事件，跨级组件之间的通讯变得更简单。
简单来说：$attrs与$ 是两个对象，$attrs里存放的是父组件中绑定的非 Props 属性，$里存放的是父组件中绑定的非原生事件。
对于MVVM的理解
MVVM 是 Model-View- 的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View 。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过进行交互，Model 和之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
MVVM的优缺点?
优点:
分离视图（View）和模型（Model）,降低代码耦合，提高视图或者逻辑的重用性: 比如视图（View）可以独立于Model变化和修改，一个可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把一些视图逻辑放在一个里面，让很多view重用这段视图逻辑提高可测试性: 的存在可以帮助开发者更好地编写测试代码自动更新dom: 利用双向绑定,数据更新后视图自动更新,让开发者从繁琐的手动dom中解放
缺点:
Bug很难被调试: 因为使用双向绑定的模式，当你看到界面异常了，有可能是你View的代码有Bug，也可能是Model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。另外，数据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的一个大的模块中model也会很大，虽然使用方便了也很容易保证了数据的一致性，当时长期持有，不释放内存就造成了花费更多的内存对于大型的图形应用程序，视图状态较多，的构建和维护的成本都会比较高什么是MVC