Vue.js 语法在 uni-app 中的应用

Vue.js 作为一款流行的前端框架，在 uni-app 中得到了深度整合。uni-app 基于 Vue.js 的语法规范，扩展了多端开发能力，开发者可以沿用熟悉的 Vue 语法快速构建跨平台应用。下面从核心语法、组件、状态管理等方面展开说明。

Vue.js 基础语法在 uni-app 中的使用

uni-app 完全支持 Vue.js 的模板语法、指令和选项式 API。例如数据绑定和事件处理：

<template>
  <view>
    <!-- 数据绑定 -->
    <text>{{ message }}</text>
    <!-- 事件处理 -->
    <button @click="changeMessage">点击修改</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app!'
    }
  },
  methods: {
    changeMessage() {
      this.message = '内容已更新'
    }
  }
}
</script>

计算属性和侦听器的用法与 Vue.js 完全一致：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
},
watch: {
  message(newVal) {
    console.log('消息变化:', newVal)
  }
}

组件系统的实现方式

uni-app 支持 Vue 的单文件组件（SFC）规范，同时扩展了原生组件库：

<!-- 自定义组件示例 -->
<template>
  <view>
    <my-component :title="propData"></my-component>
  </view>
</template>

<script>
import MyComponent from '@/components/my-component.vue'

export default {
  components: { MyComponent },
  data() {
    return {
      propData: '组件通信数据'
    }
  }
}
</script>

特有的 easycom 组件规范可以自动引入组件：

// pages.json 配置
{
  "easycom": {
    "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
  }
}

生命周期适配多端环境

uni-app 在 Vue 生命周期基础上增加了应用生命周期和页面生命周期：

export default {
  // Vue 生命周期
  created() {
    console.log('组件实例创建完成')
  },
  // 页面生命周期
  onLoad(options) {
    console.log('页面加载', options)
  },
  onShow() {
    console.log('页面显示')
  }
}

特有的应用级生命周期需要在 App.vue 中使用：

export default {
  onLaunch() {
    console.log('应用初始化')
  },
  onError(err) {
    console.error('应用错误', err)
  }
}

状态管理的特殊处理

Vuex 在 uni-app 中的使用需要关注持久化问题：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    setToken(state, payload) {
      state.token = payload
      // 配合本地存储
      uni.setStorageSync('token', payload)
    }
  }
})

对于简单场景，可以使用 reactive API：

import { reactive } from 'vue'

export const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

样式处理的注意事项

uni-app 的样式编写支持大部分 CSS 特性，但需要注意：

1. 使用 rpx 作为响应式单位
2. 部分选择器受限（如 * 选择器）
3. 支持样式导入语法

/* 样式导入 */
@import url('/common/uni.css');

/* 使用 rpx */
.container {
  width: 750rpx; /* 在750设计稿中等于100%宽度 */
  font-size: 32rpx;
}

条件编译的实现方法

通过特殊注释实现多端条件编译：

<!-- #ifdef H5 -->
<view>仅H5平台显示</view>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<view>仅微信小程序显示</view>
<!-- #endif -->

JS 中的条件编译：

// #ifdef APP-PLUS
const platform = 'APP'
// #endif

路由系统的差异处理

uni-app 的路由系统与 Vue Router 不同：

// 跳转页面
uni.navigateTo({
  url: '/pages/detail?id=123'
})

// 获取参数
export default {
  onLoad(query) {
    console.log('页面参数', query.id)
  }
}

路由配置在 pages.json 中定义：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}

第三方库的兼容方案

引入 Vue 生态库时需要检查多端兼容性：

// 手动处理不兼容的库
import Taro from '@tarojs/taro'
// #ifdef H5
import Swiper from 'swiper'
// #endif

推荐使用 uni-app 插件市场的封装库：

import uCharts from '@/components/u-charts/u-charts.min.js'

性能优化策略

针对多端环境的特殊优化手段：

1. 图片资源压缩
2. 避免过度使用 v-if
3. 合理使用虚拟列表

<template>
  <view>
    <!-- 长列表优化 -->
    <uv-list :data="bigData" height="500"></uv-list>
    
    <!-- 图片懒加载 -->
    <image lazy-load src="https://example.com/image.jpg"></image>
  </view>
</template>

平台特性扩展方法

通过 uni API 调用原生功能：

// 调用相机
uni.chooseImage({
  count: 1,
  success(res) {
    console.log('图片路径', res.tempFilePaths)
  }
})

// 获取系统信息
uni.getSystemInfo({
  success(res) {
    console.log('屏幕宽度', res.screenWidth)
  }
})

TypeScript 支持配置

在 uni-app 中启用 TypeScript：

1. 修改 manifest.json 添加编译器配置
2. 创建 tsconfig.json
3. 使用组合式 API 写法示例：

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    
    return {
      count,
      increment
    }
  }
})
</script>

多端调试技巧

不同平台的调试方式：

// 环境判断
// #ifdef H5
console.log('运行在H5环境')
// 使用浏览器开发者工具
// #endif

// #ifdef MP-WEIXIN
console.log('运行在微信小程序')
// 使用微信开发者工具
// #endif

常见问题解决方案

1. 样式穿透问题：

/* 使用/deep/或::v-deep */
.parent /deep/ .child {
  color: red;
}

2. 静态资源路径处理：

// 正确引用方式
const imgSrc = require('@/static/logo.png')

3. 表单组件差异：

<template>
  <view>
    <!-- 使用uni表单组件 -->
    <uni-forms :modelValue="formData">
      <uni-forms-item label="用户名">
        <uni-easyinput v-model="formData.username" />
      </uni-forms-item>
    </uni-forms>
  </view>
</template>