vue中需要掌握的点

1.首先是生命周期：其实只有四个单词，记住就好了并不难记

为了说明组件创建，存在，销毁的过程，提供了组件生命周期

组件共分三大周期：创建期，存在期，销毁期

创建期：

beforeCreate 组件即将创建，此时什么数据都无法访问

created 组件创建完成，此时我们可以访问绑定的数据以及自定义事件

beforeMount 组件即将构建，此时确定了容器元素和模板渲染方法，但是没有上树

mounted 组件构建完成，此时组件已经上树，我们可以看到该组件。

存在期（数据更新）

beforeUpdate 组件即将更新，此时视图还没有更新

updated 组件更新完成，此时视图中的数据已经更新了

这里是环状的，一次更新结束并不代表完全结束。

销毁期

beforeDestory 组件即将销毁，此时数据尚未销毁

destroyed 组件已经销毁，此时无法访问绑定的数据，子组件，自定义事件了

在keep-alive中使用组件的时候，组件从页面中移除并不会销毁，而是进入激活或者未激活状态

activated 组件已经被激活，此时组件显示出来了

deactivated 组件已经被移除，此时组件已经被隐藏

以上方法都没有参数，this都指向实例化对象

2.父子组件的通信

2.1父组件向子组件通信

自定义属性

 

<home :color="color" :parent-msg="msg"></home>

// 定义两个组件
var home = Vue.extend({
    // 第二步 子组件接收数据
    props: ['color', 'parentMsg'],
    // 模板
    template: '<h1>child: {{color}}--{{parentMsg}}--{{this.$parent.msg}}</h1>',
    // 查看组件实例化对象
    mounted() {
        // 也可以通过$parent访问父组件，但是不建议
    console.log(this, this.$parent.msg, this.$parent.color)
    }
})

 

 

 

子组件向父组件通信，可以使用自定义事件来实现

 封装方法请求的方法

postApi:function(params,url) {
    let requestHeader = {
      'uk': localStorage.getItem('accessToken'),
      'Content-Type': 'application/json charset=UTF-8'
    };
    let axiosOptions = {
        method:"post",
        url:url,
        data:params,
        headers:requestHeader
    };
    return axios(axiosOptions).then(res => res.data);
  },