vue vs 微信小程序

vue 和微信小程序的区别

生命周期

√ vue 周期
vue:beforeCreate – created – beforeMount – mounted – beforeUpdate – updated – beforeDestory – destoryed
√ 小程序周期
WeChat：onLunch – onLoad – onShow（onHide\onUnLoad\onReady）

请求数据

vue 在 mounted 或 created 中请求数据
WeChatapp 在 onLoad 或 onShow 中请求数据

变量绑定

vue 的变量绑定在属性前加冒号
WeChatapp 的变量绑定用双大括号引用

列表渲染

vue 的列表渲染

<li v-for="(item,index) in dataList" :key="index">
  {{item.attr}}
</li>

WeChat 的列表渲染

<text wx:for="{{searchData}}" wx:key="index">
  {{ item }}
</text>

控制元素的显示与隐藏

vue 中使用 v-if、v-show 控制元素的显示与隐藏
WeChatapp 中使用 wx-if、hidden 控制元素的显示与隐藏

事件处理

vue 中使用 v-on:event 或 @event 来触发事件,使用 .stop 修饰符来阻止事件冒泡
WeChatapp 中使用 bindtap(bind+event) 或 catchtap(catch+event)(阻止事件冒泡) 来触发事件

数据的双向绑定

√ 设置值
vue 在表单中加一个 v-model,然后在 data 中设置相应的值，用 v-model 进行绑定（当表单元素内容发生变化时，data 中对应的值也会发生改变）
WeChatapp 当表单内容发生变化时，会触发表单元素上绑定的方法，在改方法中，通过 this.setData({key:value})来将表单的值赋值给 data 中对应的值，从而实现数据的双向绑定
√ 取值
vue 通过 this.demo 获取相应值
WeChatapp 通过 this.data.demo 获取相应值

绑定事件传参

vue 只需要在触发的方法中，将需要的参数作为形参传入即可
WeChatapp 不能直接在绑定事件的方法中传入参数。将参数作为属性值，绑定到元素的 data-属性上，然后在方法中通过 e.currentTarget.dataset.*来获取

<view bindtap="demoEvent" data-id="{{item.id}}">
Page({
  demoEvent(e){
    let id = e.currentTarget.dataset.id
  }
})

父子组件通信

（1）子组件的使用
√ vue
编写子组件
在父组件中通过 import 引入
在父组件的 components 中注册
在模板中使用（可传值、绑定事件、加 ref 标记）（子组件通过 props 接收参数，通过$emit触发父组件中的函数，父组件通过$ref 调用子组件中的内容）
√ WeChatapp
编写子组件
在子组件的 json 文件中，将该文件声明为组件

{
  "component": true
}

在需要引入的父组件的 json 文件中，在 usingComponents 填写引入组件的名称以及路径

{
  "usingComponents": {
    "movie-list": "/components/movie-list/index"
  }
}

在父组件中，直接引入即可
（2）父子之间的通信
√ vue 在父组件中，子组件通过 v-bind 传值；在子组件中，通过 props 接收，即可完成数据的传递
子组件和父组件通信可以通过 this.$emit将方法和数据传递给父组件父组件想要调用子组件的方法，给子组件加一个ref,父组件通过this.$refs.ref 值可以调用子组件的任意方法
√ WeChatapp 父组件中，子组件引用处，直接将值赋值给一个变量；子组件通过 properties 接收传递的值
子组件和父组件通信用的和 vue 方法类似，通过 this.triggerEvent()将方法和参数传递给父组件
小程序通过给子组件添加 class 或者 id，然后调用子组件的方法:this.selectComponent(’#id’).methodName() 或者 this.selectComponent(’.class’).methodName()

onTap(event){
      const pid = this.properties.res.postId
      this.triggerEvent('posttap',{
        pid
      })
    }