生命周期钩子

生命周期钩子

• 

• beforeCreate

  • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • 应用场景：可以用来初始化变量，这个变量不具有响应式，可以读取this,挂载静态变量

• created

  • 在实例创建完成后被立即调用
  • 在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
  • 应用场景：可以做响应式数据的修改，同步修改，读取this,读取data里面的数据，做数据的初始化

• beforeMount

  • 在挂载开始之前被调用：相关的 render 函数首次被调用。
  • 该钩子在服务器端渲染期间不被调用。
  • 应用场景：最后一次响应数据的修改，会把上次的给覆盖掉，再做一次数据初始化

• mounted

  • 实例被挂载后调用
  • DOM已经渲染在页面上了，可以操作DOM。以及AJAX请求
  • 相当于生存期，可以修改生存期的状态，就是修改data里的数据，可以激活beforeupdate和updated。
  • 该钩子在服务器端渲染期间不被调用。

• beforeUpdate

  • 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器
  • 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

• updated

  • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

  • 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作

  • updated 不会保证所有的子组件也都一起被重绘,希望等到整个视图都重绘完毕，可以在 updated 里使用

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

• actived

  • 被 keep-alive 缓存的组件激活时调用。
  • 该钩子在服务器端渲染期间不被调用

• deactivated

  • 被 keep-alive 缓存的组件停用时调用。
  • 该钩子在服务器端渲染期间不被调用

• beforeDestory

  • 实例销毁之前调用。在这一步，实例仍然完全可用
  • 该钩子在服务器端渲染期间不被调用

• destoryed

  • 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
  • 该钩子在服务器端渲染期间不被调用

note

• SPA: Single Page Aplication 单页面应用
• 一个Vue实例可以管理一棵DOM树（不常用），通常用组件管理DOM片段
• 响应式现象 reactive
• compile 编译 injection 注入
• 钩子就是函数 hooks
• 不要在选项 property 或回调上使用箭头函数，比如 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 之类的错误。
• beforeCreate created 创建 初始化的钩子
• beforeMount mounted 挂载 创建时的钩子
• beforeupdate updated 更新 生存期的钩子
• beforeDestory destoryed 销毁 销毁器的钩子
• 生命周期钩子在满足条件的情况下自动执行
• handler 句柄 回调
• component属于vue的内置组件，不需要定义，天生就有，有个重要组件is，在is后可以冠以组件名字，会动态的装载组件，在装载后面的组件的时候前面的组件会被卸载，会激活beforeDestory和destoryed。也可以手动的调用this.$destory方法
• fetch() 相当于promise
• ajax请求写在created会有延迟，因为还没有渲染完 ，放在mounted最好

表单输入绑定

• serialze() jQuery中收集所有表单信息方法

• 接口组成因素 ：

  • url;
  • request （首部字段，报文，请求报文，响应报文）;
  • response;
  • methods：请求方法(get,post,put,patch，hearder,delete,);
  • 数据类型： 规定数据格式

• post是insert逻辑（添加，修改） put 把原来的覆盖，patch打补丁

• input 输入框 textarea多行输入框 select选择框 用来采集数据，收集用户信息

• 数据双向绑定：

• v-model =“textValue”

• MVVM Model -View -ViewModel VM相当于控制中心

• MVP Presenter

• 单个复选框 true false

• 多个复选框 数组

• 单选按钮 radio 只有一个状态 提取多个单选按钮的某个值， 给单选按钮加一个value，通过v-model定义一个固定的值，当我们选中了某个input时，value就赋值给input

• 多选 checkbox

• 选择框 select 要把v-model放在select上 不是 option ，如果在option没有写value，它就会默认提取option的text,text可以使用multiple这个bool属性进行多行截取

修饰符

• number ~~
• lazy onchange
• trim 去空格

组件库

• vant

• 在组件里定义data,必须使用闭包，返回一个data

• 动态组件 dynamic component

• 全局组件

• 输入两个参数（组件名字，组件本身定义）

• data必须是一个函数，对象会放在环境里运行，

• 闭包：可以访问另一个作用域下的变量，本身是一个函数，（执行上下文，变量对象this，作用域量）

• 主要作用是组件复用，是拆分的意义

• 组件间通信：父子组件

  • 父传子

    • 在父组件上给引用组件元素上加一个属性，在子组件上通过props使用属性
    • slot 在父组件内部包一个子元素，在slot内置元素中读取

  • 子传父

    • 在父组件绑定一个事件，在子组件通过$emit触发这个事件，一般有两个参数（定义的事件名字，传递的信息）

父组件上给引用组件元素上加一个属性，在子组件上通过props使用属性
- slot 在父组件内部包一个子元素，在slot内置元素中读取

• 子传父

  • 在父组件绑定一个事件，在子组件通过$emit触发这个事件，一般有两个参数（定义的事件名字，传递的信息）