一、使用Vue.js注意事项
- Vue.js在uni-app中使用的差异:
- 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动、页面显示等生命周期
- 受限:发布到H5时支持所有vue的语法, 在小程序和App端部分功能受限
- 生命周期:Vue实例生命周期+应用生命周期+页面生命周期
- 使用uni-app的onReady : 代替vue的mounted
- 使用uni-app的onLoad : 代替vue的created
- 注意:不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.a 或 this.myMethod 也会是未定义的
- 模板语法:uni-app完整支持Vue模板语法
- data属性: 必须声明为函数,返回一个初始数据对象【否则:页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据】
data() { //使用函数返回对象 return { title: 'Hello' } }
- 全局变量:实现全局变量的方式——遵循Vue单文件模式的开发规范http://ask.dcloud.net.cn/article/35021
- 公用模块缺点:
// 在 uni-app 项目根目录下创建 common 目录, // 然后在 common 目录下新建 helper.js 用于定义公用的方法。 export default { …… } // 在 pages/index/index.vue 中引用该模块 import helper from '../../common/helper.js';
- 挂载Vue.prototype:将一些使用频率较高的常量或者方法,直接扩展到 Vue.prototype 上,每个 Vue 对象都会“继承”下来。
// 在main.js中挂载属性/方法 Vue.prototype.now = Date.now || function () { return new Date().getTime(); }; // 在 pages/index/index.vue 中调用 export default { data() { return {}; }, onLoad(){ console.log('now:' + this.now()); }, }
注意: 每个页面中不要在出现重复的属性或方法名。在 Vue.prototype 上挂载的属性或方法,可以加一个统一的前缀。比如 $url、global_url 这样
-
globalData:不是标准Vue语法,是兼容小程序的方式。小程序中可以在App上声明全局变量。uni-app中在App.vue可以定义在globalData属性上,也可以使用API读写这个值。
// 定义App.vue <script> export default { globalData: { text: 'text' //全局变量 }, onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App