开发喵星球

vue,react,小程序区别

比较vue，react， 小程序区别

3W1H

vue react 小程序
生命周期
数据绑定 v-bind/:/v-html/v-text/{{}} dataname={this.state.datavalue} 在属性上直接写 属性="{{value}}"
数据双向绑定 v-model value={this.state.数据} onChange={this.函数名} model:属性=“{{value}}”
value="{{name}}" bindinput="事件名"
列表渲染（for） v-for map() wx:for
显示隐藏（条件渲染） v-if、v-show if/三元运算符/ wx:if/hidden
事件处理 v-on:事件名=函数 1. on+事件名 = {this.函数名.bind(this)}
2. on+事件名 = {e=>this.函数名(e)} 3.this.事件名 = this.事件名.bind(this)
4.箭头函数		 bind+事件名
事件传参 v-on:事件名=函数(参数,$event) 在事件处理中，参数列表都可传参 bind+事件名
data-属性名="值"e.currentTarget.dataset
this指针 Vue中的this指向当前组件或Vue的实例对象。 this 指向当前实例化对象,类式组件里面的构造器里面的this是指向实例对象的， this指向当前页面，this.data.数据
组件 全局组件，局部组件 函数式组件、类组件 自定义组件
组件通信 父传子：props；
子传父：$emit		 this.state/this.setState 监听事件(bind+事件名=“函数名”)，
触发事件var myEventDetail = {} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent(‘事件名’, myEventDetail, myEventOption)
路由 vue-router
Go to Home
 react-router wx.switchTab，
wx.reLaunch，
wx.redirectTo，
wx.navigateTo，
wx.navigateBack
获取请求 axios axios wx.request()
脚手架项目结构

生命周期

vue3：

image-20221020142644644

vue3
创建
beforeCreate 在实例创建前
created 在实例创建后
挂载
beforeMount 在挂载开始之前被调用：相关的render函数首次被调用。
mounted 在实例挂载完成后被调用。
更新
beforeUpdate 在数据发生改变后，DOM 被更新之前被调用。
updated 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
卸载
beforeUnmount 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
unmounted 卸载组件实例后调用。

react：

image-20221020003117516

react挂载
constructor 组件挂载之前被调用
static getDerivedStateFromProps(props, state) 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
render 方法是class组件中唯一必须实现的方法，用于渲染dom, render()方法必须返回reactDOM
componentDidMount 组件挂载后 (插入DOM树后) 立即调用
更新
shouldComponentUpdate(nextProps, nextState) 组件更新之前调用，可以控制组件是否进行更新， 返回true时组件更新， 返回false则不更新
getSnapshotBeforeUpdate(prevProps, prevState) 最近一次的渲染输出被提交之前调用。也就是说，在 render 之后，即将对组件进行挂载时调用。
componentDidUpdate(prevProps, prevState, snapshot) 更新后会被立即调用。首次渲染不会执行, 第三个是“snapshot” 参数传递
卸载
componentWillUnmount 组件即将被卸载或销毁时进行调用。

小程序：

image-20221020151447954

小程序的生命周期：
onLaunch 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow 当小程序启动，或从后台进入前台显示，会触发 onShow
onHide 当小程序从前台进入后台，会触发 onHide
onError 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
页面的生命周期
onLoad 监听页面加载，一个页面只会调用一次
onReady 监听页面初次渲染完成，一个页面只会调用一次
onShow 监听页面显示，每次打开页面都会调用一次
onHide 监听页面隐藏
onUnload 监听页面卸载

对比：

生命周期对比 vue react 小程序
创建 beforeCreate,
created		 onLaunch
app:onShow
onLoad
onShow
onReady
挂载 beforeMount，
mounted		 constructor：组件挂载前
getDerivedStateFromProps：render 前，初始挂载及后续更新 render：用于渲染dom
componentDidMount
更新 beforeUpdate,
updated		 getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
销毁/卸载 beforeUnMount，
Unmounted		 componentWillUnmount onUnload

数据绑定

vue: 
    v-bind，v-text，v-html，{{}}

react: 
    dataname={this.state.datavalue}

小程序：
    在属性上直接写 属性="{{value}}"

数据双向绑定

vue: 
    v-model
    
