script增强特性

在原生自定义组件config的基础上，mpx新增支持了watch、computed、mixins、pageShow & pageHide等字段提高开发体验，同时mpx提供一个深度优化的机制来接管小程序的setData调用，用户在组件/页面当中可以使用this.someData = 'abc'的方式来设置数据，永远不应该直接调用setData去设置数据，这有可能导致数据不一致的问题。

computed

计算属性是一个纯函数，利用组合其它数据的方式返回一个新的数据，你可以像绑定普通数据一样在模板中绑定计算属性。

适用于【页面 | 组件】

示例：

  1. <template>
  2.   <view>
  3.     <text>Original message: "{{ message }}"</text>
  4.     <text>Computed reversed message: "{{ reversedMessage }}"</text>
  5.   </view>
  6. </template>
  8. <script>
  9. import {createComponent} from '@mpxjs/core'
  10. createComponent({
  11.   data: {
  12.     message: 'Hello'
  13.   },
  14.   computed: {
  15.     // 计算属性
  16.     reversedMessage: function () {
  17.       return this.message.split('').reverse().join('')
  18.     }
  19.   },
  20.   ready() {
  21.     // 改变message后reversedMessage会同步更新，模板也会重新渲染
  22.     this.message = 'Hello world!'
  23.   }
  24. })
  25. </script>

watch

mpx为小程序原生组件提供了观察和响应上的数据变动的能力。虽然计算属性在大多数情况下已满足需求，但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

适用于【页面 | 组件】

例如：

  1. <template>
  2. <view>
  3.   <view>{{question}}</view>
  4.   <view>{{answer}}</view>
  5. </view>
  6. </template>
  8. <script>
  9. import {createComponent} from '@mpxjs/core'
  10. createComponent({
  11.   data: {
  12.     question: 'old',
  13.     answer: 'I cannot give you an answer until you ask a question!',
  14.     info: {
  15.       name: 'a'
  16.     },
  17.     arr: [{
  18.       age: 1
  19.     }]
  20.   },
  21.   watch: {
  22.     // 如果 `question` 发生改变，这个函数就会运行
  23.     question: function (newval, oldval) {
  24.       console.log(newval, ':',  oldval) // test:old
  25.       this.answer = 'Waiting for you to stop typing...'
  26.     },
  27.     question: {
  28.       handler (newval, oldval) {
  29.         console.log(newval, ':',  oldval) // test:old
  30.         this.answer = 'Waiting for you to stop typing...'
  31.       },
  32.       imeediate: true // 立即执行一次
  33.       // deep: true // 是否深度观察
  34.       // sync: true // 数据变化之后是否同步执行，默认是进行异步队列
  35.     },
  36.     'info.name' (val) {
  37.       // 支持路径表达式
  38.       console.log(val) // b
  39.     },
  40.     'arr[0].age' (val) {
  41.       // 支持路径表达式
  42.       console.log(val) // 100
  43.     },
  44.     'question, answer' (val, old) {
  45.       // 同时观察多个值, val为数组个数, question变化时
  46.       console.log(val) // ['test', 'I cannot give you an answer until you ask a question!']
  47.     }
  48.   },
  49.   attached () {
  50.     // 3s之后修改数据
  51.     setTimeout(() => {
  52.       this.changeData()
  53.     }, 3000)
  54.   },
  55.   methods: {
  56.     changeData() {
  57.       this.question = 'test'
  58.       this.info.name = 'b'
  59.       this.arr[0].age = 100
  60.     }
  61.   }
  62. })
  63. </script>

除了 watch 选项之外，您还可以使用命令式的 this.$watch API。

mixins

mixins 选项接受一个混合对象的数组。这些混合实例对象可以像正常的实例对象一样包含选项，他们将使用相同的选项合并逻辑合并。举例：如果你混合包含一个钩子而创建组件本身也有一个，两个函数将被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

适用于【APP | 页面 | 组件】

示例：

  1. // mixin.js
  2. export default {
  3.   data: {
  4.     list: {
  5.       'phone': '手机',
  6.       'tv': '电视',
  7.       'computer': '电脑'
  8.     }
  9.   },
  10.   ready () {
  11.     console.log('mixins ready:', this.list.phone)
  12.   }
  13. }
  1. <template xmlns="">
  2.   <view class="list">
  3.     <view wx:for="{{list}}">{{item}}</view>
  4.   </view>
  5. </template>
  7. <script>
  8.   import {createComponent} from '@mpxjs/core'
  9.   import mixin from './mixin'
  10.   createComponent({
  11.     mixins: [mixin],
  12.     ready () {
  13.       console.log('component ready:', this.list.tv)
  14.     }
  15.   })
  16. </script>

输出结果为

mixins ready: 手机
component ready: 电视

页面生命周期

除了小程序自定义组件本身的生命周期外，mpx提供了两个页面生命周期钩子，pageShow和pageHide，用于监听当前所属页面的显示或隐藏状态。

适用于【组件】

<template>
  <view>组件新生命周期</view>
</template>

<script>
import {createComponent} from '@mpxjs/core'
createComponent({
  pageShow () {
    // 所在页面显示之后就会执行一次
    console.log('page show')
  },
  pageHide () {
    // 页面切入后台执行
    console.log('page hide')
  }
})
</script>