浅析Vue实例以及生命周期


Posted in Javascript onAugust 14, 2018

最简单的Vue 实例

//html
<div id="app">
 {{message}}
</div>

//javascript
var vm = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

由于 Vue 借鉴了 MVVM 的思想,这里的字符串 "Hello Vue!" 就相当于 Model,DOM 就相当于 View,Vue 实例 "vm" 则是起连接 Mode 和 View 作用的 ViewModel,因此我们才得以通过数据驱动视图,而不需要关心它是怎么实现的,因为 Vue 已经帮我们做好了一切。

Vue 实例内置的属性和方法都是以 "$" 开头的,例如:vm.$data、vm.$el 等,另外选项并不等于实例,选项是通过 new Vue() 构造函数时传入的参数对象,但是实例可以从暴露的接口访问某些选项的值,例如:console.log(vm.$data.message) 输出 "Hello Vue!"。

实例的生命周期

在创建实例的过程中,Vue 提供了一些生命周期钩子函数,允许我们再某一特定阶段执行一些额外的操作:

beforeCreate:

在实例初始化之后,数据绑定之前会调用这个函数,例如:

//javascript
var vm = new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!'
 },
 beforeCreate: function() {
  console.log(this.message); //undefind
 }
})

需要说明的有两点:1、这里的 "this" 指向 Vue 实例,即 "vm",2、Vue 实例同时也代理了选项中 "data" 下的所有属性,也就是说 vm.message == vm.$data.message == "Hello Vue!",但是因为在这个阶段数据并没有绑定到 Vun 实例上面,所以输出 "undefind"。在这之前数据会先保存在 vm.$options 中,如果要在这个阶段获取数据,可以先通过 vm.$options.data() 方法,返回 "data" 对象,通过 vm.$options.data().message 返回对应的值。
在这个阶段可以做一些不需要数据的工作,比如说开启全局 loading 效果。

created:

在实例创建完成,数据绑定之后会调用这个函数,此时 console.log(this.message) 输出正确的值 "Hello Vue!"。
在这个阶段,数据已经初始化为选项中的默认值,但是真实的数据还要通过 ajax 从后端数据库获取,因此这个阶段可以向后端发请求获取数据,然后绑定到对应属性上。

之后判断选项中有无 "el" 属性(作为 Vue 实例的挂载目标,在这里就是 id 为 app 的 div 标签),如果没有,则需要手动调用 vm.$mount(el) 方法指定挂载的目标;

接着判断选项中有无 "template" 属性,如果没有,则直接使用 "el" 属性指定的挂载目标,如果有,那么就用 "template" 属性指定的字符串模板替换挂载目标,挂载目标中的所有内容将被忽略;

beforeMount:

在实例挂载之前调用。

在这个阶段可以移除全局 loading 效果。

mounted:

在实例挂载之后调用。

在这个阶段页面已经加载完毕,可以对 DOM 进行操作。

beforeUpdate:

在数据更新时调用。

在这个阶段可以在数据更新前访问现有的 DOM。

updated:

在数据更新之后调用。

在这个阶段可以对更新后的 DOM 进行操作。

Javascript 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
Vue.js表单控件实践
Oct 27 Javascript
JavaScript实现分页效果
Mar 28 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
js实现九宫格布局效果
May 28 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 #Javascript
详解angular应用容器化部署
Aug 14 #Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 #Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 #Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 #Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 #Javascript
You might like
php中json_encode中文编码问题分析
2011/09/13 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python版本的读写锁操作方法
2016/04/25 Python
python web框架 django wsgi原理解析
2019/08/20 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
建筑公司员工自我鉴定
2014/04/08 职场文书
优秀团员事迹材料
2014/12/25 职场文书
求职简历自我评价范文
2015/03/10 职场文书
天气温馨提示语
2015/07/14 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
python爬虫selenium模块详解
2021/03/30 Python
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server