如何将Vue的MVVM数据响应机制改写为支持长尾词的动态查询功能？

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

为什么实现数据响应式+当前vue、react等框架流程。无论vue还是react，其最初的设计思路都类似。都是以数据驱动视图，数据优先。希望可以通过框架减少开发人员直接操作。

为什么实现数据响应式

当前vue、react等框架流行。无论是vue、还是react框架大家最初的设计思路都是类似的。都是以数据驱动视图，数据优先。希望能够通过框架减少开发人员直接操作节点，让开发人员能够把更多的精力放在业务上而不是过多的放在操作节点上。另一方面，框架会通过虚拟dom及diff算法提高页面性能。这其中需要数据优先最根本的思路就是实现数据响应式。so，本次来看下如何基于原生实现数据响应式。

vue中的数据响应

vue中会根据数据将数据通过大胡子语法及指令渲染到视图上，这里我们以大胡子语法为例。如下：

<div id="app"> {{message}} </div>

let vm = new Vue({ el:"#app", data:{ message:"测试数据" } }) setTimeout(()=>{ vm.message = "修改的数据"; },1000)

如上代码，很简单 。vue做了两件事情。一、把message数据初次渲染到视图。二、当message数据改变的时候视图上渲染的message数据同时也会做出响应。以最简单的案例。带着问题来看，通过原生js如何实现？？这里为了简化操作便于理解，这里就不去使用虚拟dom。直接操作dom结构。