Vue2.x 必备小知识: 生命周期的理解

806 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

作为 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

  1. npm i vue-cli -g ( vue -V 能看到版本号,就安装成功了)
  2. 建立项目文件夹
  3. vue init webpack

image

  1. cnpm i
  2. npm run dev (启动开发环境)
  3. 浏览器打开 http://localhost:8080

目录各个文件夹 说明

  • vue cli 采用的是单文件组件
  • template 模板
  • script 脚本
  • style 样式 scoped 表示样式只是当前组件有效
  • vue cli 是热更新
  • Import 名字 from “组件的路径” 导入
  • export default 组件的名称 导出