Vue2与Vue3的数据绑定原理及实现，如何巧妙地改写为长尾词？

本文共计2361个文字，预计阅读时间需要10分钟。

目录 + 介绍 + Object.defineProperty + Proxy + 介绍 + 数据绑定是种将用户界面元素（控件）的属性绑定到特定对象的方法，将属性绑定到对象上并同步机制，让开发者无需编写同步视图模型和视图的逻辑。观察者

目录

• 介绍
• Object.defineProperty
• Proxy

介绍

数据绑定是一种把用户界面元素（控件）的属性绑定到特定对象上面并使其同步的机制，使开发人员免于编写同步视图模型和视图的逻辑。

观察者模式又称为发布-订阅模式，定义对象间的一种一对多的依赖关系，当它本身的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。比如用户界面可以作为一个观察者，业务数据是被观察者，用户界面观察业务数据的变化，发现数据变化后，就同步显示在界面上。这样可以确保界面和数据之间划清界限，假定应用程序的需求发生变化，需要修改界面的表现，只需要重新构建一个用户界面，业务数据不需要发生变化。有以下几个角色：

• 抽象主题（Subject）：提供一个接口，把所有观察者对象的引用保存到一个集合里，可以增加和删除观察者对象。
• 具体主题（Concrete Subject）：将有关状态信息存入观察者对象，在本身的内部状态改变时，给所有登记过的观察者发出通知。
• 抽象观察者（Observer）：为所有的具体观察者定义一个接口，在得到主题通知时更新自己。