uni-app 1.9发布，App平台升级为新版编译器（自定义组件模式），支持更多Vue语法

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

uni-app 1.9发布，App平台升级为新版编译器（自定义组件模式），支持更多Vue语法

新版特性

uni-app 1.9版主要改进包括：

  • 插件市场支持付费原生插件，欢迎插件作者们踊跃提交原生插件，示例 https://ext.dcloud.net.cn/plugin?id=135
  • 引擎架构升级，提升App启动速度、减少js阻塞
  • 支持 自定义组件模式 的新编译器，大幅提升App端的组件性能、支持过滤器等更多vue语法
  • 很多开发者报包括uni ui的折叠面板、swipeaction等组件中无法使用v-for也需要使用新版并配置新编译模式解决。

新版支持了更多 Vue 语法，详细如下：

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

新版不支持的 vue 语法

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

新旧版本兼容策略

为兼容历史项目，uni-app 现阶段同时支持老的 template模板模式、和新的 自定义组件模式 两种模式，默认策略如下：

项目 默认策略
HBuilderX 1.9.0+ 新创建的项目 在微信端、App端默认会启用新的框架
历史项目 默认使用老框架。如需启动新框架请按下面配置开启

Tips：

  • 为保证自定义组件兼容性，运行到微信开发者工具时，建议将微信基础库设置为最新版本（微信工具项目设置中）。
  • 如果你使用了新增的vue语法，请注意只有App、H5、微信三个平台支持这些新语法，编译到其他平台时，要用条件编译处理。
  • 如发现新框架有bug，开发者可通过manifest.json切回老框架编译模式，同时欢迎在 ask 社区反馈bug

新版开发注意事项

开发者启用 自定义组件模式 后，需注意部分开发事项，参考 https://ask.dcloud.net.cn/article/35851

Tips：新编译模式在App端，控制台打印的日志无法体现源码的准确行数的问题，需升级到1.9.2版本。

性能优化建议

  1. 模板中不建议直接使用 object
<!-- 低性能写法 -->
<uni-title title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-title>

<!-- 高性能写法 -->
<template>
    <view>
        <uni-title title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="extraIcon"></uni-title>
    </view>
</template>
<script>
export default {
    data() {
        return {
            extraIcon:{color: '#4cd964',size: '22',type: 'spinner'}
        }
    }
}
</script>
  1. 在模板中未使用的数据不建议定义在 data 中，未使用的数据一律移除到 vm 外边定义
<!-- 低性能写法 -->
<template>
    <view>
        {{name}}
    </view>
</template>
<script>
export default {
    data() {
        return {
            name:'',
            types:true
        },
        onLoad(){
            if(this.types){
                this.name = '张三';
            } else {
                this.name = '李四';
            }
        }
    }
}
</script>

<!-- 高性能写法 -->
<template>
    <view>
        {{name}}
    </view>
</template>
<script>
let types = true ;
export default {
    data() {
        return {
            name:''
        },
        onLoad(){
            if(types){
                this.name = '张三';
            } else {
                this.name = '李四';
            }
        }
    }
}
</script>
  1. 为提升开发体验，新版本增加了部分 Vue 语法，其实这些语法在微信小程序中本身是不支持的；为支持这些语法，uni-app 会在编译、运行时分别做一些额外的工作，若开发者希望追求性能极致，则建议尽量少用或者不用新增语法。

老项目改造注意

老版编译模式升级新版编译模式，可先在manifest的源码视图中，在微信下打开新编译模式，运行到小程序调试。然后再迁到app端。

请一定注意新版编译模式，必须与新版手机sdk、基座、打包机、cli绑定。即使HBuilderX升级，如果你的项目是cli方式、或使用了老的自定义基座、或本地sdk离线打包，则需手动升级这些，否则会造成白屏等多种异常。详见 https://ask.dcloud.net.cn/article/35845

升级注意

如果你的项目是cli创建的，记得编译器在你的项目下，不会随着HBuilderX升级而升级，你需要npm update手动升级编译器。


Harmonyos Next教程
1 回复

针对uni-app 1.9版本发布的重大更新，特别是App平台升级为新版编译器（自定义组件模式）并支持更多Vue语法这一特性，以下是一个简要的代码案例展示，帮助你更好地理解如何在新的编译器模式下利用这些增强的Vue语法特性。

1. 创建一个自定义组件

首先，我们创建一个自定义组件MyComponent.vue，这个组件将展示如何使用增强的Vue语法，比如计算属性、生命周期钩子等。

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="updateMessage">Update Message</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    message() {
      return `Button clicked ${this.count} times`;
    }
  },
  methods: {
    updateMessage() {
      this.count++;
    }
  },
  mounted() {
    console.log('MyComponent mounted');
  }
};
</script>

<style scoped>
button {
  margin-top: 10px;
}
</style>

2. 在页面中使用自定义组件

接下来，我们在一个页面组件index.vue中使用这个自定义组件。

<template>
  <view>
    <MyComponent />
  </view>
</template>

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

export default {
  components: {
    MyComponent
  }
};
</script>

<style>
/* 页面样式 */
</style>

3. 配置和编译

确保你的pages.json、manifest.json等配置文件正确设置，以支持自定义组件的使用。在1.9版本后，uni-app的编译器已经进行了优化，大多数情况下，只需确保组件路径正确即可。

4. 运行和测试

使用HBuilderX或命令行工具运行你的uni-app项目，确保在App平台上测试。新版本编译器应该能够正确处理自定义组件，并且支持更多的Vue语法特性，如上述示例中的计算属性和生命周期钩子。

总结

通过上述代码示例，你可以看到如何在uni-app 1.9版本中使用自定义组件模式，并利用增强的Vue语法特性。这种模式不仅提高了代码的复用性，还使得组件间的通信和维护变得更加清晰和高效。在实际项目中，你可以根据需要扩展这些组件，实现更复杂的功能。

回到顶部