小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。
作为 Vue 中比较重要的概念, Vue 生命周期需要我们熟练了解, 比如在什么时候发起请求向后端请求数据, 什么时候更新数据, 这些在实际工作中也都是会用到, 是比较重要的!
Vue 声明周期的钩子函数
白话式理解: 在实例的整个生命周期里自动执行的特定的函数
beforeCreate
没有实例化, 数据访问不到
created
实例被创建完成后调用
能拿到数据
能修改数据,
且修改数据不会触发 updated beforeUpdate 钩子函数
可以在这个钩子函数里发请求,访问后端接口拿数据
beforeMount
编译模板已经结束,虚拟dom已经存在,
可以访问数据,也可以更改数据
且修改数据不会触发updated beforeUpdate 钩子函数
mounted
真实的dom节点
this.$refs找到ref表示的节点
可以访问和更改数据
且修改数据会触发 updated beforeUpdate 钩子函数
beforeUpdate
修改之前调用
updated
修改之后调用
注意: beforeUpdate updated 监控 data里的所有数据变化
不要在update beforeUpdate 修改数据,否则会引起死循环
beforeDestroy
实例卸载以前调用,可以清理非 vue 资源,防止内存泄露
destroyed
activated
keep-alive 缓存组件时候调用
deactivated
缓存组件卸载的时候调用
watch:
监听特定值的变化
搭建脚手架环境 v2.x
- npm i vue-cli -g ( vue -V 能看到版本号,就安装成功了)
- 建立项目文件夹
- vue init webpack
- cnpm i
- npm run dev (启动开发环境)
- 浏览器打开
http://localhost:8080
目录各个文件夹 说明
- vue cli 采用的是单文件组件
- template 模板
- script 脚本
- style 样式 scoped 表示样式只是当前组件有效
- vue cli 是热更新
- Import 名字 from “组件的路径” 导入
- export default 组件的名称 导出