使用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平台打印结果：

在小程序平台打印结果：

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

实例：

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

在所有平台打印结果：

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注意事项。

使用Vue.js注意事项

1. 前言​

2. 生命周期​

2.data 属性​

3. v-for 循环​

4. 列表渲染 key​