uniapp框架和原生小程序开发的区别以及和vue、react框架的相似之处

1.vue的事件绑定可以直接传参数,而小程序需要使用自定义属性data

<!-- vue -->
<button @click="btnClick(123)">
   vue的按钮
</button>

<!-- 小程序 -->
<button bindtap="benClick" data-number="123">
   小程序的按钮
</button>

<!-- react JSX-->
<button onClick={()=>{this.btnClick(id)}}>
	react按钮
</button>

2.组件数据状态声明和修改,小程序使用this.setData

// vue
data(){
    return {
        name: "myname"
    }
}

// vue使用赋值的方式修改
this.name = "new name";

// 读取属性
console.log(this.name)

// --------------------------------------------------------------

// 小程序
data: {
    name: "myname"
}

// 小程序使用setData
this.setData({
    name: "new name"
})

// 读取属性
console.log(this.data.name)

// --------------------------------------------------------------

// react
state: {
    name: "myname"
}

// react使用setState
this.setState({
    name: "new name"
})

// 读取属性
console.log(this.state.name)

3.模板中绑定动态值和动态属性

<!-- vue -->
<div :class="color">
    名字：{{name}}
</div>

<!-- 小程序 -->
<view class="{{color}}">
    名字：{{name}}
</view>

<!-- react-->
<div className={color}>
    名字：{{name}}
</div>

4.循环和条件渲染

<!-- vue -->
<ul>
    <li v-for="item in [1,2,3]" :key="item">
        <span v-if="item !== 1">{{item}}</span>
    </li>
</ul>

<!-- 小程序，默认当前项是item, 默认下标是index -->
<view>
    <view wx:for="{{ 引用data声明的数组 }}" wx:key="index">
        <text wx:if="{{ item !== 1 }}">{{item}}</text>
    </view>
</view>

<ul>
    {
        [1,2,3].map(v => {
            return <li>{v}</li>
        })
    }
</ul>

小程序的异步请求使用wx.request

wx.request({
    url: "https://api.github.com/users",
    success(res){
        console.log(res)
    }
})

原生小程序和uniapp的区别

1.使用原生小程序的标签

2.使用原生小程序的生命周期

3.使用vue的语法

4.uniapp有自己的一套api

5.支持原生不支持的less和sass