Vue组件之生命周期

149 阅读2分钟

1.1什么是生命周期?

概念: 一个vue实例从创建到销毁的整过过程就是生命周期

1.2钩子函数?

概念: Vue框架内置函数,随着组件的生命周期阶段,自动执行

作用: 特定时间点,执行特定操作

分类: 4大阶段8个方法

image.png

钩子函数有哪些?

初始化=>挂载=>更新=>销毁

初始化阶段(beforecreate/created):

created能不能获取data?

能回去data,不能获取真是DOM

挂载阶段(beforeMount/mounted)

mounted能获取到真实DOM

更新阶段(beforeUpdate/updated)

什么时候执行updated?

数据更新页面重新渲染之后

销毁阶段(beforeDestroy/destroyed)

手动销毁定时器/定时器/全局事件

2.axios使用

概念:

是一个专门用于发axios请求的库,

基于原生ajax+Promise技术封装中用于前后端的请求库

特点:

支持客户端发送Ajax请求

支持服务端Node.js发送请求

支持Promise相关用法

支持请求和响应的拦截器功能

自动切换JSON数据

axios基本使用
axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
    xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})
​
axios函数调用结果是用?

是一个Promise对象

axios如何给后台传参?

在url?拼接-查询字符串

在url路径上-需要后端特殊处理

在请求体传参给后台

axios那个配置项会把参数自动写到url?后面

params

post请求方式,一把在哪里传递数据给后台?

请求体

axios那个选项,可以把参数自动传到请求体中?

data选项

axios默认发给后台请求体数据格式是?

json字符串格式

props加限制的写法
     ```js
     export default {
         props: {
             backgroundColor:String,//传入必须是字符串
             color:{
                 typr:String,//传入必须是字符串
                 defalut:'#fff'//默认颜色
             },
             title:{
                 type:String,//传入必须是字符串
                required:true//必须传入
             }
         }
     
     }
     ```

为什么要用对象?因为要在程序中描述现实世界的事物

什么是对象?无序,属性和方法的集合

为什么要用类? 主要是:归类

什么是构造函数?什么是类?一类事物的母类,调用构造函数则可以创建出该类物种的实例对象