不知不覺又到了 第三場的學習了,此次的任務很簡單。就是了解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:"點擊一下"
}
複製代碼
先看這個例子前端
咱們發現 data
的數據 已經變動了 但是爲何 view 裏面的數據根本沒有修改呢??vue
結果我發現dntzhang做者的代碼裏面有observe
,observe
是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
咱們很清楚的看到 咱們以前的數據類型 已經被 praxy
管理起來了。app
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 這一點是作的很是玩美。