使用Vue.js注意事项

1. 前言

通过前面小节的学习,我们基本掌握了怎样用 uni-app 框架来开发并上线一个项目应用。知道了几乎所有的前端应用都可以用 uni-app 框架进行开发,并且只需要用一套代码就可以将项目部署到多个平台。

uni-app 我们之所以用的这么顺手,有很大一部分功劳是因为,uni-app 框架用的是 Vue.js 语法和微信小程序的 api。但是这样的组合也有一些限制。

由于各个平台的特性,有些 vue 语法在个别平台上面没有办法实现,下面我们会给大家详细讲讲各个平台使用 Vue.js 语法时需要注意哪些地方。

2. 生命周期

uni-app 框架除了支持 vue 组件生命周期之外,还新增了应用生命周期和页面生命周期。

这些生命周期函数对应的语法,我们在前面小节都给大家详细的介绍过了,其中比较难以区分的是「页面生命周期函数」和「组件生命周期函数」。

在日常项目开发过程中,这两者之间功能会有点重复,我们通常选择其中一个使用就可以了。但是要注意的是,应用生命周期函数仅在 page 页面有效,在单独封装的组件中无效。但是组件生命周期函数在 page 页面和单独封装的组件中都有效。

来用代码实例验证一下,在组件里面添加下面的生命周期函数,我是在 components/login/login.vue 文件里面添加的。
实例:

beforeCreate(){
	console.log('组件生命周期函数 beforeCreate:实例初始化');
},
onLoad() {
	console.log('页面生命周期函数 onLoad:页面初始化')
},
created(){
	console.log('组件生命周期函数 created:实例创建完成');
}

添加完成后,我们点击工具栏–运行–运行到内置浏览器,控制台中会打印下面的信息。

组件生命周期函数 beforeCreate:实例初始化
组件生命周期函数 created:实例创建完成

可以看到没有打印页面生命周期函数 onLoad。可以验证页面生命周期函数在单独封装的组件中无效。

这一点我们在开发过程中一定要注意,如果页面生命周期函数没有执行,先要检查一下是不是在单独封装的组件中运行的。

2.data 属性

data 属性里面定义的是页面的变量,在data里面定义的变量,我们应该怎样展示在页面上面呢?

是在 template 标签中,通过 {{ mark }} 来引用在data里面定义的变量。在 script 标签中,通过 this.mark 来引用在data里面定义的变量。

data 属性必须是一个函数,不然 vue 实例之间可能会相互影响,下面我们来看看正确的使用方法和错误的使用方法。
正确实例:

data () {
  return {
    mark: 0
  }
}

错误实例:

data: { 
  mark: 0
}

3. v-for 循环

在H5平台上面,使用 v-for 循环整数时与其他平台存在差异。

比如 v-for=“item in 5” 中,在 H5 平台上面 item 从 1 开始,其他平台 item 从 0 开始,下面我们来用代码验证一下。
实例:

<view v-for="item in 5">
  {{item}}
</view>

在H5平台打印结果:

1
2
3
4
5

在小程序平台打印结果:

0
1
2
3
4

这个差异我们在实际开发过程中一定要注意,不然会出现 H5 平台与其他平台显示不一样的情况。所以我们在开发过程中应该尽量避免使用 item in X 这样的语句,如果一定要用的话,我们在循环的时候可以再加上第二个参数 index,表示列表的索引,这样不管在什么平台上都是从0开始的。
实例:

<view v-for="(item,index) in 5">
  {{index}}
</view>

在所有平台打印结果:

0
1
2
3
4

4. 列表渲染 key

在实际开发过程中,列表渲染如果没有指定 key,会报一个 warning 警告。如果列表的静态的,里面的数据不会因为页面的情况的改变而改变,那么这个 warning 就可以忽略。

如果列表会随着页面情况的改变而改变,那必须要指定 key,不然会降低渲染效率。原理是:渲染层重新渲染的时候,会校正带有 key 的组件,提高列表渲染时的效率。

key 指定的数据必须是唯一的字符串或者是数字,且不能动态改变。
实例:

<view v-for="(item, index) in items" :key="index">
  {{item}}
</view>

如果item列表是唯一的,key 也可以直接指定 item 本身。
实例:

<view v-for="item in items" :key="item">
  {{item}}
</view>

5.小结

本小节主要介绍了在 uni-app 框架中,使用 Vue.js 的注意事项,包括生命周期、data属性、列表渲染等。需要掌握的重点如下:

  • 应用生命周期函数仅在 page 页面有效,组件生命周期函数在 page 页面和单独封装的组件中都有效;
  • data 属性必须是一个函数;
  • 在H5平台上面,使用 v-for 循环整数时与其他平台存在差异;
  • 动态列表渲染如果没有指定 key,会降低渲染效率。

还有一些命名限制、事件处理、语法支持在 uni-app 官方网站已经写的比较详细了,大家可以参考官网:Vue.js注意事项