Vue学习笔记之五Vue生命周期
in with 0 comment

Vue学习笔记之五Vue生命周期

in with 0 comment

5. Vue生命周期

所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义。

5.1 生命周期图示

Vue 实例生命周期

5.2 生命周期方法

beforeCreate

created

beforeMount

mounted

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

该钩子在服务器端渲染期间不被调用。

beforeUpdate

updated

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

activated

beforeDestroy

destroyed

errorCaptured

2.5.0+ 新增

错误传播规则

5.3 如何使用声明周期方法

new Vue({
    el:'#app',
    data:{
        userList:null
    },
    //Vue对象实例创建成功以后就会自定调用这个方法
    created:function(){
        this.getdata();
    },
    methods:{
        getdata:function(){
            //请求的url
            var url = 'https://www.layui.com/demo/table/user/';
            //利用vue-resource发出Ajax请求
            this.$http.get(url)//发出请求
                .then(function(response){//获取服务器返回的数据
                this.userList = response.body;//获取当前url响应回来的数据
            });
        }
    }
})

注意:data中定义的变量只有在created及以后方法才能获取到。