uni-app 运行原理

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

导读：uni-app 项目的视图层和逻辑层是分离开的，虽然我们在开发项目过程中，将 html、js 代码都写在同一个文件中，但是实际运行的时候是分离开的。

视图层负责进行页面渲染，也就是用户能看到的页面，用来展示数据的，

uni-app 项目的视图层和逻辑层是分离开的，虽然我们在开发项目过程中，将 html、js 代码都写在同一个文件中，但是实际运行的时候是分离开的。

视图层负责进行页面渲染，也就是用户能看到的页面，用来展示数据的，包括页面结构代码 <template> 部分、页面样式代码 <style> 部分。

逻辑层负责执行后端的业务逻辑，用户看不到这部分的逻辑，用来处理数据的，包括页面逻辑代码 <script> 部分，以及其他 .js 文件。

视图层和逻辑层分离，减少了项目的耦合程度，并且逻辑层的运算不会影响到视图层的渲染，窗体动画会比较稳。而两层分离也有一个缺点，就是这两层互相通信会有损耗。

我们下面进行的性能优化，都是基于uni-app 运行原理来操作的，下面来具体看一下。

性能优化建议

长列表优化
我们开发项目时，我们经常会循环长列表，将长列表中的数据逐一展示在项目中，但是你开发过程中，有没有出现过一旦数据过多项目加载会变得很慢的问题呢？

长列表的应用有许多需要我们注意的地方，或许你在开发过程中没有注意下面几个问题造成长列表加载过慢，我们来具体看看。

长列表差量数据更新
如果你长列表的数据中，每个列表都有可能差量更新，则需要将长列表中的每个 item 都做成一个组件。不然其中每个 item 更新，都会造成整个长列表的重新加载，严重良妃系统资源，我们来举个例子。

比如我们加载博文的100条评论，每条评论都有一个点赞功能。
如果每条评论没有做成单独的组件，用户每次给其中一条评论点赞一次，系统都会重新加载这100条评论。

如果每条评论都做成了单独的组件，用户给其中一条评论点赞，系统只会重新加载点赞的这一条评论，其他评论不受影响，合理利用系统资源。

实例：

<template>
   <view>
       <view class="thumb" v-for="item in testdata">
           <view>{{item}}</view>
       </view>
   </view>
</template>
<script>
   export default {
       data() {
           return {
               testdata: ["评价1","评价2","评价3","评价4","评价5"]
           }
       }
   }
</script>
<style>
   .thumb{
       text-align: center;
       margin-top: 20px;
   }
</style>
// thumbitem.vue 将每个 item 包装成组件
<template>
   <view>
       
       <view>{{item}}</view>
       
       <button @click="thumb(index)">点赞数：{{thumbs}}</button>
   </view>
</template>
<script>
   export default {
       props:['item'],
       data() {
           return {
               thumbs:
           };
       },
       methods: {
           // 每次触发 thumb 方法,点赞数 thumbs 变量就加 1
           thumb(){
               this.thumbs +=
           }
       }
   }
</script>

长列表无差量数据更新
如果长列表中，每个 item 不会单独去更新，那我们就没有必要去将每个 item 都做成一个组件了，直接循环长列表显示 item 就可以。
实例：

// index.vue 循环加载长列表
<template>
   <view>
       <view class="thumb" v-for="item in testdata">
           <ThumbItem :item='item'></ThumbItem>
       </view>
   </view>
</template>
<script>
   Import ThumbItem from "components/thumbitem/thumbitem.vue"
   export default {
       components: {
           ThumbItem
       },
       data() {
           return {
               testdata: ["评价1","评价2","评价3","评价4","评价5"]
           }
       }
   }
</script>
<style>
   .thumb{
       text-align: center;
       margin-top: 20px;
   }
</style>
我们在开发过程中，不需要每次都将长列表的 item 包装成组件，每个 item 需要差量数据更新的时候，才需要包装成组件。

组件在页面初始化时会占用更多的内存，并且遍历节点也会更慢，每个组件渲染时都会触发一次通信，太多组件就会阻塞通信。所以我们要将好刀用在刀刃上，不分情况到处使用反而会适得其反。深层节点的嵌套也是同样的道理，我们开发的时候要注意尽量避免深层节点嵌套。

在实际项目开发中，长列表一般是由逻辑层处理后返回的，数据是变化的，如果长列表中的数据需要展示在页面上，那么我们就将长列表定义在 data 中，如果变量不需要展示在视图中，我们尽量将变量定于在 data 外部。

因为data 中的数据每次发生变化，视图层都要重新渲染页面。这样做可以尽量避免资源的浪费，这条建议同样也适用于其他变量。

（编辑：汽车网）

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