Vue App

每个Vue会应用通过new Vue()方法创建一个根Vue实例，创建Vue实例时可传入一个选项对象。
Vue虽然并未完全遵循MVVM模型，但Vue设计也受它启发。
Vue应用通过new Vue()创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。
所有Vue组件都是Vue实例，并接受相同的选项对象。

import Vue from "vue";
const vm = new Vue(options={});

选项对象`options`

选项对象的属性涉及到的参数可划分为五类，分别是数据、DOM、生命周期钩子、资源、组合、其它。

数据

数据	描述
data	Vue实例的数据对象
props	用于接收来自父组件的数据
propsData	创建Vue实例时传递给props的参数，方便测试。
computed	计算属性，会被混入到Vue实例中。
methods	方法，将被混入到Vue实例中。
watch	对象，键是需要观察的表达式，值是对应的回调函数。

data

当Vue实例被创建时，它向Vue的响应式系统中加入了data对象中能找到的所有属性。当属性发生改变时，视图产生响应，即匹配更新为新值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
    </div>
    <script>
        //数据对象
        var user = {username:'alice'};
        //将数据对象添加到Vue实例中
        var vm = new Vue({
            data:user
        });
        console.log(vm.username === user.username);

        //设置属性会影响到原始数据，反之亦然。
        vm.username = 'ben';
        console.log(user.username);
    </script>
</body>
</html>

当数据改变时，视图重渲染。只有当实例被创建时data中存在的属性才是响应式的。即若添加新属性则它的改动不会触发任何视图的更新。

若你之后需某属性，之前定义时设置初始值即可。

var vm = new Vue({
    data:{
        error:null,
        list:[],
        count:0,
    }
});

唯一的例外是使用Object.freeze()，会阻止修改现有属性，也意味着响应系统无法再追踪变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{data.message}}</p>
        <button @click="data.message='world'">change</button>
    </div>
    <script>
        var data = {message:'hello'};
        var vm = new Vue({
            el:'#app',
            data(){
                return {data};
            }
        });
    </script>
</body>
</html>

除了数据属性，Vue实例还暴露了一些有用的实例属性和方法。它们都有前缀$，以便与用户自定义的属性区分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{data.message}}</p>
        <input type="text" v-model="data.message">
    </div>
    <script>
        var data = {message:'hello'};
        var vm = new Vue({
            el:'#app',
            data:data
        });
        //Vue实例实例属性
        console.log(vm.$el===document.getElementById('app'));//output:true
        console.log(vm.$data===data);//output:true
        //Vue实例方法
        vm.$watch('message', function(newVal, oldVal){
            console.log('message change');//回调将在vm.message改变后调用
        });
    </script>
</body>
</html>

DOM

DOM	描述
el	已存在的页面DOM元素的CSS选择器或HTMLElement实例，作为Vue实力的挂载目标。
render	字符串模板代替方案

el

如果在Vue实例化时存在el选项，Vue实例将立即进入编译过程。否则需要显示调用vm.$mount()方法手动开启编译。

const vm = new Vue({
  el:"#app"
});

const vm = new Vue();
vm.$mount("#app");

Vue实例对象vm提供了$muont生命周期方法，如果vm对象在实例化时没有收到el选项，则会处于“未挂载”的状态，即没有关联的DOM元素。此时可使用vm.$mount(elementOrSelector)方法手动挂载一个尚未挂载的实例。若没有提供elementOrSelector参数，模板将被渲染为文档之外的元素。

例如：入口文件main.js

import Vue from 'vue';
import Axios  from "axios";

import App from './App.vue';
import router from "./router.js";

Vue.config.productionTip = false;
Vue.prototype.axios = Axios;

//创建vue应用实例并挂在到#index元素上
const vm = new Vue({render:h=>h(App), router:router});//未挂载状态
//手工挂载vm实例
vm.$mount('#index');

$mount方法会返回vm实力自身，因此可链式调用其他实例方法。

render

render作为字符串模板的替代方案，render渲染函数接收一个createElement方法作为第一个参数用来创建VNode节点。若组件是一个函数组件则render渲染函数还会接收一个额外的context上下文参数，为没有实例的函数组件提供上下文信息。

生命周期钩子

每个Vue实例在被创建时都要经过一系列初始化过程--例如，需设置数据监听、编译、模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给用户在不同阶段添加自己的代码的机会。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{data.message}}</p>
        <input type="text" v-model="data.message">
    </div>
    <script>
        var data = {message:'hello'};
        var vm = new Vue({
            el:'#app',
            data:data,
            created:function(){
                console.log('created', this.message);
            },
            mounted:function(){
                console.log('mounted', this.message);
            },
            updated:function(){
                console.log('updated', this.message);
            },
            destroyed:function(){
                console.log('destroyed', this.message);
            }
        });
    </script>
</body>
</html>

created钩子可用来在实例被创建后执行代码，其他钩子在实例生命周期不同阶段被调用，如mounted、updated、destroyed。生命周期钩子的this上下文指向调用它的Vue实例。

不要在选项属性或回调上使用箭头函数，比如created:()=>console.log(this.message)。因为箭头函数是和父级上下文绑定在一起的，this不会是如你所期待的Vue实例，经常导致Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.method is not a function之类的错误。

Vue实例生命周期

Vue App

选项对象options

数据

data

DOM

el

render

生命周期钩子

推荐阅读更多精彩内容

选项对象`options`