PS：参考一些博客，整理的一些，供自己复习使用～

生命周期

vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。

vue

• beforeCreate：组件开始初始化。开始观察数据，然后开始生成。（创建前）
• created：组件生成，会判断组件有没有挂载点。如果没有，开始创建。（创建完成）
• beforeMount：开始创建vm.$el，并把原来创建好的el替换，可以在浏览器里面看到页面。（挂载前）
• mounted：肯定会发生数据的变化。（挂载完成）
• beforeUpdate：同意数据更新，就会update。（更新前）view层还没有更新，此时的innerHtml还是未修改的数据。
• updated：应不应该显示。（更新完成）view层已经更新，打印出得innerHtml为修改后的数据。
• beforeDestory：开始小时，比如数据是否要保存。（销毁前）
• destoryed：页面销毁成功。（销毁完成）

小程序

• onload：页面加载，一个页面只会调用一次。可以在onload中获取当前页面所调用的query参数。
• onShow：页面显示，每次打开页面都会调用一次。
• onReady：页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
• onHide：页面隐藏，底部tab切换或者navigateTo时调用。
• onUnload：页面卸载，当redirectTo或navigateBack的时候调用。

数据请求

在页面加载数据时，vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据。

数据绑定

VUE：vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号，例：

<img :src="imgSrc"/>

小程序：绑定某个元素的值为元素属性时，会用两个大括号括起来，如果不加括号，会被认为是字符串。例：

<image src="{{imgSrc}}"></image>

列表渲染

vue：v-for=“item in items”

小程序：wx:for=“{{items}}“

显示与隐藏

vue：v-if和v-show v-if：较少的改变。切换会销毁和重建。 v-show：频繁的切换。css上的展示隐藏，总会被渲染出来。

小程序：wx:if和hidden

事件处理

vue：使用v-on:event或者@event

小程序：使用bindtap或者catchtap

数据双向绑定

1. 设置值 在vue中，在元素上加上v-model，再绑定data中对应的一个值，当元素内容发生变化，data中对应的值也会发生相应的变化。

在小程序中，没有这个功能。当内容发生变化，需要通过this.setData({value:value})赋值给data中的值。

2. 取值 vue中，通过this.test取值。 小程序中，通过this.data.test取值。

绑定事件传参

在vue中，需要传递的数据作为形参传入就可以了

<div @click="say('测试下')></div>

在小程序中，不能直接在绑定事件的方法中传入参数，需要将参数作为属性值，绑定到元素上的data-属性，然后在方法中，通过e.currentTarget.dataset.xx的方式获取，从而完成参数的传递。

<view bindtap="bindTapClick" data-id"{{item.id}}"></view>

父子组件通信

子组件的使用

在vue中，需要：

• 编写子组件
• 在需要使用的父组件中通过import引入
• 在vue的components中注册
• 在模版中使用

//子组件 bar.vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
},
methods:{
    say(){
       console.log('明天不上班');
       this.$emit('helloWorld')
    }
}
</script>

// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
        title:"我是标题"
    }
},
methods:{
    helloWorld(){
        console.log('我接收到子组件传递的事件了')
    }
},
components:{
    Bar
}
</script>

在小程序中需要：

• 编写子组件
• 在子组件的json文件中，将该文件声明为组件

{
  "component": true
}

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

"usingComponents": {
    "tab-bar": "../../components/tabBar/tabBar"
  }

• 在父组件中，直接使用即可

<tab-bar currentpage="index"></tab-bar>

父子组件通信

vue中

父组件向子组件传递数据，只需要在子组件通过v-bind传入一个值，在子组件中，通过props接收，即可完成数据的传递

// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title"></bar>
  </div>
</template>
<script>
import Bar from './bar.vue'
export default{
data(){
    return{        
        title:"我是标题"
    }
},
components:{
    Bar
}
</script>

// 子组件bar.vue
<template>
  <div class="search-box">
    <div :title="title" ></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
}
</script>

子组件和父组件通信都可以通过this.$emit将方法和数据传递给父组件。

小程序中

父组件向子组件通信和vue类似，但是小程序没有通过v-bind，而是将值赋值给一个变量，比如：

<tab-bar currentpage="index"></tab-bar>

此处， “index”就是要向子组件传递的值

在子组件properties中，接收传递的值

properties: {
    // 弹窗标题
    currentpage: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: 'index'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    }
  }

子组件向父组件通信和vue类似

//子组件中
methods: {   
    // 传递给父组件
    cancelBut: function (e) {
      var that = this;
      var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象，提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用
    },
}

//父组件中
<bar bind:myevent="toggleToast"></bar>

// 获取子组件信息
toggleToast(e){
    console.log(e.detail)
}

如果父组件想要调用子组件的方法

vue会给子组件添加一个ref属性，通过this.$refs.ref的值便可以获取到该子组件，然后便可以调用子组件中的任意方法，例如：

//子组件
<bar ref="bar"></bar>

//父组件
this.$ref.bar.子组件的方法

小程序是给子组件添加id或者class，然后通过this.selectComponent找到子组件，然后再调用子组件的方法，例如：

//子组件
<bar id="bar"></bar>

// 父组件
this.selectComponent('#id').syaHello()