data的值如何初始化vue_从零单排vue第九课Vue实例及生命周期

前期回顾

上一节课我们重点学习了子组件如何与父组件通信&＃xff0c;我们使用$emit方法在子组件中触发一个事件&＃xff0c;然后在父组件中接收它。本节课我们来深入了解下vue实例以及它的生命周期是怎么样的&＃xff1f;

创建一个Vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的:

当创建Vue实例时&＃xff0c;你可以传入一个选项对象&＃xff0c;例如前面我们使用过的el、template、data、methods、props。其中el、template这个选项叫做DOM选项&＃xff0c;data、methods、props叫做数据选项&＃xff0c;完整的选项列表可以查看vue官方的API文档。

数据和方法

当一个 Vue 实例被创建时&＃xff0c;它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时&＃xff0c;视图将会产生“响应”&＃xff0c;即匹配更新为新的值。

除了数据属性&＃xff0c;Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $&＃xff0c;以便与用户定义的属性区分开来。

如下最简单的hello world代码&＃xff1a;

我们在浏览器控制台中输入vm&＃xff0c;可以看到所有有关该实例的信息&＃xff0c;包括实例属性和方法。

也可以在vue官方API文档中看到有关用法。

实例的生命周期

生命周期是一个很有用的概念。在vue中&＃xff0c;实例被创建出来&＃xff0c;从创建到销毁&＃xff0c;会经历一系列过程&＃xff0c;在这个过程中&＃xff0c;系统会调用相应的生命周期钩子。生命周期钩子是在Vue实例生命周期的某个阶段执行的已定义方法。从初始化开始到它被破坏时&＃xff0c;实例都会遵循不同的生命阶段。

可以看到&＃xff0c;vue实例在每个重要阶段都有自己的生命周期钩子。可能很多人会问&＃xff0c;这些函数方法有什么用呢&＃xff1f;

我们在开发一个项目的时候&＃xff0c;第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子&＃xff0c;我们可以利用这些钩子完成一些初始化的工作&＃xff0c;利用这些钩子我们就能控制页面加载的过程&＃xff0c;能帮助我们形成更好的功能逻辑。

生命周期钩子的一些使用方法&＃xff1a; beforecreate : 可以在这加个loading事件&＃xff0c;在加载实例时触发 created : 初始化完成时的事件写在这里&＃xff0c;如在这结束loading事件&＃xff0c;异步请求也适宜在这里调用。 mounted : 挂载元素&＃xff0c;获取到DOM节点。updated : 如果对数据统一处理&＃xff0c;在这里写上相应函数。 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom。

欢迎关注微信公众号:从零单排vue&＃xff0c;获取最新的vue学习资源。公众号学习资源正在建设中&＃xff0c;请耐心等待。