vue的钩子函数
1.computed 计算属性
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue
1..aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
2.. aPlus(){
return this.$router.params
}
这两种方法都可以,平时我们可以只写get,可以写成2形式,省略set方法,但是如果我们相对我们的计算属性进行修改,这个set方法不能省略。
2.methods 方法
这里只提一下它和computed的区别
methods 和 computed 看起来可以做同样的事情,单纯看结果两种方式确实是相同的。
然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变
时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会
立即返回之前的计算结果,而不必再次执行函数。相比而言,只要发生重新渲染,method 调用总会执行
该函数。
3.watcher
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()
,遍历 watch 对象的每一个属性。
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
e: [
function handle1 (val, oldVal) { /* ... */ },
function handle2 (val, oldVal) { /* ... */ }
],
}
这里主要说深度watcher 加一个 deep:true,类似于深拷贝的深,可以监听数组和对象
4.生命周期函数
之前有总结过,这里说两点
Vue.nextTick(function () {
// DOM 更新了
})
在vue做表格的时候,一般在操作完之后,要更新列表刷新数据。但是我们本地做一些表格的变换,不想发请求怎么办?我们可以利用nextTick,比如,<templeate v-if="tab === 'a' "></template> ,在我们更新完数据,这个表格因为没有更新数据,所以它没有变化,我们可以 this.tab = ' ' this.$nextTick(() => this.tab = 'a')
在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。原因是什么呢,原因是
1.在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染,而此时进行 DOM 操作无异于徒劳,所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。与之对应的就是 mounted 钩子函数,因为该钩子函数执行时所有的 DOM 挂载和渲染此时在该钩子函数中进行任何DOM操作都不会有问题 。
2.在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的 DOM 结构的时候,这个操作都应该放进 Vue.nextTick() 的回调函数中。
小结:
beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom
vue的钩子函数的更多相关文章
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue - 过滤器-钩子函数路由
一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...
- vue生命钩子函数
vue的生命钩子函数在使用Vue开发中是非常重要的一环,可以说,生命钩子函数使开发变得更加便捷. 下图是Vue的生命周期图: 具体钩子如下: beforeCreate created beforeMo ...
- vue中钩子函数的用法
这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈. beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loading,还做一些初 ...
- 生命周期(vue的钩子函数)
生命周期图示 创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后 beforeCreate:function(){ console.log('1-beforeCreate 组件还未被创建' ...
- 【vue】钩子函数生命周期
图1 图2: 图3 相关资料:http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html https://segmentfault.com ...
- 关于vue中钩子函数非常好的博客
http://www.cnblogs.com/caimuqing/p/6728568.html
- 【vue】vue生命周期解读 (流程+钩子函数)
参考详细说明一波简书 (vue中钩子函数解读) 1.实例渲染流程 2.生命周期钩子函数比 钩子函数详解简书一 钩子函数详解简书二
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
随机推荐
- mycat详细
MyCAT的优势基于阿里开源的Cobar产品而研发,Cobar的稳定性.可靠性.优秀的架构和性能以及众多成熟的使用案例使得MYCAT一开始就拥有一个很好的起点,站在巨人的肩膀上,我们能看到更远.业界优 ...
- 【转载】python学习之 字符串前'r'的用法
文章转载:https://www.cnblogs.com/cyiner/archive/2011/09/18/2180729.html 在打开文件的时候open(r'c:\....') 加r和不加'' ...
- C语言程序设计:现代方法阅读笔记
第二十六章 atexit函数允许用户“注册”在程序终止时要调用的函数:atexit(func); 在程序终止后,func函数会被自动调用 clock()函数可以计算程序运行时间 time函数返回当前的 ...
- fileOP
public void getFileDir(String filePath) { try{ this.tv.setText("当前路径:"+filePath);// 设置当前所在 ...
- 洛谷—— P1855 榨取kkksc03
https://www.luogu.org/problem/show?pid=1855 题目描述 洛谷2的团队功能是其他任何oj和工具难以达到的.借助洛谷强大的服务器资源,任何学校都可以在洛谷上零成本 ...
- Oracle11g R2创建PASSWORD_VERIFY_FUNCTION相应password复杂度验证函数步骤
Oracle11g R2创建PASSWORD_VERIFY_FUNCTION相应密码复杂度验证函数步骤 运行測试环境:数据库服务器Oracle Linux 5.8 + Oracle 11g R2数据库 ...
- 9种常见的Android开发错误及解决方案
整理总结了9个Android开发中的错误以及解决方案,共同探讨进步! 1. 如果你的项目的R文件不见的话,可以试下改版本号在保存,R文件不见一般都是布局文本出错导致. 2. 布局文件不可以有大写字母 ...
- Ubuntu 10.04 右上角网络管理图标消失的解决的方法
那个显示网络状态的那个图标.叫做:network-manager.假设是有线网络连接的话.是上下两个箭头,假设是无线网络的话.是一个发射信号的形状. sudo gedit /etc/Ne ...
- linux 流量统计小程序
源代码例如以下: //2015/7/2 10:30:35 //gino #include <stdio.h> #include <sys/stat.h> #include &l ...
- Swift环境下实现UILabel居上 居中 居下对齐
首先在Xcode中新建.h文件,将下面代码复制进去 // // myUILabel.h // // // Created by yexiaozi_007 on 3/4/13. // Copyright ...