uniapp调用vue和nvue的区别是什么

1. 什么是uniapp

uniapp是一个开源的跨平台框架，它使用Vue.js作为开发语言，是一个使用单一代码构建多端应用的解决方案，可以实现快速开发小程序、多端应用等功能，减少开发成本和工作量，极大地提高了开发效率。

uniapp支持使用vue和nvue两种语言编写代码，但是两者的区别是什么呢？本文将详细介绍uniapp调用vue和nvue的区别。

2. vue与nvue的区别

2.1 语言环境

vue是一种基于JavaScript的语言，它主要运行在web端。而nvue是基于原生JavaScript的框架，它主要运行在Vue.js平台下的小程序和快应用。

// vue代码示例
new Vue({
    el: '#app',
    data: {
        message: 'Hello world!'
    }
})
// nvue 代码示例
const app = new Vue({
    data: {
        message: 'Hello world!'
    }
})
app.$mount()

2.2 组件支持

在vue中，我们可以通过组件来构建我们的网页和应用，uniapp也支持使用vue组件。而在nvue中，由于原生JavaScript的限制，我们需要用模板来替代组件。

// vue组件示例
Vue.component('my-component', {
    template: '<div>组件内容</div>'
})
// nvue组件示例
<template name="my-component">
    <view>模板内容</view>
</template>

2.3 样式支持

在vue中，我们可以使用CSS来为页面和组件添加样式。而在nvue中，由于原生JavaScript的限制，我们只能使用内联样式或者单独的样式文件来设置样式。

// vue样式示例
.my-class {
    color: red;
}
// nvue内联样式示例
<template name="my-component">
    <view style="color: red;">模板内容</view>
</template>
// nvue样式文件示例
<style src="@/style.css"></style>

2.4 数据访问

在vue中，我们可以通过ajax或者axios等工具从服务器获取数据，然后渲染到页面上。而在nvue中，由于原生JavaScript的限制，我们需要使用uni.request等函数来获取数据，然后渲染到页面上。

// vue数据访问示例
axios.get('/api/data')
    .then(response => {
        console.log(response.data)
    })
// nvue数据访问示例
uni.request({
    url: '/api/data',
    success: (res) => {
        console.log(res.data)
    }
})

3. 总结

uniapp是一个开源的跨平台框架，它支持使用vue和nvue两种语言编写代码，两者的区别在于语言环境、组件支持、样式支持和数据访问等方面的差异。对于开发者而言，需要根据项目需求选择合适的语言来编写代码。