vue-learning：14 - js - new Vue，options中option

2019-4-14

Vue的核心是数据驱动，在template中实现视图逻辑，在javascript中实现业务逻辑。要通过模板template将数据显示在页面上，需要使用指令来实现。

在前面我们已经总结了模板中指令的相关内容。从现在开始，我们关注javascript业务逻辑层。也是就是数据驱动中数据来源和处理。

Vue在实例创建过程中，通过options配置对象传入数据。vue核心层viewModel部分会解析处理这个配置对象，使之能够关联模板，实现数据驱动的效果。

我们先看下在构建一个实例new Vue(options)中传入的options对象基本包含哪些内容：

<div ></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进行理解：

1. el:'' 挂载点
2. components: {} 组件
3. directives: {} 自定义指令
4. filters: {} 过滤器
5. mixins: {} 混入
6. data: {} 数据
7. computed: {} 计算属性
8. watch: {} 监听器
9. methods: {} 方法
10. template: '' 模板
11. render() 函数渲染