Omi 入坑指南 Third field 事件入門
不知不覺又到了 第三場的學習了，這次的任務很簡單。就是了解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:"點選一下"
}
複製程式碼
先看這個例子
我們發現 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>
)
}
})
複製程式碼
設定後
我們很清楚的看到 我們之前的資料型別 已經被 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>
)
}
})
複製程式碼
可以看出store 很身就自帶observe。
其他話題
在 Omi 中 我們的定義方法是有點性格的，他不像React 那樣，需要 this.xxx.bing(this) 當然 React 也提供 babel 的 配置可以省去 bing 的寫法 作者發現如果你在omi 用 React 的寫法會出現個很好玩的事情,就是Omi 會幫你執行了函式
如果你改成這種寫法就會發現 this 不認爹了，在 vue 屬性裡面寫箭頭函式也一樣出現個問題
最後作者發現只能用 這樣的一種方法去定義函式
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 這一點是做的非常玩美。