生命周期钩子
生命周期钩子
-
-
beforeCreate
- 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- 应用场景：可以用来初始化变量，这个变量不具有响应式，可以读取this,挂载静态变量
-
created
- 在实例创建完成后被立即调用
- 在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，
$elproperty 目前尚不可用。 - 应用场景：可以做响应式数据的修改，同步修改，读取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触发这个事件，一般有两个参数（定义的事件名字，传递的信息）