Omi 入坑指南 Third field 事件入門

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

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 定義時候能夠這樣寫的html

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

複製代碼

先看這個例子前端

image.png

咱們發現 data 的數據 已經變動了 但是爲何 view 裏面的數據根本沒有修改呢??vue

結果我發現dntzhang做者的代碼裏面有observeobserve是vue數據管理的一種常見的東西bash

咱們須要補回去 observe 也是代碼就變成如下的狀態babel

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>
    )
  }
})

複製代碼

設置後 antd

image.png

咱們很清楚的看到 咱們以前的數據類型 已經被 praxy 管理起來了。app

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 版本的,感受不太可能

還有螞蟻金融 緣由在於他們處理的數據量太大了,數據模型過於複雜。應該是沒空搞一套vue的antd了

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

相關文章
相關標籤/搜索