vue之生命周期钩子、axios的使用、计算属性、侦听属性
目录
- 生命周期钩子
- 生命周期图
- 生命周期
- create
- update
- bedoreCreate
- beforeMount
- mounted（用得最多）
- beforeUpdate
- updated
- beforeDestroy
- destroyed
- 案例
- 组件
- fetch和axios
- fetche使用
- axios的使用
- 计算属性
- 通过计算属性实现名字首字母大写
- 通过计算属性重写过滤案例
- 侦听属性
- fetch和axios
生命周期钩子
生命周期图
生命周期
| 钩子函数 | 描述 |
|---|---|
| beforeCreate | 创建Vue实例之前调用，data空的 |
| created(重要) | 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） |
| beforeMount | 渲染DOM之前调用 |
| mounted(重要) | 渲染DOM之后调用---》看到页面了，插值已经进去了 |
| beforeUpdate | 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） |
| updated | 重新渲染完成之后调用 |
| beforeDestroy | 销毁之前调用 |
| destroyed(重要) | 销毁之后调用 |
create
向后端发请求拿数据，发送ajax请求
let vm = new Vue()
update
let vm = new Vue({
el: '#box',
data: {
isShow: true // 修改这个内容
},
methods: {
handleClick() {
console.log('我是根组件')
}
}
})
bedoreCreate
beforeMount
mounted（用得最多）
定时任务，延迟任务 js中
beforeUpdate
updated
beforeDestroy
destroyed
组件销毁 - 给组件写一个定时器
setTimeout() // 延迟3s干什么事(执行一次)
setInterval() // 每3s干什么事(循环执行)
案例
生命周期
组件
fetch和axios
axios与fetch实现数据请求
(1)fetch（不是所有浏览器都支持，谷歌浏览器支持）
XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。 兼容性不好
fetche使用
fetch
-
{{data.name}}
![]()
axios的使用
axios
-
{{data.name}}
![]()
计算属性
在插值写普通函数，只要页面一刷新，函数就会重新执行，跟函数没关的其他的变化，函数也会重新计算，这样会影响效率
计算属性就是：把函数当成属性来用---》只有这个函数使用的属性(变量)变化，函数才重写运算
通过计算属性实现名字首字母大写
Title
{{mytext.substring(0,1).toUpperCase()+mytext.substring(1)}}
计算属性：{{getname}}
普通方法：{{getNameMethod()}}
通过计算属性重写过滤案例
Title
- {{data}}
侦听属性
只要被监听的变量发生变化，就会执行监听属性中的方法
Title