04avalon - vm内部属性($id)

简介: 04avalon - vm内部属性($id)

VM中以 $开头的属性 都是框架保留使用的特殊属性 ,大家为数据起名字时要小心避开

这些以$开头的属性,目前除了 $id, $events, $watch, $fire, $model比较稳定外, 其他系统属性在不同版本存在增删的情况.

  1. $id :vm的名字
  2. $watch : 用于添加监听函数
  3. $fire : 用于触发监听函数
  4. $events:用于储存监听函数
  5. $model :返回一个纯净的JS对象
  6. $element: 2.0新增, 当我们用ms-controller, ms-important指定一个VM的作用域,对应元素节点会放到这个属性上.
  7. $computed: 2.2.1新增,用来集中定义计算属性

另外,avalon在VBScript或Object.defineProperty模式下不支持 追加新属性与方法

var vm = avalon.define({
        $id: "test",
        test1: "点击测试按钮没反应 绑定失败"
    })
    vm.aaa  = 'newProp'
    vm.newMethod = function () { //不能再追加此方法
        vm.test1 = "绑定成功"
    }

但我们可以通过以下方式,实现添加子属性。

var vm = avalon.define({
    $id: "test",
    placehoder: {}
});
setTimeout(function () {
    vm.placehoder = {//我们必须要通过 = ,直接添加一个对象来添加子属性, 不能
        aaa: 1, //vm.placehoder.aaa =1; vm.placehoder.bbb = 2这样分散地添加子属性
        bbb: 2
    }
}, 1000)

但在firefox4与chrome50后,浏览器支持Proxy对象,可以完美监听对象的增删改查,因此可以动态添加属性或方法

大家可以在浏览器控制台下敲入window.Proxy来知晓支持情况,也可以 通过avalon.config.inProxyMode来开闭此特性. 这个模式暂时只用于avalon.modern.js文件

VM中的数据更新,只能通过 = 赋值方式实现。但要注意在IE6-8,由于VM是一个VBScript对象,为VM添加新属性会抛错, 因此我们想批量更新属性要时格外小心了,需要用hasOwnProperty进行过滤。

注意在IE6-8 下,err是VBscript的关键字,VM中存在这个字段,就会将VM中的其他数组变成字符串,详见这里

为了性能起见,请确保你的对象结构足够扁平,套嵌层次不能太深,里面的数组不能太长。

目录
相关文章
16avalon - 指令ms-attr(属性绑定)
16avalon - 指令ms-attr(属性绑定)
69 1
|
监控
06avalon - vm计算属性 ($computed)
06avalon - vm计算属性 ($computed)
64 0
|
监控 JavaScript 前端开发
05avalon - vm监控属性 ($watch)
05avalon - vm监控属性 ($watch)
71 0
19avalon - 指令ms-class(类名绑定)
19avalon - 指令ms-class(类名绑定)
61 0
|
2月前
|
存储 JSON JavaScript
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
详细介绍了微信小程序中组件的创建、引用(包括局部引用和全局引用)、样式隔离、组件的data、methods和properties,以及组件的数据监听器的使用方法和场景。
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
09avalon - vm是如何作用视图
09avalon - vm是如何作用视图
55 0
|
6月前
|
JavaScript
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
35avalon - 指令ms-widget(组件绑定介绍)
35avalon - 指令ms-widget(组件绑定介绍)
31 0
|
存储 JavaScript
如何使用 ref 属性获取子组件实例对象?
如何使用 ref 属性获取子组件实例对象?
144 0
|
移动开发 JSON JavaScript
weex-使用Vue.set设置属性和使用this.xxx设置属性的区别
weex-使用Vue.set设置属性和使用this.xxx设置属性的区别
115 0
weex-使用Vue.set设置属性和使用this.xxx设置属性的区别