Omi 入坑指南 Third field 事件入門

傻夢獸發表於2018-11-29
事件

不知不覺又到了 第三場的學習了，這次的任務很簡單。就是了解html裡常用事件在Omi中是如何實現。 今天主要講坑中坑 需要注意的寫法

import { define, WeElement } from 'omi'
import style from './_index.css'

define('app-intro', class extends WeElement {

  static observe = true;

  static get data() {
    return {
      name: "點選一下"
    }
  }

  // data = {
  //   name:"點選一下"
  // }


  css() {
    return style;
  }

  handleClick = () => {
    this.data.name = 'Google';
  }

  render(props, data) {
    console.log(data);
    return (
      <p class="app-intro" onClick={this.handleClick}>
        {data.name}
      </p>
    )
  }
})

複製程式碼

我昨晚發現 data 定義時候可以這樣寫的

  data = {
    name:"點選一下"
  }

複製程式碼

先看這個例子

image.png

我們發現 data 的資料 已經變更了 可是為什麼 view 裡面的資料根本沒有修改呢？？

結果我發現dntzhang作者的程式碼裡面有observe，observe是vue資料管理的一種常見的東西

我們需要補回去 observe 也是程式碼就變成以下的狀態

import { define, WeElement } from 'omi'
import style from './_index.css'

define('app-intro', class extends WeElement {

  static observe = true;

  static get data() {
    return {
      name: "點選一下"
    }
  }

  // data = {
  //   name:"點選一下"
  // }


  css() {
    return style;
  }

  handleClick = () => {
    console.log(this.data)
    this.data.name = 'Google';
  }

  render(props, data) {
    console.log(data);
    return (
      <p class="app-intro" onClick={this.handleClick}>
        {data.name}
      </p>
    )
  }
})

複製程式碼

設定後

image.png

我們很清楚的看到 我們之前的資料型別 已經被 praxy 管理起來了。

Store 事件中處理 需要 observe 嗎？

import { define, WeElement } from 'omi'
import style from './_index.css'

define('app-intro', class extends WeElement {

  //static observe = true;

  static get data() {
    return {
      name: "點選一下"
    }
  }


  css() {
    return style;
  }

  handleClick = () => {
    this.store.rename('*雷')
    //this.data.name = 'Google';
  }

  render(props, data, store) {
    console.log('This app-intro ', store)
    return (
      <p class="app-intro" onClick={this.handleClick}>
        {store.data.name}
      </p>
    )
  }
})

複製程式碼

image.png

可以看出store 很身就自帶observe。

其他話題

在 Omi 中 我們的定義方法是有點性格的，他不像React 那樣，需要this.xxx.bing(this) 當然 React 也提供 babel 的 配置可以省去 bing的寫法 作者發現如果你在omi 用 React 的寫法會出現個很好玩的事情,就是Omi 會幫你執行了函式

image.png

如果你改成這種寫法就會發現 this 不認爹了，在vue屬性裡面寫箭頭函式也一樣出現個問題

image.png

最後作者發現只能用 這樣的一種方法去定義函式

handleFunction = () => {
}
複製程式碼

如果你想使用傳參的方式，請不要直接,原因再上面已經講過

onClick={this.handleFuntion(xxx)}
複製程式碼

而是要

onClick={(xx)=>{this.handleFuntion(xxxx)}}
複製程式碼

結語：

從事件這次使用來說，如果你想你的編碼水平有所提高，但又不想了解React各種生命週期的複雜，和各種State 狀態處理的時候，Omi 在 Vue 和 React 之間中做選擇是非常不過。 還有一點就是要注意 omi 目前在國內市場來說 還適應 手機端開發，比較相容的版本太高了。除非你不做IE開發。還有就是 ui 元件太少。 不過 React 和 Ng 都有 Antd 這個高質量的元件存在，所以React 在國內還算可以。而 Vue ui 太多，可是質量來說，我是真的覺得不行。除非阿里antd團隊出 vue 版本的，感覺不太可能

Omi 入坑指南 Third field 事件入門

還有螞蟻金融 原因在於他們處理的資料量太大了，資料模型過於複雜。應該是沒空搞一套vue的antd了

還有一點，前端得學起來，別隻停留在Vue。我舉個簡單的例子 var model = {} ; model.submodule = {model:model} 這樣的結構在處理複雜資料的時候常見 可以考慮一下 vue裡怎麼用它 ,或許以後的 Vue 3.0 上使用Typescript可以很簡單的實現。那班 70% 會不會學呢？還是說還會選擇一個很容易過渡的框架。 Vue 這一點是做的非常玩美。

相關文章