我期待 Vue 改进的一些地方 - 题叶反馈给尤小右

4,022 阅读2分钟
原文链接: segmentfault.com

贴点我的 ClojureScript 代码, 免得被人当成菜鸟... 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 主流的习惯,
看上去用法是很简单的,

    <el-dialog v-model="visible" title="Hello world">
      <p>欢迎使用 Element</p>
    </el-dialog>
      data: function() {
        return { visible: false }
      }

麻烦的地方在于随着 dialog 内容增多, 整个页面的组件化就不够清晰了,
React 里会习惯用组件把独立的部分尽快分离出去, 然后单独管理,
我在别人的代码当中遇到写了很多个复杂的 dialog, 一个文件里, 看晕了.


追加, Prettier 刚开心用了几天发现 Vue 用不了...