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动画效果代码
Jul 20 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
基于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核心代码分析require和include的区别
2011/01/02 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php cli 小技巧
2013/06/03 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
深入理解Promise.all
2018/08/08 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Pytorch释放显存占用方式
2020/01/13 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
机电专业体育教师求职信
2013/09/21 职场文书
精彩自我鉴定
2014/01/16 职场文书
年终总结会议主持词
2014/03/17 职场文书
网络技术专业求职信
2014/07/13 职场文书
出国签证在职证明范本
2014/11/24 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
2016高考感言
2015/08/01 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书