Vue 2.0的学习笔记： Vue实例和生命周期

Vue实例是进入Vue的第一步，创建一个Vue的实例也是学习Vue的起点。实际上，Vue框架的入口就是Vue实例，其实就是框架中的View Model，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。Vue实例虽然没有完全遵循MVVM模型，但Vue的设计无疑受到了它的启发。那么我们就从MVVM模型的概念开始，进入有关于Vue实例和生命周期的学习之旅行。

什么是MVVM

MVVM是Model View ViewModel的简写。维基百科是这样描述的：

MVVM 是 Martin Fowler 的 Presentation Model 设计模式的一个演变。和 Fowler 的 Presentation Model 一样，MVVM 抽象了 view 的状态和行为。但是，和 Presentation Model 抽象一个 view 不依赖于一个特定的UI平台的做法相反，MVVM是由微软WPF 和 Silverlight 的架构师Ken Cooper 和 Ted Peters开发，是一种简化用户界面的事件驱动编程方式。

Vue实例虽然没有完全遵循MVVM模型，但Vue的设计无疑受到了它的启发。用一张图来阐述，可能更清晰些：

从图中我们可以清楚的得知，Vue实际上对应的就是MVVM中的VM，也就是ViewModel。因此在官方文档中经常可以看到vm这个变量名来表示Vue实例。

对设计模式多少了解的同学，应该知道View和Model是什么：

• View：是看得到的，即视图，用到Vue的项目中来，它应该是“模板”。也就是用来挂载Vue实例的一个DOM元素，通常在项目根目录中index.html文件中出现，比如<div id="app"></div>。
• Model：即模型（或数据），跟MVC中的Model一样，就是想要显示到模型上的数据，也是我们需要在程序生命周期中可能需要更新数据

在MVVM模型中，View和Model是分开的，两者不需要相互关心。但两者分开之后得通过ViewModel连接起来。比如：

let app = new Vue({
    el: '#app',
    data() {
        return {
            name: '大漠',
            count: 0
        }
    },
    methods: {
        increase: function () {
            this.count++
        }
    }
})

上面的代码中el:'#app'牵着View，data: {}牵着Model，而类似methods充当一个控制者（Controller）的角色，可以修改Model的值。

Vue的实例

简单的了解了MVVM的概念，我们开始来学习Vue的实例。事实上：每个Vue的应用都是通过Vue()函数创建一个新的Vue实例开始的。创建了一个Vue实例，其实就创建了一个ViewModel。

先来回忆JavaScript中的构造函数：

所谓”构造函数”，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

比如：

function App() {
    // ...
}

我们知道App()是一个函数，在这个App()函数前加上new关键词，就把这个函数实例化了：

new App()

在Vue中，我们只需要直接new Vue()就可以实例化一个Vue对象：

let app = new Vue({
    // 选项
})

注意：官网方档用的是vm，出于个人爱好问题，我喜欢用app来表示。

在实例化Vue时，需要传入一个选项对象，它可以包含数据data、模板template、挂载元素el、方法methods、生命周期钩子等选项。在实例化Vue的选项时，需要特别注意的是含有this的函数，大多不要使用ES6箭头函数，因为我们期望this指向的是Vue实例。

著作权归作者所有。
原文: https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html © w3cplus.com

• 洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
• 蓝罐（Kjeldsens）曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
• 适用于新款车载手机支架无线器快充智能自动感应汽车
• 皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