您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

案例

搜索
输入的: id {{Search.Id}}, 产品编号 {{Search.AppKey}}, 产品名称 {{Search.AppName}}
id 产品编号 产品名称

背景

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/bj1.0.4.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();

        });


联系我
置顶