另一个维度：cocos-2d VS vue

最近再看cocos-2d的东西，期间得到了同事和老板的支持，在此感谢。
之前一直在做vue网页，现在看游戏cocos-2d这块，刚接触肯定有点不适应。cocos-2d多了很多感念：导演、场景、节点等。
这里多说点，cocos creator是一个官方的编辑器，但自从这个编辑器出现之后，很少有人直接用cocos-2d js做开发了，而是在creator里做cocos-2d js项目,cocos-2djs那一套繁琐的开发流程和UI制作，被creator极大的简化了。用了编辑器后，项目目录都有不同。所以，从这个方面来讲，creator并不是一个简单的编辑器，他还做了很多流程上的东西，这点区别于文本编辑器等。官网也解释了2者的区别：

1.希望配合 Cocos2d-x 来使用 Cocos Creator：Cocos Creator 内部已经包含完整的 JavaScript 引擎和 cocos2d-x 原生引擎，不需要额外安装任何 cocos2d-x 引擎或 Cocos Framework。
2.无关省略
3.在编码的时候直接查看 Cocos2d-JS 的 API：Cocos Creator 可以说脱胎自 Cocos2d-JS，它们的API一脉相承，有很多相同的部分，但由于使用了全新的组件化框架，两者的API是有差异的，并且无法互相兼容
4.希望将旧的 Cocos2d-JS 游戏直接运行到 Cocos Creator 上：由于两者的 API并不是100%兼容，所以这点是做不到的
5.用继承的方式扩展功能：在 Cocos2d-JS 中，继承是用来扩展节点功能的基本方法，但是在 Cocos Creator 中，不推荐对节点进行继承和扩展，节点只是一个实体，游戏逻辑应该实现在不同的组件中并组合到节点上

Cocos Creator 提供的工作流和开发思想和以往的 Cocos2d-x 引擎是存在很大差别的。
所以，建议直接上cocos creator，本文的主角也是cocos creator。
这些概念熟悉了这些之后，开始上手第一个项目，也是官网上的一个例子。

我们来看下cocos-2d的组件脚本（javascript）：

cc.Class({
	extends: cc.Component,

	properties: {

	},

	// use this for initialization
	onLoad: function () {

	},
	start:function{

	}
	// called every frame
	update: function (dt) {

	},
	lateUpdate:function () {

	}
});

vue的：

export default{
	data(){
		return{

		}
	},
	created(){

	},
	mounted(){

	},
	methods:{

	}
}

　　

2者是不是很像，他们都有自己生命周期函数：

onLoad vs created

start vs mounted

upadte vs update
cocos-2d的update是每一帧执行，是主动的，在方法里改变数据。

vue的update是被动的，数据变化后引起update执行。

lateupdate vs $nextTick

在所有组件的 update 都执行完之后才进行其它操作，那就需要用到 lateUpdate 回调；

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

除此之外，还有他们的数据放的地方：
properties vs data
cocos-2d的数据并不一定都在properties里，可以直接赋值给this。区别是在properties可在编辑器面板的属性检查器里配置，直接赋值的只能在代码里修改。

当然，这个比较并不准确，只是说明他们有相似的地方，至少在生命周期函数上。
vue这种前端mvvm框架是数据改变引发UI渲染，cocos-2d也是这样的，只需要关注数据即可。
其实，cocos-2d也是支持es6写法的，根目录下的jsconfig.json

{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"experimentalDecorators": true
},
"exclude": [
"node_modules",
".vscode",
"library",
"local",
"settings",
"temp"
]
}

　　

es6语法的js组件脚本：

const {ccclass, property} = cc._decorator;
@ccclass
export default class Game extends cc.Component {
	@property(cc.Prefab)
	starPrefab = null;
	onLoad(){

	}
	start(){

	}
	update(){

	}
	lateUpdate(){

	}
}　　

这么看来，在JavaScript这块，两个的写法确实很像。

目前来说，官网的文档示例和提供的范例里基本都是es5的写法，es6的例子比较少。不过，这不重要。