ODOO OWL Framework介紹

　　2020年10月，odoo14版本發布了，隨之正式帶來了OWL這一全新框架，它具備hooks鈎子，交互反應狀態與並行模式等特征。

　　OWL英文全稱是Odoo Web Library，整個框架很小（~<20kbgzip），旨在作為odoo web的UI基礎。Owl 是現代化的web框架，主要用Typescript, 吸取了React、Vue等t框架的優秀理念，主要具備如下主要特性：

　　聲明性組件系統，

　　基於hooks鈎子的反應系統，

　　並發模式，

　　前端路由；

　　Owl 的components使用ES6定義, 使用QWeb模板, 基於virtual DOM, 與hooks很好的集成, 以異步方式呈現。很明顯，ODOO的卓越發展，使得官方為了在web方面擁抱先進，不惜自己重新打造一個適合odoo的全新框架。對於廣大的odoo開發者來說，要深入odoo，就必須擁抱OWL框架。

　　來看下owl的例子代碼：

const { Component, useState, mount } = owl;
const { xml } = owl.tags;

class Counter extends Component {
  static template = xml`
    <button t-on-click="state.value++">
      Click Me! [<t t-esc="state.value"/>]
    </button>`;

  state = useState({ value: 0 });
}

class App extends Component {
  static template = xml`
    <div>
      <span>Hello Owl</span>
      <Counter />
    </div>`;

  static components = { Counter };
}

mount(App, { target: document.body });

　　上面代碼中，可以看到counter組件使用useState hook進行反饋。同時代碼通過xml helper定義了格內聯模板。當然，大多數情況下，我們可以將模板單獨定義。

　　更多owl方面的內容，可以點擊 OWL官方技術站點  訪問了解。