调试模式
开始
当你有一个庞大的前端系统时,如果没有办法监测数据的变化,那么调试就将变成噩梦。
debug
参数的出现很好地解决了这个问题,你可以在组件定义
或渲染
时添加debug
参数(渲染时的debug参数将会完全覆盖定义时设置的debug参数):
- /* 在定义时添加 */
Ale("test", {
/* ...... */
debug: {
}
})
/* 或者在渲染时动态添加 */
Ale.render("test", {
/* ...... */
debug: {
}
})
debug
参数内置有两个函数:setter
和getter
,分别监测组件数据的设置和获取 (其中,setter和getter各需要一个参数,用来接收值):
- Ale("test", {
/* ...... */
debug: {
setter: function(val){
console.log("你设置了我为:"+val);
},
getter: function(val){
console.log("你获取了我:"+val);
}
}
})
上方实例代码:
- Ale("test", {
template: "在控制台中获取或重设 app.data.data1 的值,然后查看控制台中的输出信息",
debug: {
setter: function(val){
console.log("你设置了我为:"+val);
},
getter: function(val){
console.log("你获取了我:"+val);
}
},
data: {
data1: "Hello"
}
})
Ale.render("test", {
el: "#app"
})