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 这一点是作的很是玩美。