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 相关文章推荐
浅谈Javascript 执行顺序
Dec 18 Javascript
iframe实用操作锦集
Apr 22 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
vue.js多页面开发环境搭建过程
Apr 24 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开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
优化Python代码使其加快作用域内的查找
2015/03/30 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
Python全栈之列表数据类型详解
2019/10/01 Python
python实现简单遗传算法
2020/09/18 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
四年大学自我鉴定
2014/02/17 职场文书
青年文明号创建承诺
2014/03/31 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
群众路线个人整改方案
2014/10/25 职场文书
捐书仪式主持词
2015/07/04 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
MySQL添加索引特点及优化问题
2022/07/23 MySQL