react: 
    先实现
    value={this.state.数据} onChange={this.函数名}
    
小程序：
    model:value=“{{dataname}}”
    value="{{dataname}}" bindinput="事件名"

列表渲染

vue:
    v-for="site in sites"

react: 
    js里面的map()/for
    <div>
        {this.state.list.map((item, index) => {
            return <button key={index}>{item}</button>
        })}
    </div>

微信小程序：
    wx:for = "{{dataname}}" wx:for-item="i"  默认每一条数据名为item，索引index

显示隐藏（条件渲染）

vue: v-if /v-show

react: if/三元运算符()

小程序：wx:if="{{true}}" / hidden

事件处理及传参

事件：在文档中或者浏览器窗口中通过某些动作触发的特定交互。

事件主要是绑定在html元素上。

用户与页面之间有一定的交互。

事件传参，

表单提交，页面跳转

vue: 
    v-on:事件名=函数
    v-on:事件名=函数(参数,$event)
    @事件名=函数

react:
    1. on+事件名 = {this.函数名.bind(this)}
    2. on+事件名 = {e=>this.函数名(e)}
    3. this.事件名 = this.事件名.bind(this)
    4. 箭头函数
    <div id="root"></div>
    <script type="text/babel">
        class Hello extends React.Component {
            constructor(props) {
                super(props)
                this.show = this.show.bind(this, "aaa")
            }
            show(e) {
                console.log("on", e);
            }

            sss = event => {
                console.log("onclick");
            }
            render() {
                return (
                    <div>
                        <h1 onClick={this.show.bind(this, 1212)}>hello world</h1>
                        <h1 onClick={e => this.show(e, 1212)}>kitty</h1>
                        <h1 onClick={this.sss}>tom</h1>
                        <h1 onClick={this.show}>1212</h1>
                    </div>
                )
            }
        }
        ReactDOM.render(<Hello />, document.getElementById("root"))
    </script>

//微信小程序:
    bind+事件名
    data-属性名="值"
    e.currentTarget.dataset

    <view>
        <view bindtap="btns" data-wee="kitty">点这个</view>
    </view>

    js
    btns(e){
        console.log("微信小程序",e.currentTarget.dataset);
    }

this指针

Vue：this指向当前组件或Vue的实例对象。

react：this 指向当前实例化对象,类式组件里面的构造器里面的this是指向实例对象的， this.state.数据

微信小程序：this指向当前页面，this.data.数据

组件

组件是对数据和方法的封装

组件化的目的，是为了让页面中的各个部分可以被复用，以减少重复的代码。

img

vue 全局组件、局部组件：

//全局：
app.component('all-com', {
    template: '<h1>全局注册组件!</h1>'
})
//局部：
const jbComp = ({
    template:`<div>局部组件</div>`
})
a.component("comp",{
    components:{
        "jb-comp":jbComp
    },
    template:`
        <div>
          组件
          <jb-comp></jb-comp>
        </div>`
})

react:

​ 类组件、

​ 函数式组件

function Hcomp(){
    return (...)
}
class Ccomp extends React.Component{
    constructor(props){
        super(props);
        this.state={
            key:value
        }
    }
    render(){
        return(...)
    }
}

​ 小程序自定义组件

1.在根目录下创建文件夹component
2.在component下创建组件,
3.在组件中的.json文件中设置 "component": true,
4.在需要组件的页面的.json文件中"组件name":"/component/组件name/组件name"
5.在页面的.wxml中<组件name></组件name>

组件通信

vue :
    父传子：props
         1. 在子组件props中写入需要传递的参数
         2.在父组件的子组件元素上绑定传入的数据并赋值
    子传父：emit
         1.在子组件上触发一个事件
         2.子组件处理事件，this.emit('',...item)
         3.在父组件的子组件元素上绑定传入的自定义事件
         4.处理父组件的事件

react：
    父传子:props 
          React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件。
          父组件向子组件传值，通过props，将父组件的state传递给了子组件。
    子传父:on+事件类型={函数名}
          子组件通过调用父组件传递到子组件的方法向父组件传递消息的

react父传子

react子传父

