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 这一点是做的非常玩美.

来源: https://juejin.im/post/5bff75b86fb9a049ff4dd599