mpVue 踩坑记
首发于掘金,点击查看### 前言mpvue 用 vue 的语法开发小程序,用着很爽但是也有很多坑,在这里记录下踩过坑。### 1 created 不是预期的触发所有页面的 created 在小程序初始化时都会触发,mounted 对应小程序的 onLoad,所以 mpvue mounted 相当于 vue 中的 created。``` mounted() { // 相对应小...
### 前言
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: {
},
```
更多推荐
所有评论(0)