lsdyna如何设置set中的node_list_如何理解vue的双向绑定

vue前端框架,已经越来越多的在各大小型公司被使用,其相对于其他两大框架的优点是上手容易,数据交互友好,不担心dom操作,渐进式框架适合开发者自己的需求。对于vue来说,最重要的概念无非是数据的双向绑定了。下面对于这个发表一下自己的见解。

双向绑定的原理是通过数据劫持结合发布者-订阅者模式的方式来实现的(这个比较官方)。我们进行数据劫持需要设置一个监听器observer,来监听所有属性,当属性变化时,告诉订阅者watcher进行视图更新。

对于一些概念,先从一个简单的例子开始:

var vm = new Vue({
    data: {
        obj: {
            a: 1
        }
    },
    created: function () {
        console.log(this.obj);
    }
});

这个例子可以在控制台输出一个vue实例对象:

ef2b87f770ebd5d36a5cad213e653f53.png

可以看到对象的属性里多出了get和set,Tell Me Why~~~?

ECMAScript有两种属性:数据属性和访问器属性。这个大家可以私下自己查。

访问器属性中包含一对setter和getter函数。在读取访问器属性时会调用getter函数,这个函数负责返回有效的值;在写入访问器属性时,会调用setter函数并传入新值,这个函数负责处理数据。这是vue通过Object.defineProperty() 来定义访问器属性执行getter和setter,来实现数据劫持的,这个方法可以用来控制对象的一些属性,比如读写性、可枚举性等等。我们通过Object.defineProperty()来设置对象的属性,并对其get和set重写操作。当读取对象属性时,执行get函数来获取;当设置对象属性时,会触发set函数。这样就形成了劫持操作,通过监听对象的行为,来执行一些方法。

VUE官方解释关于数据的追踪(数据绑定):

把一个普通 Javascript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持,且无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
getter/setter 对于用户来说是不可见的,但是在内部,通过它们可以让 Vue 在访问属性时进行依赖追踪,以及修改属性时进行变更通知。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
每个组件实例都有相应的 watcher实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

数据的双向绑定,包括视图变化更新数据,数据变化更新视图。视图变化更新数据可以通过一些dom监听进行操作,比如输入框的输入事件,输入完成后更新数据,这就完成了view到data的绑定。对于如何监听数据的变化来更新视图,这个是相对于深入一点的,但是有了Object.defineProperty() 这个方法,就相对简单了,通过设置的set属性,当监听到数据的改变后,就可以执行一些操作来进行视图更新了,多么棒!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值