categories:
vue 基础
tags:
vue 生命周期
vue 生命周期
- <!doctype html>
- <HTML lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- </head>
- <body>
- <div id="app">
- <App>
- </App>
- </div>
- <script src="./vue.js">
- </script>
- <script>
- Vue.component('Test', {
- data() {
- return {
- msg: 'hello world',
- };
- },
- template: ` < div > <div > {
- {
- msg
- }
- } < /div>
- <button @click="clickHandler"> 改变 </button > </div>
- `,
- methods:{
- clickHandler(){
- return this.msg += "尴尬";
- }
- },
- beforeCreate:function () {
- / / 组件创建之前console.log(this)
- // 已创建 vue 对象, 但是数据没有创建
- },
- created: function() {
- // 组件创建之后
- console.log(this.msg)
- // 使用组件, 就会调用 created() 方法
- // 在 created 方法中可操作后端数据, 数据驱动视图
- // 应用: 发起 Ajax 请求
- },
- beforeMount: function() {
- // 挂载数据到 DOM 之前会调用
- console.log(document.getElementById('app'))
- },
- mounted: function() {
- // 挂载数据到 DOM 之后会调用
- console.log(document.getElementById('app'))
- },
- beforeUpdate: function() {
- // 在更新 DOM 之前调用该钩子, 应用可以获取原始 DOM
- console.log(document.getElementById('app').innerHTML)
- },
- updated: function() {
- // 在更新 DOM 之后调用该钩子, 应用可以获取原始 DOM
- console.log(document.getElementById('app').innerHTML)
- },
- // 以下两个组件需要禁用 keep-alive 组件
- beforeDestroy: function() {
- // 销毁之前
- console.log("beforeDestroy");
- },
- destroyed: function() {
- // 销毁之后
- console.log("destroyed")
- // 销毁定时器
- },
- // 以下两个组件需要与 keepalive 配合使用
- activated: function() {
- // 组件被激活了
- console.log('组件被激活了')
- },
- deactivated: function() {
- // 组件被停用了
- console.log('组件被停用了')
- }
- }) var App = {
- data() {
- return {
- isShow: true
- }
- },
- //vue 内置组件 < keep-alive></keep-alive > 能在组件的切换过程中将状态保留在内存中. 防止 DOM 重复渲染
- // 使用之后, 并不会触发销毁函数
- template: ` < div > <div class = "app" > <keep - alive > <Test v -
- if = "isShow" / ></keep-alive>
- <button @click="isShow = !isShow"> 改变生死 </button > </div>
- </div > `
- }
- new Vue({
- el: '#app',
- data() {
- return {}
- },
- components: {
- App
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3383763.html