js双向绑定采用自主编运用proxy代理的形式实现的，vue3也是通过proxy代理的。

我们知道vue主要的是双向绑定，vue2.0和3.0使用的形式还有所区别：

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。

vue3 中使⽤了 es6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。

这⾥是引相⽐于vue2版本，使⽤proxy的优势如下
1.defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
2.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听

在使用vue2.0,3.0的时候博主发现几个场景写起来比较繁琐： 1.当属性字段值变化的时候，vue的监听watch写起来就比较痛苦了
2.模板渲染的时候，想自定义方法且传参的时候，vue的不太支持，
博主自己写了个简版的双向绑定,再配合腾讯的模板引擎结合起来 ，基本实现可以不写jquery代码

<!--引用腾讯的模板引擎-->
<script src="~/Content/plugins/artTemplate/template-simple.js"></script>
<!--双向绑定的js-->
<script src="~/Content/plugins/ban.min.js"></script>

 var ban = new Ban({
            data: {

                Search: {
                    Id: 0,
                    AppKey: "",
                    AppName: '',

                    PageSize: 20,
                    Page: 1
                }, //搜索条件
                Lst: [
                    { Id: 1, AppKey: "code1", AppName: "测试产品1" },
                    { Id: 2, AppKey: "code2", AppName: "测试产品2" },
                    { Id: 3, AppKey: "code3", AppName: "测试产品3" },
                    { Id: 4, AppKey: "code4", AppName: "测试产品4" },
                    { Id: 5, AppKey: "code5", AppName: "测试产品5" },
                    { Id: 6, AppKey: "code6", AppName: "测试产品6" },
                ], //列表集合,
            }
        });
        var P = {
            Search: () => {
                var lst = [];
                ban.$data.Lst.forEach((sub, i) => {
                    var flag = true;
                    if (ban.$data.Search.Id > 0) {
                        flag = false;
                        if (sub.Id == ban.$data.Search.Id) {
                            flag = true;
                        }
                    }
                    if (ban.$data.Search.AppKey.length > 0) {
                        flag = false;
                        if (sub.AppKey == ban.$data.Search.AppKey) {
                            flag = true;
                        }
                    }
                    if (ban.$data.Search.AppName.length > 0) {
                        flag = false;
                        if (sub.AppName == ban.$data.Search.AppName) {
                            flag = true;
                        }
                    }
                    if (flag) lst.push(sub);
                });
                //渲染数据
                var html = template('tpl_lsttable', {
                    lst: lst
                });
                document.querySelector('#listtable').innerHTML = html;
            },
            InitData: () => {
                //渲染数据
                var html = template('tpl_lsttable', {
                    lst: JSON.parse(JSON.stringify(ban.$data.Lst))
                });
                document.querySelector('#listtable').innerHTML = html;
            }
        }

        $(function () {
            P.InitData();

        });