vue 基础入门笔记 09:生命周期函数
vue 基础入门笔记 09
- beforeCreate() data 和 methods 都没有初始化
- created() data 和 methods 有初始化
- beforeMount() 模板已经编译好在内存,但尚未把模板渲染到页面
- mounted() 模板已经渲染到页面
-
beforeUpdate() 当data 发生改变触发, 当执行该函数时,页面显示的数据还是旧的,此时data数据是最新的,尚未和页面数据同步
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div id="app"></div> <script> var vm=new Vue({ el:'#app', data:{}, methods:{}, //data 和 methods 都没有初始化 beforeCreate() { }, //data 和 methods 有初始化 created() { }, //模板已经编译好在内存,但尚未把模板渲染到页面 beforeMount() { }, //模板已经渲染到页面 mounted() { }, //当data 发生改变触发, 当执行该函数时,页面显示的数据还是旧的,此时data数据是最新的,尚未和页面数据同步 beforeUpdate() { }, updated() { }, //示例销毁 beforeDestroy() { }, }); Vue.config.devtools = true </script> </body> </html>
本作品采用《CC 协议》,转载必须注明作者和本文链接
很详细。