贴点我的 ClojureScript 代码, 免得被人当成菜鸟... https://github.com/Respo/respo
期待 Vue 改进的一些开发当中的细节:
查看 this.data.x 数据
开发过程当中经常需要查看当前的组件状态当中数据的结构,
我平时的习惯就是两个, 一个 log, 另一个直接在界面显示,
console.log 打印 Vue 里的数据, 出现奇怪的对象,
我听说了 Vue 通过 Proxy 劫持了, 这个就很反直觉了:
Object {__ob__: Observer}点一下, 想展开看看吧, 出现了好多奇怪的东西:
Object {__ob__: Observer}
a: ...
__ob__ : Observer
get a : function reactiveGetter()
set a : function reactiveSetter(newVal)
__proto__ : Object嗯.... 然后我只好写 JSON.stringify(this.nested) 去了..
另一个调试的方法是直接用 {{nested}} 把数据显示出来.
这个好像没啥问题.
报错定位
开发习惯嘛, 经常会把 Pause on Break 开起来..
但是界面没反应, 不知道是不是出错了, 因为没有出现断点吗,
结果打开终端一看, 红的... 就想定位到源码,
结果打开一看:
"use strict";
eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_Hello__ = __webpack_require__(25);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_Hello___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_Hello__);\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'app',\n data: function data() {\n return {\n nested: {\n a: {\n b: 2\n }\n }\n };\n },\n created: function created() {\n console.log(this.nested);\n this.x();\n },\n\n components: {\n Hell....好吧 Vue 我不熟悉, 不知道为什么用的 eval, 难道我要一直开 pause on uncaught break?
...评论提到我是 Webpack 配置不对, 但是看上去像是 vue-loader 我不会配导致的 - -
功能抽象
模板引擎对简单的场景还算舒服, v-if v-for 还可以,
然而稍微复杂一点的地方, 我第一反应还是编程语言习惯的用法,
当然这个是其他语言里带来的用法:
switch router
when 'a' then renderA()
when 'b' then renderB()
else renderC()等一下是不是文档里定义了什么语法我没看到.... 我找一下...
或者随时增加临时变量吧:
render: ->
t1 = a.b.c
if t1?
div {}, t1
else
span {}, 'placeholder'但是模板引擎里要写在 data computed methods 里才能处理..
这个主要是不习惯, 不是功能缺失.
组件化习惯
有个地方从 React 转过来很不适应, 不知道是不是 Vue 主流的习惯,
看上去用法是很简单的,
欢迎使用 Element
data: function() {
return { visible: false }
}麻烦的地方在于随着 dialog 内容增多, 整个页面的组件化就不够清晰了,
React 里会习惯用组件把独立的部分尽快分离出去, 然后单独管理,
我在别人的代码当中遇到写了很多个复杂的 dialog, 一个文件里, 看晕了.
追加, Prettier 刚开心用了几天发现 Vue 用不了...