美文网首页
4. 生命周期

4. 生命周期

作者: 论宅 | 来源:发表于2019-05-27 22:49 被阅读0次

vue实例在被创建的时候都要经过一系列的初始化过程,如,设置数据监听,编译模板,将实例挂载到dom并在数据变化时更新dom。
同时,在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

created

created 钩子可以用来在一个实例被创建之后执行代码:

new Vue({
data:{a;1},
created:function(){
console.log("a is"+this.a)
}

})

文中的this指向vm实例,所以vm.a就是data中的a。

也有一些其他的钩子,在实例生命周期的不同阶段被调用,如mounted,updated,distroyed。生命周期钩子的this上下文指向【调用它的示例】。

【不要在选项属性或者回调上使用箭头函数,比如:】

created: () => console.log(this.a) 
//或 
vm.$watch('a', newValue => this.myMethod())

因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致
Uncaught TypeError: Cannot read property of undefined 或
Uncaught TypeError: this.myMethod is not a function 之类的错误

生命周期树可以在这里查看——
https://cn.vuejs.org/v2/guide/instance.html

相关文章

  • 微信小程序生命周期

    1.小程序的生命周期 2.页面的生命周期 3.组件的生命周期 4.组件所在页面的生命周期

  • 4. 生命周期

    vue实例在被创建的时候都要经过一系列的初始化过程,如,设置数据监听,编译模板,将实例挂载到dom并在数据变化时更...

  • 4. 生命周期

    vue 常见的生命周期有如下 6 个:beforeCreatecreatedbeforeMountmountedb...

  • 4.组件的生命周期

    了解React生命周期,对我们理解React的工作过程很有帮助。所有的事物都有自己的生命过程,React组件也不例...

  • 2020年面试总结

    UI相关1. UIView和CALayer2. position和anchorPoint3. VC的生命周期4. ...

  • vue.js

    1.对于MVVM的理解? 2.Vue的生命周期 3.什么是vue生命周期? 4.第一次页面加载会触发哪几个钩子? ...

  • Android--四大组件之BroadCastReceiver

    1. BroadCastReceiver是什么?2. 广播类型1). 有序广播2). 无序广播3. 生命周期4. ...

  • Android知识点总结Service知识点

    1.service的生命周期2.service的启动方式3.IntentService与Service的区别4.跨...

  • ReactiveCocoa的进阶

    信号的生命周期 1.RAC高阶函数 2.隐射 flattenMap 3.过滤(filter) 4.组合(combi...

  • 4.组件生命周期钩子概述

    例子演示所有钩子的调用顺序 1.子组件 2.父组件app.html 3. 效果: 结论:构造函数一定存在,其他方法...

网友评论

      本文标题:4. 生命周期

      本文链接:https://www.haomeiwen.com/subject/vdcltctx.html