Vue.js实例方法之生命周期详解


Posted in Javascript onJuly 03, 2017

本文主要给大家介绍的是关于Vue.js实例方法之生命周期的相关内容,分享出来供大家参考学习,学习的朋友们下面来一起看看详细的介绍:

一、$mount()挂载方法

$mount是用来挂载扩张的。如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

比如我们扩张了一个全局组件,通过$mount手动的挂载到DOM上,也就生成了一个Vue实例。

<div id="#app"></div>

扩张一个全局组件,并且挂载到DOM上。

//扩张全局的组件
var navBar = Vue.extend({
 template: `<div>{{ title }}</div>`,
 data(){
 return {
  title: 'Vue 扩展的全局组件'
 }
 },
 mounted(){
 console.log('挂载上了')
 }
})

//使用全局扩张的组件,挂载到id为#app的DOM上(会替换#app)
var vm = new navBar().$mount('#app');

//或者
var vm = new navBar({el: "#app"})

如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的的元素,并且必须使用原生DOM API把它插入文档中。

//在文档之外渲染,并且挂载
var navbar = new navBar().$mount()
document.getElementById('app').appendChild(navbar.$el)

二、$destroy()销毁方法

作用: 完全销毁一个实例。

Vue 实例销毁后调用。调用后,Vue 实例相关的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

<div id="app">

</div>
<button onclick="destroy()">销毁</button>

在组件中挂载destroyed生命周期钩子

var navBar = Vue.extend({
 template: `<div>
   <div>{{ title }}</div>
   <h2>{{ num }}</h2>
   <button @click = 'add'>add</button>
  </div>`,
 data(){
 return {
  title: 'Vue 全局扩展组件',
  num: 10
 }
 }
 destroyed(){
 console.log('销毁了')
 },
 methods: {
 add(){
  this.num++
 }
 }
})

//使用全局扩张的组件,挂载到id为#app的元素上
var vm = new navBar().$mount('#app');

//销毁
function destroy(){
 //点击按钮,销毁vm实例,控制台会输出‘销毁了',当再次点击的时候不会输出,而且点击add按钮,数量也不会改变,说明已经销毁了
 vm.$destroy()
}

Vue.js实例方法之生命周期详解

三、$forceUpdate()更新方法

该方法是迫使Vue实例重新渲染。注意:它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

看代码:

<button onclick="reload()">刷新</button>
//同样的,为了看到是否重新更新了数据,即是否执行了reload方法,我们在实例中添加updated选项
updated(){
 console.log('数据重新渲染了')
}

//三、更新数据方法
function reload(){
 vm.$forceUpdate()
}

点击更新按钮,控制台打印出updated钩子中的输出,说明Vue实例重新渲染了。

Vue.js实例方法之生命周期详解

四、$nextTick()数据修改方法

参数: {Function} [callback]

该方法是构造器data中的数据被修改后触发,相当于updated钩子函数,但还是有区别的:它是在updated钩子函数执行完之后执行其里边的回调函数。也就是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

methods: {
 add(){
  //更改数据
  this.num++
  this.$nextTick(function(){
   console.log('DOM现在更新了')
  })
 }
},
updated(){
 console.log('数据更新成:'+this.num)
}

Vue.js实例方法之生命周期详解

通过控制台的打印结果,可以看到,当数据改变时,updated钩子早于$nextTick中的回调。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js实现网站首页图片滚动显示
Feb 04 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 #Javascript
Async Validator 异步验证使用说明
Jul 03 #Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 #Javascript
Require.js的基本用法详解
Jul 03 #Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 #Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 #Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
javascript中数组和字符串的方法对比
2016/07/20 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
Python获取系统默认字符编码的方法
2015/06/04 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python实现TCP文件传输
2020/03/20 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
现金会计岗位职责
2013/12/05 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
六一儿童节活动总结
2014/08/27 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
python保存图片的四个常用方法
2022/02/28 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
MySQL索引失效场景及解决方案
2022/07/23 MySQL