使用Vue.js注意要点

发布时间：2023-04-25 08:39:58 所属栏目：教程来源：

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

由于各个平台的特性，有些 vue 语法在个别平台上面没有办法实现，下

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

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

生命周期

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

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

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

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

beforeCreate(){
   console.log('组件生命周期函数 beforeCreate：实例初始化');
},
onLoad() {
   console.log('页面生命周期函数 onLoad：页面初始化')
},
created(){
   console.log('组件生命周期函数 created：实例创建完成');
}
添加完成后，我们点击工具栏–运行–运行到内置浏览器，控制台中会打印下面的信息。

组件生命周期函数 beforeCreate：实例初始化
组件生命周期函数 created：实例创建完成
可以看到没有打印页面生命周期函数 onLoad。可以验证页面生命周期函数在单独封装的组件中无效。

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

data 属性

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

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

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

data () {
return {
mark:
}
}
错误实例：

data: {
mark:
}

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

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

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

在小程序平台打印结果：

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

<view v-for="(item,index) in 5">
{{index}}
</view>
在所有平台打印结果：

列表渲染 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>

小结

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

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!