uni-app模板编译模式和自定义组件编译模式差异说明

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app模板编译模式和自定义组件编译模式差异说明

更新：这2种编译模式均已下线。本文已过期

uni-app 自 1.8版本 开始，同时支持两种编译模式：

  • template模板模式：老框架模式，借鉴自mpvue，将用户编写的Vue组件，编译为WXML中的模板（template)，变相实现组件化开发，性能差，支持 Vue 语法少，比如不支持过滤器。

  • 自定义组件模式：新框架模式，DCloud自研，将用户编写的Vue组件，编译为微信小程序自定义组件，实现了更高的性能及更完善的 Vue 语法支持。同时在App端提供了独立的js引擎，大幅提升性能。

如何切换编译模式

在 manifest.json 的源码视图里配置是否启用新编译器， manifest.json -> %platform% -> usingComponents 切换编译模式。

%platform% 是指平台名称

// manifest.json    
{    
    // ...    
     /* App平台特有配置 */    
    "app-plus": {    
        "usingComponents":true //是否启用`自定义组件模式`，为true表示新的`自定义组件模式` ，否则为`template模板模式`   
    }    
    /* 微信小程序特有配置 */    
    "mp-weixin": {    
        "usingComponents":true //是否启用`自定义组件模式`，为true表示新的`自定义组件模式`，否则为`template模板模式`   
    }    
  // ...  
}

在HBuilderX的manifest的可视化界面，每个平台的也都有配置勾选。

若manifest.json配置文件中，未明确指定编译模式（即未配置%platform% -> usingComponents），则uni-app默认策略如下：

  • HbuilderX 2.3.0 正式版之前的版本为保证历史项目兼容，默认使用老编译器（template模板模式），即不配置的情况下效果等同于 usingComponents: false，而 HbuilderX 2.3.0 正式版之后,默认会启用新编译器（自定义组件模式），即不配置的情况下效果等同于 usingComponents: true，从 HbuilderX 2.3.8 正式版开始将停止支持非自定义组件模式，届时，新版HBuilderX真机运行和云打包，都不再支持非自定义组件模式。HBuilderX的云打包，只向下保留2个版本。再升级1个版本后，老版打包机也不再支持非自定义组件模式。详见https://ask.dcloud.net.cn/article/36385

  • HBuilderX Alpha 为开发者提供最新技术尝鲜，默认会启用新编译器（自定义组件模式），即不配置的情况下效果等同于 usingComponents: true

  • CLI 开发模式下的，默认编译策略同 HBuidlerX 正式版策略

非自定义组件模式升级为自定义组件模式注意

自定义组件模式虽然兼容大部分老模式的写法，但也有部分不兼容。老项目升级时，可能需要修改部分代码，请详细参考自定义组件模式开发注意事项：https://ask.dcloud.net.cn/article/35851

不同编译模式支持的Vue语法差异

自定义组件模式和模板模式都不支持的 vue 语法：

  • class不支持绑定Obejct变量（使用字符串的形式绑定）
  • 不支持事件修饰符：prevent、passive（在App与小程序平台，使用stop修饰符，既可以阻止冒泡也能阻止默认行为）
  • 不支持render、inline-template、X-Templates、keep-alive、transition
  • 不支持使用 Vue.use 的方式注册全局组件（在main.js使用Vue.component的方式引入）

template模板模式除了不支持如上Vue语法外，额外还不支持如下语法：

  • 不支持过滤器 filter
  • 不支持比较复杂的 JavaScript 渲染表达式
  • 不支持在 template 内使用 methods 中的函数
  • 不支持 v-html
  • 不支持 v-slot 新语法及后备内容
  • 不支持解构插槽 Prop 设置默认值
  • 组件不支持原生事件绑定，如：@tap.native
  • 组件不支持通过class绑定样式

问题反馈

  • 如果在使用 uni-app 的过程中遇到问题，先认真阅读下 如何准确地反馈 uni-app 的问题 再发帖咨询。
  • 在不要在本文章下留言报bug，请发布新帖，并将帖子地址复制到回复栏，并简短说明bug。

扩展阅读


Harmonyos Next教程
1 回复

在uni-app中，模板编译模式和自定义组件编译模式各有其独特之处，主要体现在处理逻辑和生成的代码结构上。下面将通过代码案例来展示这两种编译模式的差异。

模板编译模式

模板编译模式主要用于页面的结构渲染。uni-app的页面模板支持Vue风格的语法，通过编译将模板转换为高效的渲染函数。

示例代码（页面模板）：

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="changeMessage">Change Message</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Message Changed!';
    }
  }
};
</script>

在上述代码中，<template>部分定义了页面的结构，{{ message }}是数据绑定，@click是事件监听。这些Vue风格的语法在编译过程中会被转换为JavaScript渲染函数，以高效地在页面上渲染数据。

自定义组件编译模式

自定义组件编译模式则专注于组件的复用性和封装性。自定义组件允许开发者将页面中的公共部分抽象为组件，以便在不同的页面中复用。

示例代码（自定义组件）：

MyComponent.vue：

<template>
  <view>
    <text>{{ text }}</text>
  </view>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Default Text'
    }
  }
};
</script>

使用自定义组件的页面：

<template>
  <view>
    <MyComponent :text="customText"></MyComponent>
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      customText: 'Custom Text from Page'
    };
  }
};
</script>

在自定义组件中，<template>定义了组件的结构，props定义了组件接收的属性。组件的使用方式与普通HTML标签类似，但可以通过:绑定动态数据。

差异总结

  • 模板编译模式主要用于页面的整体结构渲染，支持Vue风格的语法和数据绑定。
  • 自定义组件编译模式则强调组件的复用性和封装性，通过props接收外部数据，实现组件的独立和复用。

这两种编译模式在uni-app中共同工作，使得开发者能够高效地构建复杂的应用。通过理解这些差异，开发者可以更好地利用uni-app的框架特性，提升开发效率和代码质量。

回到顶部