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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

什么是MVVM

MVVMModel 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实例。

创建一个Vue实例

创建一个Vue实例,大致会经过四个过程:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部