new Vue(options)中option
2019-4-14
Vue的核心是数据驱动，在template中实现视图逻辑，在javascript中实现业务逻辑。要通过模板template将数据显示在页面上，需要使用指令来实现。
在前面我们已经总结了模板中指令的相关内容。从现在开始，我们关注javascript业务逻辑层。也是就是数据驱动中数据来源和处理。
Vue在实例创建过程中，通过options配置对象传入数据。vue核心层viewModel部分会解析处理这个配置对象，使之能够关联模板，实现数据驱动的效果。
我们先看下在构建一个实例new Vue(options)中传入的options对象基本包含哪些内容：
<div id="app"></div>
var APP = new Vue({
// 挂载点
el: "#app",
// 模板的依赖：组件、自定义指令、过滤器
components: {},
directives: {},
filters: {},
// 需合并的外部选项：混入
mixins: {},
// 本地状态响应式选项：数据、计算属性
data: {},
computed: {},
// 响应式状态触发回调：监听器
watch: {},
// 生命周期函数：实例创建各阶段的回调
beforeCreate: function () {},
created: function () {},
beforeMount: function () {},
mounted: function () {},
beforeUpdate: function () {},
updated: function () {},
activated: function () {},
deactivated: function () {},
beforeDestory: function () {},
destoryed: function () {},
// 事件处理函数：方法
methods: {},
// 声明式渲染：template/render 二选一
template: `<div>
<div>日期：{{ day | formatTimestampToDate }}</div>
<button type="button" @click="addOneDay">add one day</button>
</div>
`,
render: h => h(), //渲染：与template 二选一
})
上面选项顺序遵守vue官方推荐,具体查看 vue编码风格指南
后面我们对配置对象options进行理解：