我期待 Vue 改進的一些地方

題葉發表於2017-05-05
Vue

貼點我的 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 });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_Hello__ = __webpack_require__(25);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_Hello___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_Hello__);




/* harmony default export */ __webpack_exports__["default"] = ({
  name: `app`,
  data: function data() {
    return {
      nested: {
        a: {
          b: 2
        }
      }
    };
  },
  created: function created() {
    console.log(this.nested);
    this.x();
  },

  components: {
    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 用不了…

相關文章