Vue.js每天必须学习的构造函数和生命周期

构造器

每个Vue.js应用程序都是从通过构造函数Vue创建Vue的根实例开始的：

Var vm=new Vue({ //option})一个Vue实例实际上是一个用MVvm模式描述的ViewModel所以变量名vm经常在文档中使用。

实例化Vue时，需要传入一个option对象，该对象可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。所有选项都可以在API文档中查看。

您可以扩展Vue构造函数来创建具有预定义选项的可重用组件构造函数：

var MyComponent=vue . extend({//extend option })//将使用预定义的扩展选项创建“my component”的所有实例。var my component instance=new my component()虽然扩展实例可以按命令创建，但在大多数情况下，组件构造函数都是作为自定义元素注册的，然后在模板中以声明方式使用。稍后我们将详细解释组件系统。现在你只需要知道所有的Vue.js组件实际上都是扩展的Vue实例。

属性和方法

每个Vue实例代表其数据对象中的所有属性：

vardata={ a : 1 } varvm=new vue({ data : data })VM . a==data . a//-true//设置属性也会影响原始数据vm.a=2data.a //-2//.反之亦然如果一个新属性在创建后被添加到实例中，它将不会触发视图更新。我们稍后将详细讨论响应系统。

除了这些数据属性，Vue实例还公开了一些有用的实例属性和方法。这些属性和方法以$作为前缀，以区别于代理的数据属性。例如：

var数据={ a : 1 } var VM=new Vue({ El : ' # example '，Data:data}) vm。$ data===data///-true VM。$ El===document . getelementbyid(' example ')///-true/$ watch是一个实例方法vm。$watch('a '，函数(newVal，OldVal) {//此回调将在` vm.a ` changes}之后调用)参考API文档查看所有实例属性和方法。

实例生命周期

Vue实例在创建时有一系列初始化步骤——。例如，它需要建立数据观察、编译模板和创建必要的数据绑定。在这个过程中，它还会调用一些生命周期钩子来给定制逻辑一个运行的机会。例如，创建实例后调用创建的钩子：

var vm=new vue({ data : { a : 1 }，created: function () {//` this '指向VM实例console . log(' a is 3360 ' this . a)})///-' a is 3360 1 '也有一些其他的钩子。在实例中，这个钩子指向调用它的Vue实例。有些用户可能会问Vue.js是否有“控制器”的概念。答案是否定的，组件的定制逻辑可以在这些钩子中拆分。

生命周期图

下图说明了实例的生命周期。你不需要一下子明白所有的事情，但是以后会有帮助的。

本文已整理成《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。