data 属性
data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。1
2
3
4
5
6
7
8
9
10
11//正确用法，使用函数返回对象
data() {
return {
title: 'Hello'
}
}
//错误写法，会导致再次打开页面时，显示上次数据
data: {
title: 'Hello'
}
computed 属性
这是 vue 的计算属性。computed 和 method 其实都可以完成相同的任务。区别在于， computed 会把计算结果放在缓存里，调用compute时只有当依赖变化时才会重新计算，否则直接读取缓存；而 method 每一次调用都会重新计算，不管依赖有没有变。
computed 属性和 watch 属性可以看场合使用。
全局变量
共用模块
在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 **.js 用于定义公用的方法。然后在需要的文件中如 pages/index/index.vue 中引用该模块import **** from '../../common/******.js'
globalData
与小程序相似，直接读写 App 对象上的 globalData 属性1
2getApp().globalData.test = 'test'
console.log(getApp().globalData.test)
挂载 Vue.prototype
在 main.js 中直接挂载属性/方法到 Vue.prototype 上，其他页面使用时世界用 this.** 即可引用
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
列表渲染
1 | **嵌套列表渲染，必须指定不同的索引**！需要填写 :key="xx"。且嵌套时，item，index不能相同 |
事件处理器
1 | // 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件 |
表单输入绑定
使用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定
v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
修饰符
.lazy
lazy 修饰符，把input事件转变为使用 change 事件进行同步1
2<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
可自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符1
<input v-model.number="age" type="number">
.trim
自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符1
<input v-model.trim="msg">
全局组件
uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。
注意：Vue.component 的第一个参数必须是静态的字符串。1
2
3
4
5
6
7
8
9
10
11
12
13
14示例
main.js 里进行全局注册
import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)
index.vue 里可直接使用组件
<template>
<view>
<page-head></page-head>
</view>
</template>
如何设置全局的数据和全局的方法
uni-app 内置了 vuex ，在app里的使用，可参考hello-uniapp store/index.js。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {...},
mutations: {...},
actions: {...}
})
export default store
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
store,...
})
...
//test.vue 使用时：
import {mapState, mapMutations} from 'vuex'
性能优化
uni-app 在 App 端或小程序端运行时，从架构上分为逻辑层和视图层两个部分。逻辑层负责储存数据和执行业务逻辑，视图层负责页面渲染。
目前，视图层以 WebView 作为渲染载体进行渲染，以 evaluateJavascript 的方式在视图层和逻辑层进行数据通讯，evaluateJavascript 通讯是异步操作，所以数据到达视图层不是实时的。
数据通讯时，框架会将要传递的数据转换为字符串进行传递，然后将字符串接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到逻辑层和视图层，此操作意味着数据的大小会影响性能。
优化建议
优化数据更新
在 uni-app 中，定义在 data 里面的数据每次变化时都会通知视图层重新渲染页面。 所以如果不是视图所需要的变量，可以不定义在 data 中，可在外部定义变量或直接挂载在vue实例上，以避免造成资源浪费。减少一次性渲染的节点数量
页面初始化时，逻辑层如果一次性向视图层传递很大的数据，使视图层一次性渲染大量节点，可能造成通讯变慢、页面切换卡顿，所以建议以局部更新页面的方式渲染页面。如：服务端返回100条数据，可进行分批加载，一次加载20条，500ms 后进行下一次加载。减少节点嵌套层级
深层嵌套的节点在页面初始化构建时往往需要更多的内存占用，并且在遍历节点时也会更慢些，所以建议减少深层的节点嵌套。避免视图层和逻辑层频繁进行通讯
减少 onPageScroll 的使用，onPageScroll 进行监听时，视图层会频繁的向逻辑层发送数据；
减少 scroll-view 组件的 scroll 事件监听，当监听 scroll-view 的滚动事件时，视图层会频繁的向逻辑层发送数据；
监听 scroll-view 组件的滚动事件时，不要实时的改变 scroll-top/scroll-left 属性，因为监听滚动时，视图层向逻辑层通讯，改变 scroll-top/scroll-left 时，逻辑层又向视图层通讯，这样就可能造成通讯卡顿。避免使用大图
页面中若大量使用大图资源，会造成页面切换的卡顿，导致系统内存升高。优化页面切换动画
页面初始化时若存在大量图片渲染和大量数据通讯，很有可能造成页面切换卡顿、掉帧。建议延时100ms~300ms渲染图片，分批进行数据通讯，以减少一次性渲染的节点数量。优化样式渲染速度
将样式写在 App.vue 里，可以加速页面样式渲染速度。App.vue 里面的样式是全局样式，每次新开页面会优先加载 App.vue 里面的样式，然后加载普通 vue 页面的样式。使用 nvue 代替 vue
数据绑定
在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，故如下写法不支持：<view id="item-"></view>
需修改为：<view v-bind:id="'item-' + id "></view>
代码块
Tag代码块
uButton
uCheckbox
uGrid
uList
uListMedia
uRadio
uSwiper
JS代码块
uRequest
uGetLocation
uShowToast
uShowLoading
uHideLoading
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay
路径
bmob.js 中var _ = require('underscore.js');
改为var _ = require('./underscore.js');
因为 ./ 才代表当前路径