小程序：
    父传子：
        引入组件，在父组件中的json文件的usingComponents添加要使用的子组件
        父组件中引入子组件，给子组件添加属性
        在子组件的js文件的properties中接受传过来的值
        在子组件的wxml中操作
    子传父：
        1.在子组件中触发一个事件
        2.子组件处理函数 第一个参数为自定义事件名称,第二个参数为传递的数据:this.triggerEvent
        3.父组件监听子组件派发过来的事件和要接收的数据 在父组件的子组件标签上绑定自定义事件
        :bind要监听的事件名=“回调方法”
        4.处理函数e.detail即为子组件传递的数据

路由

vue:

<div id="box">
        <div>{{message}}</div>
        <p>
            <router-link to="/">this is home</router-link>
            <router-link to="/about">this is about</router-link>
        </p>
        <!-- 路由出口-->
        <router-view></router-view>

    </div>
    <script>
        const Home={
            template:`<div>Home</div>`
        }
        const About= {
            template:`<div>About</div>`
        }
        const routes=[
            {path:"/", component:Home},
            {path:"/about", component:About}
        ]
        const router = VueRouter.createRouter({
            history:VueRouter.createWebHashHistory(),
            routes,//routes:routes的缩写
        })
        const a = Vue.createApp({})
        a.use(router)
        a.mount("#box")
    </script>

react:

//App.js
return(
<BrowserRouter>
    <ul>
        <li>
            <Link to="/">Home</Link>
        </li>
        <li>
            <Link to="/blogs">Blogs</Link>
        </li>
        <li>
            <Link to="/about">About</Link>
        </li>
    </ul>
    <Routes>
        <Route index element={<Home />} />
        <Route path="/blogs" element={<Blogs />} />
        <Route path="/about" element={<About />} />
    </Routes>
</BrowserRouter>
);
//组件：
<Home />
<Blogs />
<About />

小程序：

wx.switchTab，
wx.reLaunch，
wx.redirectTo，
wx.navigateTo，
wx.navigateBack

获取请求

vue:

axios({
    method: "get",
    url: "url",
}).then((res) => {
    console.log(res);
}).catch((error) => {
    console.log(error);
  });

react:

axios.get(this.props.url).then(function(response){
        // 在这儿实现 setState
    }).catch(function(error){
        // 处理请求出错的情况
    });

小程序：

wx.request({
    url: 'url',
    method: 'post',
    success:(res)=>{
    console.log("成功");
    },
    fail:(res)=>{
    console.log("失败");
    }
})

脚手架

vue：

目录/文件 说明
node_modules npm 加载的项目依赖模块,项目依赖文件夹
public文件夹 一般放置一些静态的资源(图片），需要注意的是放在public文件中的静态资源webpack进行打包的时候，会原封不动的打包到dist文件夹中
index.html: 首页入口文件，可以添加一些 meta 信息或统计代码
favicon.ico: 在浏览器上显示的图标
src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 一般也是放置组件的静态资源
components: 目录里面放了一个组件文件，可以不用。一般放置的是非路由组件(全局组件)
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。程序入口文件也就是整个程序中最先执行的文件
index.css: 样式文件。
babel.config.js Babel的配置文件
jsconfig.json 配置一个默认根路径
package-lock.josn 用于锁定项目实际安装的各个npm包的具体来源和版本
package.json npm配置文件，其中设置了脚本和项目依赖的库
vue.config.js 一个可选的配置文件

react：

img

index.html 作为项目入口文件，加载 index.js ；index.js 文件作为框架的入口文件，加载 App.js ；App.js 作为组件的主入口文件，加载其他组件。

小程序：

image-20221019161531356

小程序 主要功能
components 放自定义组件的地方
pages 小程序页面存放的位置：js（页面逻辑）json（页面配置） wxml wxss
app.js 小程序的全局逻辑。
app.json 小程序公共配置，用来对微信小程序进行全局配置，决定页面文件的路径
app.wxss 设置全局样式，但是全局样式会被页面内的page.wxss覆盖。
project.config.json 配置配置公共的配置
project.private.config.json 配置个人的配置
sitemap.json 允许微信索引文件
   
分类：前端工程师, 小程序, 语言开发 作者：无限繁荣, 吴蓉 发表于：2022-10-26 09:28:18 阅读量：97
<<   >>

powered by kaifamiao