vuecrud钩子_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,比如, ,在我们更新完数据,这个表格因为没有更新数据,所以它没有变化,我们可以 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值