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实例和生命周期

从图中我们可以清楚的得知,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'牵着Viewdata: {}牵着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

©️李联华的博客网 当前IP地址:44.200.27.215,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/learning-notes-for-vue-2-0-vue-instance-and-life-cycle.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

留下评论

Loading...