mpVue 踩坑记

首发于掘金，点击查看

### 前言
mpvue 用 vue 的语法开发小程序，用着很爽但是也有很多坑，在这里记录下踩过坑。
### 1 created 不是预期的触发

所有页面的 created 在小程序初始化时都会触发，mounted 对应小程序的 onLoad，所以 mpvue mounted 相当于 vue 中的 created。
```
    mounted() {  // 相对应小程序的 onLoad
      // 获取数据
      this.getData();
    },
```
vue 中获取数据放到 created 中，mpvue 则放到 mounted 中。
### 2 不支持的 vue 属性

    1. keep-alive
    2. solt
    3. class 和 style 的 classObject 和 styleObject 语法。
    4. filters
    
```
<template>
    <!-- 支持 -->
    <div class="container" :class="computedClassStr"></div>
    <div class="container" :class="{active: isActive}"></div>

    <!-- 不支持 -->
    <div class="container" :class="computedClassObject"></div>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>
```

    filters 可以使用 motheds 或者 computed 替换
### 3 mpvue-loader
mpvue-loader 版本 1.1 以上需要新建 main.json 作为配置文件。
### 4 图片相对路径无法加载
图片使用相对路径无法加载，放到 dist/static 目录下使用绝对路径即可。
### 5 新建页面需要重新 npm run dev 才能生效
新建页面后需要重新 npm run dev 才能生效
### 6 页面返回后没有销毁
小程序中页面返回后该页面就会出栈，下次进入重新触发 onLoad，但是 mpvue 返回后页面没有销毁，数据会缓存，所以进入页面我们需要重置数据。
```
    onLoad() {
      // 解决页面返回后，数据没重置的问题
      Object.assign(this, this.$options.data());
    },
    methods: {
     
    },
```