Merge pull request #508 from Meituan-Dianping/develop

aOrz · web-flow · commit 29cee1a90083 · 2018-05-19T22:05:47.000+08:00
Develop
diff --git a/dist/vue.common.js b/dist/vue.common.js
@@ -4629,7 +4629,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /*  */
 
diff --git a/dist/vue.esm.js b/dist/vue.esm.js
@@ -4627,7 +4627,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /*  */
 
diff --git a/dist/vue.js b/dist/vue.js
@@ -4618,7 +4618,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /*  */
 
diff --git a/dist/vue.min.js b/dist/vue.min.js
diff --git a/dist/vue.runtime.common.js b/dist/vue.runtime.common.js
@@ -4625,7 +4625,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /*  */
 
diff --git a/dist/vue.runtime.esm.js b/dist/vue.runtime.esm.js
@@ -4623,7 +4623,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /*  */
 
diff --git a/dist/vue.runtime.js b/dist/vue.runtime.js
@@ -4614,7 +4614,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /*  */
 
diff --git a/dist/vue.runtime.min.js b/dist/vue.runtime.min.js
diff --git a/packages/mpvue-template-compiler/build.js b/packages/mpvue-template-compiler/build.js
@@ -4580,7 +4580,7 @@ var component = {
     var mpcomid = ast.mpcomid;
     var slots = ast.slots;
     if (slotName) {
-      attrsMap['data'] = "{{...$root[$p], $root}}";
+      attrsMap['data'] = "{{...$root[$k], $root}}";
       attrsMap['is'] = "{{" + slotName + "}}";
     } else {
       var slotsName = getSlotsName(slots);
diff --git a/packages/mpvue-template-compiler/package.json b/packages/mpvue-template-compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mpvue-template-compiler",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "mpvue template compiler for Vue",
   "main": "index.js",
   "repository": {
diff --git a/packages/mpvue/index.js b/packages/mpvue/index.js
@@ -4144,7 +4144,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.9';
+Vue$3.mpvueVersion = '1.0.11';
 
 /* globals renderer */
 
@@ -4974,6 +4974,48 @@ function getGlobalData (app, rootVueVM) {
   }
 }
 
+/**
+ * 格式化 properties 属性，并给每个属性加上 observer 方法
+ */
+function normalizeProperties (vm) {
+  var properties = vm.$options.properties || {};
+  var res = {};
+  var val;
+  var loop = function ( key ) {
+    val = isPlainObject(properties[key])
+      ? properties[key]
+      : { type: properties[key] };
+    res[key] = {
+      type: val.type,
+      value: val.value,
+      observer: function observer (newVal, oldVal) {
+        vm[key] = newVal; // 先修改值再触发原始的 observer，跟 watch 行为保持一致
+        if (typeof val.observer === 'function') {
+          val.observer.call(vm, newVal, oldVal);
+        }
+      }
+    };
+  };
+
+  for (var key in properties) loop( key );
+  return res
+}
+
+/**
+ * 把 properties 中的属性 proxy 到 vm 上
+ */
+function initMpProps (vm) {
+  var mpProps = vm._mpProps = {};
+  var keys = Object.keys(vm.$options.properties || {});
+  keys.forEach(function (key) {
+    if (!(key in vm)) {
+      proxy(vm, '_mpProps', key);
+      mpProps[key] = undefined; // for observe
+    }
+  });
+  observe(mpProps, true);
+}
+
 function initMP (mpType, next) {
   var rootVueVM = this.$root;
   if (!rootVueVM.$mp) {
@@ -5041,7 +5083,11 @@ function initMP (mpType, next) {
       }
     });
   } else if (mpType === 'component') {
+    initMpProps(rootVueVM);
+
     global.Component({
+      // 小程序原生的组件属性
+      properties: normalizeProperties(rootVueVM),
       // 页面的初始数据
       data: {
         $root: {}
@@ -5192,6 +5238,7 @@ function getVmData (vm) {
   var dataKeys = [].concat(
     Object.keys(vm._data || {}),
     Object.keys(vm._props || {}),
+    Object.keys(vm._mpProps || {}),
     Object.keys(vm._computedWatchers || {})
   );
   return dataKeys.reduce(function (res, key) {
diff --git a/packages/mpvue/package.json b/packages/mpvue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mpvue",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Vue Runtime for mini program",
   "main": "index.js",
   "repository": {
diff --git a/src/platforms/mp/compiler/codegen/convert/component.js b/src/platforms/mp/compiler/codegen/convert/component.js
@@ -14,7 +14,7 @@ export default {
   convertComponent (ast, components, slotName) {
     const { attrsMap, tag, mpcomid, slots } = ast
     if (slotName) {
-      attrsMap['data'] = `{{...$root[$p], $root}}`
+      attrsMap['data'] = `{{...$root[$k], $root}}`
       attrsMap['is'] = `{{${slotName}}}`
     } else {
       const slotsName = getSlotsName(slots)
diff --git a/src/platforms/mp/runtime/lifecycle.js b/src/platforms/mp/runtime/lifecycle.js
@@ -1,4 +1,7 @@
-import { handleError } from '../../../core/util/index'
+import { isPlainObject } from 'shared/util'
+import { handleError } from 'core/util/index'
+import { observe } from 'core/observer/index'
+import { proxy } from 'core/instance/state'
 
 export function callHook (vm, hook, params) {
   let handlers = vm.$options[hook]
@@ -37,6 +40,46 @@ function getGlobalData (app, rootVueVM) {
   }
 }
 
+/**
+ * 格式化 properties 属性，并给每个属性加上 observer 方法
+ */
+function normalizeProperties (vm) {
+  const properties = vm.$options.properties || {}
+  const res = {}
+  let val
+  for (const key in properties) {
+    val = isPlainObject(properties[key])
+      ? properties[key]
+      : { type: properties[key] }
+    res[key] = {
+      type: val.type,
+      value: val.value,
+      observer (newVal, oldVal) {
+        vm[key] = newVal // 先修改值再触发原始的 observer，跟 watch 行为保持一致
+        if (typeof val.observer === 'function') {
+          val.observer.call(vm, newVal, oldVal)
+        }
+      }
+    }
+  }
+  return res
+}
+
+/**
+ * 把 properties 中的属性 proxy 到 vm 上
+ */
+function initMpProps (vm) {
+  const mpProps = vm._mpProps = {}
+  const keys = Object.keys(vm.$options.properties || {})
+  keys.forEach(key => {
+    if (!(key in vm)) {
+      proxy(vm, '_mpProps', key)
+      mpProps[key] = undefined // for observe
+    }
+  })
+  observe(mpProps, true)
+}
+
 export function initMP (mpType, next) {
   const rootVueVM = this.$root
   if (!rootVueVM.$mp) {
@@ -100,7 +143,11 @@ export function initMP (mpType, next) {
       }
     })
   } else if (mpType === 'component') {
+    initMpProps(rootVueVM)
+
     global.Component({
+      // 小程序原生的组件属性
+      properties: normalizeProperties(rootVueVM),
       // 页面的初始数据
       data: {
         $root: {}
diff --git a/src/platforms/mp/runtime/render.js b/src/platforms/mp/runtime/render.js
@@ -25,6 +25,7 @@ function getVmData (vm) {
   const dataKeys = [].concat(
     Object.keys(vm._data || {}),
     Object.keys(vm._props || {}),
+    Object.keys(vm._mpProps || {}),
     Object.keys(vm._computedWatchers || {})
   )
   return dataKeys.reduce((res, key) => {
diff --git a/test/mp/compiler/index.spec.js b/test/mp/compiler/index.spec.js
@@ -528,7 +528,7 @@ describe('slot', () => {
   it('插槽', () => {
     assertCodegen(
       `<div><slot>test</slot></div>`,
-      `<template name="a"><view class="_div testModuleId"><template name="default">test</template><template data="{{...$root[$p], $root}}" is="{{$slotdefault || 'default'}}"></template></view></template>`,
+      `<template name="a"><view class="_div testModuleId"><template name="default">test</template><template data="{{...$root[$k], $root}}" is="{{$slotdefault || 'default'}}"></template></view></template>`,
       {
         name: 'a',
         moduleId: 'testModuleId'
@@ -539,7 +539,7 @@ describe('slot', () => {
   it('使用', () => {
     assertCodegen(
       `<div><slot name="w">test</slot></div>`,
-      `<template name="a"><view class="_div"><template name="w">test</template><template data="{{...$root[$p], $root}}" is="{{$slotw || 'w'}}"></template></view></template>`,
+      `<template name="a"><view class="_div"><template name="w">test</template><template data="{{...$root[$k], $root}}" is="{{$slotw || 'w'}}"></template></view></template>`,
       {
         name: 'a'
       }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mpvue-template-compiler",`
`3`		`- "version": "1.0.11",`
	`3`	`+ "version": "1.0.12",`
`4`	`4`	`"description": "mpvue template compiler for Vue",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"repository": {`