小程序和vue.js的区别（持续更新中~）

一、生命周期：

1、小程序：

onLoad----监听页面加载：

一个页面只会调用一次，可以在onLoad中获取当前页面从上一级页面带过来的参数(通过options)。

onReady----监听页面初次渲染完成：

一个页面只会调用一次，代表当前页面已经准备妥当，可以和视图层进行交互。

对界面的设置如 wx.setNavigationBarTitle请在 onReady之后设置。详见生命周期。

wx.setNavigationBarTitle({

title:this.data.titleName

});

onShow----监听页面显示：

每次打开页面都会调用一次，如果需要每次进入页面时刷新数据，可在此方法中实现

onHide----监听页面隐藏：

当navigateTo或底部tab切换时调用

onUnload----监听页面卸载：

当redirectTo或navigateBack的时候调用

生命周期图解

2、vue.js:

创建前/后： beforeCreat/created

在beforeCreat阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：beforeMount/mounted

在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。

在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：beforeUpdate/updated

当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：beforeDestroy/destroyed

在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

vue生命周期

二、条件渲染

1、小程序:

使用wx:if、wx:elif、wx:else

<view wx:if="{
   
   {type === 'A'}}">A</view>
<view wx:elif="{
   
   {type === 'B}}">B</view>
<view wx:elif="{
   
   {type === 'C'}}">C</view>
<view wx:else>NOT A/B/C</view>

2、vue.js:

使用v-if、v-else-if、v-else

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

三、列表（循环）渲染

1、小程序

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{
   
   {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
   
   {idx}}: {
   
   {itemName.message}}
</view>

wx:for 也可以嵌套，下边是一个九九乘法表:

<view wx:for="{
   
   {[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{
   
   {[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{
   
   {i <= j}}">
      {
   
   {i}} * {
   
   {j}} = {
   
   {i * j}}
    </view>
  </view>
</view>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

2、vue.js

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {
   
   { todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

使用多个参数作为索引：

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {
   
   { index }}. {
   
   { key }} : {
   
   { value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'hzn',
      url: 'https://blog.csdn.net/weixin_38131507/article/details/99128249',
      slogan: '小程序和vue.js的区别！'
    }
  }
})
</script>

vue.js使用v-bind:key(简写成:key)来指定列表中项目的唯一的标识符。

四、数据双向绑定

1、小程序

1）设置值：

当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过 this.setData({key:value})来将表单上的值赋值给 data中的对应值。

下面是示例代码，可以感受一下：

wxml:

<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{
   
   {reason}}' name="reason" />

js:

Page({
    data:{
     reason:''
    },

    bindReason(e) {
     this.setData({
      reason: e.detail.value
     })
    }
})

2）获取值：

通过 this.data.reason取值。

2、vue.js

1）设置值：

在vue中，只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值，当表单元素内容发生变化时， data中对应的值也会相应改变，这是vue非常nice的一点。

<div id="app">
 <input v-model="reason" placeholder="填写理由" class='reason'/>
</div>
 
new Vue({
 el: '#app',
 data: {
 reason:''
 }
})

2）获取值：

通过 this.reason取值。

五、显示隐藏元素

1、微信小程序

hidden="{ {...}}"

2、vue.js

v-show="..."

六、事件绑定

1、微信小程序

用bindtap(bind+event)（事件会冒泡），或者catchtap(catch+event)绑定事件（阻止冒泡）

<button bindtap="clickMe">点击我</button>
<button catchtap="clickMe">点击我</button>  //阻止事件冒泡

2、vue.js

使用v-on:event绑定事件，或者使用@event绑定事件，用.stop阻止事件冒泡

<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button>  //阻止事件冒泡

七、事件传值

1、微信小程序

微信小程序的事件我试过只能传函数名，至于参数，可以绑定到元素中（data-参数名），在函数中通过（e.currentTarget.dataset.参数名）获取

示例代码：

wxml:

<view data-tab="1" catchtap="changeTab">哈哈</view>

js：

changeTab(e){
   var _tab = e.currentTarget.dataset.tab;  
}

2、vue.js

vue绑定事件的函数传参数时，可以把参数写在函数后面的括号里

<div @click="changeTab(a,b)">哈哈</div>

八、绑定class

1、小程序

<view class="test {
   
   {isActive ? 'active':'' }}"></view>

2、vue.js

使用v-bind:class或者:class

<div class="test" v-bind:class="{ active: isActive }"></div>