详解Vue Native

译者按： 一家叫 GeekyAnts 的印度公司开发了 Vue Native，基于 React Native 实现。

本文采用意译，版权归原作者所有

尽管整个 JavaScript 社区对 Vue 的情感是比较微妙的(不懂为啥)，但也不能阻止我尝试用 Vue Native 来开发移动 App。

Hello World

这是一个很简单的例子，仅仅将“Hello World”在页面上展示出来。

动机

作为一个前端开发，我很喜欢 HTML 的简洁。直接编写代码，辅以 CSS 来定制样式。Vue 的.vue 文件提供了类似的体验。

Vue 有丰富的功能：支持模板化、样式定义、基于 Vuex 的状态管理和路由。这使得它不失为一个完美的选择。

使用 Vue Native，我们在开发中也有着类似的体验。

初次尝试

在网上简单的搜索，就可以发现 SmallComfort 开发的react-vue项目。react-vue将 Vue 文件翻译到 React 和 React Native 组件。感谢 react-vue 的作者解决了很多问题。 Vue Native 是同样的。

Vue Native 编译到 React Native

Vue Native 依赖 React Native。当你使用vue-native-cli初始化一个新的 app，入口文件是App.vue。

就像.js文件一样，你可以用很多.vue文件来组合一个.vue文件。实际上，所有的.vue 文件到翻译到以.js 后缀的 React Native 组件。如果想了解更多，请参考此处。

双向绑定的例子

Vue Native 同样支持使用v-model来做数据双向绑定。

<template>
    <text-input v-model="”name”" />
</template>
<script>
    export default {
        data: function() {
            return {
                name: "John Doe"
            };
        }
    };
</script>

循环

你可以使用v-for指令来写循环，和 JavaScript 的 map 类似。

<template>
    <view>
        <text v-for="”name" in names” v-bind:key="name">{{name}}</text>
    </view>
</template>
<script>
    export default {
     data: function() {
       return {
         names: [“Gaurav”, “Neeraj”, “Sanket”, “Neeraj”]
       };
     }
    };
</script>

App 示例

KitchenSink 应用

我们使用 Vue Native 重写了 KitchenSink 应用，你可以去这里下载源码：GeekyAnts/KitchenSink-Vue-Native。

Todo 应用

我们 GeekyAnts 的高级软件工程师Ankit Singhania使用 Vue Native 写了一个简单的ToDo 应用。

如何开始

为了使用 Vue Native，你首先需要安装 React Native。根据这里的步骤来安装。

下一步，使用 npm 安装 Vue Native CLI。

npm install -g vue-native-cli

之后，你就可以初始化一个 Vue-Native 项目了：

vue-native init <projectName>
cd <projectName>

你可以直接使用npm run来在 IOS/Andriod 模拟器上运行这个 Vue Native 应用了。

指令

在 Vue 中，指令是可以说是一种特殊的属性，他们都以v-作为前缀。下面是几个常用的指令。

v-if 和 v-else

v-if和v-else用来编写条件语句。

<template>
    <view class="container">
        <view class="btn-container">
            <button title="show A" :on-press="() => handleBtnClick('A')" />
            <button title="show B" :on-press="() => handleBtnClick('B')" />
            <button title="show C" :on-press="() => handleBtnClick('C')" />
        </view>
        <view>
            <text v-if="type === 'A'">
                A
            </text>
            <text v-else-if="type === 'B'">
                B
            </text>
            <text v-else-if="type === 'C'">
                C
            </text>
            <text v-else>
                Not A/B/C
            </text>
        </view>
    </view>
</template>

执行结果如下：

v-for

v-for类似于 JavaScript 的 map。

<template>
 <view class="container">
   <text
       class="text-container"
       v-for="todo in todos"
       :key="todo.text"
   >
     {{ todo.text }}
   </text>
 </view>
</template>
<script>
export default {
 data: function() {
   return {
     todos: [
       { text: "Learn JavaScript" },
       { text: "Learn Vue" },
       { text: "Build something awesome" }
     ]
   };
 }
};
</script>

执行结果如下：

v-model

v-model指令用来创建一个双向绑定的元素，可以基于一个 input 元素或则一个组件。它内部是将 value 和 onChangeText 绑定到 React Native 的 TextInput。

<template>
    <view class="container">
        <text-input
            class="text-input-container"
            placeholder="Type here"
            v-model="textContent"
        />
        <text class="text-container">
            {{textContent}}
        </text>
    </view>
</template>
<script>
    export default {
        data: function() {
            return {
                textContent: ""
            };
        }
    };
</script>

上面的代码对textContent做了双向绑定，如果在 text-input 输入内容，它会被存储到textContent中，然后会直接显示到text-input的下方。

执行结果如下：

Vue Native 路由

Vue Native 使用vue-router来实现导航逻辑。我们来看看下面的实现：

使用 Vuex 做状态管理

你可以使用 Vuex 来管理状态，详情查看：Vuex。

局限性和已知问题

  • 有时候对于一个组件，你需要创建一个返回 JSX 代码的函数；比如在 FlatList 中的 renderItem 函数就必须返回 JSX。
  • 报错是在 React Native 层面的，并没有映射到 Vue Native 代码。我们正在优化这个问题。

可以用在生产环境吗？

我们已经使用 Vue Native 将整个 KitchenSink 重写，你可以在生产环境使用它。不过你要记得它有局限性。

Vue-Native 是完全开源的，可以在 Github 找到源代码：vue-native-core。

关于Fundebug

Fundebug专注于JavaScript、微信小程序、支付宝小程序线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了80亿+错误事件。欢迎大家免费试用！

版权声明

转载时请注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2018/07/23/vue-native/

您的用户遇到BUG了吗？

体验Demo 免费使用