浅析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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
angularJS中router的使用指南
Feb 09 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 Javascript
快速解决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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Python Web编程之WSGI协议简介
2018/07/18 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
Django框架请求生命周期实现原理
2020/11/13 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
小学校园活动策划
2014/01/30 职场文书
餐饮投资计划书
2014/04/25 职场文书
城管个人总结
2015/02/28 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
欢迎新生标语2015
2015/07/16 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
Java字符串逆序方法详情
2022/03/21 Java/Android
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
数据设计之权限的实现
2022/08/05 MySQL