贴点我的 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 主流的习惯,
看上去用法是很简单的,

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

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


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

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的文章

25 条评论
Hope_FE · 5月5日

这也难怪了,我写react调试的时候 redux都是log store 从来不用redux chrome tools

回复

曾广营 · 5月5日

1.查看 this.data.x 数据 。这个一般vue开发者是用vue-devtool来查看 组件的数据项的。非常易用
2.报错定位 。这个应该是您webpack相关的问题,目前我们开发模式下的报错是可以定位到对应行的,但是有时候会有几行的误差
3.4.不清楚,就不强答了

回复

0

所以你们都是用 vue-devtool 的...
报错对应到行按照尤小右说的更改 webpack 配置就好了, 但是断点被 catch 掉挺烦的.

题叶 作者 · 5月5日
0

@题叶 4的话。。。虽然很久没碰vue了,但是依稀记得,可以使用<component>这货来动态改变dialog的内容,然后把这些内容同样也可以独立分离出去,不知道老师您是否指这个意思。。。

挺问中原 · 5月9日
逍遥派M · 5月5日

个人感觉,不能一味的让某一个新框架朝着自己熟悉的框架去改变,如果语法、写法都和react一样了,那还要vue干啥

回复

1

挺难说, Vue 1 改 Vue 2 就往 React 靠近了一大步, 连 JSX 都来了. 并不是变不变的问题, 目标还是开发效率, 只是说瞄准的是哪一个人群的开发效率.

题叶 作者 · 5月5日
0

@题叶 很难说?vue 提供 JSX 应该只是做一个备用,有一波人是很讨厌把 html 写进 js 的. 我之前看过vue 一个关于 scoped css 的 issue,讨论了很多,有些人同样不喜欢把 css 也写进 js,vue 并没有一味的去向 react 靠近,还有另一个关于 css modules 的 pr,讨论中都能看出,尤小右对 api 的设计是吹毛求疵的. 竞品之间相互参考学习肯定是存在的,但如果没有自己的特色能有这么快速的发展?单说这个回复,看不懂这个 '挺难说' 的含义.

donotlb · 5月6日
0

@donotlb 你前面的观点比较含糊, 不认同你轻易给结论而已.

题叶 作者 · 5月7日
yuche · 5月6日

Vue 最大的问题还是她的社区对测试几乎不关心,基本没有什么可用的 Test Utilities,各测试框架也没什么支持。
如 tiye 说的最后一条,像 Element 这类 UI 库的 API 的设计又容易导致一不小心就把 .vue file 写到几百行代码,一个稍大型的项目可能就会有很多个这样的 .vue file。在这种情况下写测试很可能要花掉写 vue file 几倍多的时间和精力,在这种情况下想要做维护真的太难了。

回复

0

同等规模下,用 react 就一定能避免你所说的这些测试/维护问题吗?到底是工具的问题还是使用者自身的问题?

donotlb · 5月6日
0

@donotlb 你只要Google (或者 GitHub/ StackOverflow)搜索一下 Vue test 和 React test,然后用各自的工具/文章写一点就知道了。

yuche · 5月6日
0

@yuche mocha 和 ava 用过,但说实话前端ui相关的测试了解过但没写过,一般只测试比较绕的逻辑代码,就这方面而言,vue 代码测试起来很简单. 界面相关的测试本身就很复杂,有些人甚至不建议做界面的自动化测试(徐飞这方面的文章有讲过).

另外,随着项目规模变得越来越庞大,这对使用任何技术的任何团队来说,面临的考验也会越来越大,这种情况下,直接把锅甩给技术框架(vue),我觉得不妥

donotlb · 5月6日
汪磊 · 5月6日

呵呵

回复

jiayisheji · 5月6日

少年用ng4把

回复

lycaste · 5月8日

这特么都能阴阳怪气的 撕逼react和vue吗

回复

0

上下文要看微博上的讨论

题叶 作者 · 5月8日
mars_man · 5月9日

额,我也碰到 ‘use strict’; eval(....) 这个错误了。感觉很奇怪呀,webpack怎么会生成这么明显的错误?

回复

0

eval 是 Webpack 配置生成的, 算不上错误, 可能有点偷懒吧

题叶 作者 · 5月9日
0

哦,,,了解了,谢谢!!

mars_man · 5月9日
挺问中原 · 5月9日

我倒是被迫从vue转到react,说句实话,我就是评论区中所指的“不喜欢把html写进js”里的人,react很强大,但是我还是不能接受写到最后一个jsx里面到处都是{xxx?renderA():renderB()}虽然很方便,但是感觉xml和编程语言本来就是两种东西,强行糅合在一起,还是有点不舒服。现在基本上要么jsx里面全是<template>,要么全是{}。。。

回复

0

我也讨厌 JSX 的语法, 但是去掉语法糖看的话, 实际上 JSX 对应的是普普通通的 js 对象, 我还是比较认可的 https://facebook.github.io/re... 那样的话就是整个都是编程语言了.

题叶 作者 · 5月9日
李洪威 · 6月21日

请教下我ie浏览器才你上面提到的报错:"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__);nnnnn/ harmony default export / __webpack_exports__["default"] = ({n name: 'app',n data: function data() {n return {n nested: {n a: {n b: 2n }n }n };n },n created: function created() {n console.log(this.nested);n this.x();n },nn components: {n Hell....
这个你是怎么解决的啊,ie下打开页面空白了

回复

0

你应该直接创建问题问 https://segmentfault.com/ask

题叶 作者 · 6月21日
0

好的

李洪威 · 6月21日
载入中...
题叶 题叶

15.4k 声望

发布于专栏

题叶

ClojureScript 爱好者.

400 人关注