使用Vue.js注意事项
Uni-app项目发布在H5平台上时支持所有的Vue语法，发布到App和小程序时，由于平台限制，无法支持所有的vue语法，但是，uniapp仍旧是对vue语法支持度最高的跨端框架。
Uniapp与Web平台相比，Vue.js在uni-app中使用的差异主要集中在两个方面：
（1）uni-app新增加了一些生命周期，除了支持Vue实例的生命周期，还支持应用启动、页面显示等生命周期。
（2）由于平台限制，相对比web平台，在小程序和APP端部分功能受到了限制。
1.data属性
Data必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
2.全局变量
Uni-app全局变量的几种实现方式：
(1)定义公用模块
定义一个专用的模块，用来组织和管理全局变量，在需要用到全局变量的页面引入这个公用模块。
例如：第一步：在uni-app项目根目录下创建common目录，然后在common目录下新建base.js用于定义公用的方法。
const weburl = 'http://www.w3cschool.cn '; const now = Date.now || function () { return new Date().getTime(); }; const isArray = Array.isArray || function (obj) { return obj instanceof Array; }; export default { webUrl, now, isArray }
第二步：在pages/index/index.vue中引用定义的公用模块。
<script> import base from '../../common/base.js'; export default { data() { return {}; }, onLoad(){ console.log('now:' + base.now()); }, methods: { } } </script>
以上这种定义公用模块的方式维护时比较的方便，缺点是每次都要引入。
(2)挂载Vue.prototype
将一些使用频率较高的常量或者方法，直接扩展到Vue.prototype上，每个Vue对象都会继承下来。
例如：第一步：在main.js中挂载属性或方法
const weburl = 'http://www.w3cschool.cn '; const now = Date.now || function () { return new Date().getTime(); }; const isArray = Array.isArray || function (obj) { return obj instanceof Array; };
第二步：在pages/index/index.vue中调用
<script> export default { data() { return {}; }, onLoad(){ console.log('now:' + this.now()); }, methods: { } } </script>
挂载这种方式，只需要在main.js中定义好，就可以在每个页面中直接调用了。
使用挂载方式还需要注意以下几点：
1> 每一个页面中不要出现重复的属性或者方法名。
2> 建议在Vue。Prototype上挂载的属性或者方法，可以加上一个统一的前缀。例如$now、global_now，这样的话在阅读代码时也容易与当前页面的内容区分开。
(3)Vuex
Vuex它是一种状态管理模式，更确切的说它是专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这里用登录后同步更新用户信息举例，简单说明Vuex的用法。
第一步：在uni-app项目根目录下新建test目录，在test目录下创建index.js定义状态值
const store = new Vuex.Store({ state: { login: false, token: '', avatarUrl: '', userName: '' }, mutations: { login(state, provider) { console.log(state) console.log(provider) state.login = true; state.token = provider.token; state.userName = provider.userName; state.avatarUrl = provider.avatarUrl; }, logout(state) { state.login = false; state.token = ''; state.userName = ''; state.avatarUrl = ''; } } })
第二步：需要在main.js挂载Vuex
import store from './store'
Vue.prototype.$store = store
第三步：在pages/index/index.vue中使用
<script> import { mapState, mapMutations } from 'vuex'; export default { computed: { ...mapState(['avatarUrl', 'login', 'userName']) }, methods: { ...mapMutations(['logout']) } } </script>
上面实例的操作步骤：未登录时，提示去登录。跳转至登录页面后，点击登录，获取用户信息，同步更新状态后，返回到个人中心即可看到信息同步的结果。
注意：对比前面的几种方式，该方式更加适合处理全局的并且值会发生变化的情况。
(4)globalData
小程序中可以在APP上声明全局变量，但是在Vue中不可以，uni-app中在APP.vue可以定义在globalData属性上，也可以使用API读写这个值。
globalData方式支持vue和nvue共享数据，是目前nvue和vue共享数据的一种较好的方式。
第一步：定义APP.vue
<script> export default { globalData: { text: 'text' }, onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } } </script>
js操作globalData的方式如下：
赋值：
getApp().globalData.text = 'test'
取值：
console.log(getApp().globalData.text)
如果需要把globalData的数据绑定到页面上，可在页面的onshow声明周期里进行变量重赋值。HBuilderX 2.0.3起，nvue页面在uni-app编译模式下，也支持onshow。
总结
1、.vue 和 .nvue 并不是一个规范，因此一些在 .vue 中适用的方案并不适用于 .nvue。
2、Vue 上挂载属性，不能在 .nvue 中使用。
3、.nvue 不支持 vuex
4、如果希望 .vue 和 .nvue 复用一些方法的话，需要采用公用模块的方案，分别在 .vue 和 .nvue 文件中引入。