不知不觉又到了 第三场的学习了，这次的任务很简单。就是了解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开发。
还有一点，前端得学起来，别只停留在Vue。我举个简单的例子
var model = {} ; model.submodule = {model:model} 这样的结构在处理复杂数据的时候常见 可以考虑一下 vue里怎么用它 ,或许以后的 Vue 3.0 上使用Typescript可以很简单的实现。那班 70% 会不会学呢？还是说还会选择一个很容易过渡的框架。 Vue 这一点是做的非常玩美。
网友评论