vue-learning：14 - js - new Vue(options)中option

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進行理解：

1. el:'' 掛載點
2. components: {} 組件
3. directives: {} 自定義指令
4. filters: {} 過濾器
5. mixins: {} 混入
6. data: {} 數據
7. computed: {} 計算屬性
8. watch: {} 監聽器
9. methods: {} 方法
10. template: '' 模板
11. render() 函數渲染