掌握Vue生命周期，让你的前端开发效率翻倍！

左手的ㄟ右手 2024-03-16 16:46 13阅读 0赞

### 1 Vue实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue实例</title>
        <script src='../vue.js'></script>
    </head>
    <body>
    
    <div id="root">
        
        <div @click="handleClick">
            {
       {message}}
        </div>
        <item></item>
    </div>
    
    <script>
    
        Vue.component('item', {
          
            template: '<div>hello item</div>'
        })
    
        /**
         * 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始
         */
        var vm = new Vue({
          
            /**
             * el: '#root'表示Vue实例将挂载到id为"root"的HTML元素
             * 这个HTML元素可以是任何元素 如div、section
             * Vue实例挂载到该元素后，Vue实例就可以操作该元素及其子元素，以及响应用户的交互行为
             */
            el: '#root',
            /**
             * 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中
             * 当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
             * 只有当实例被创建时就已经存在于 data 中的 property 才是响应式的
             */
            data: {
          
                message: 'hello world'
            },
            // 在 `methods` 对象中定义方法
            methods: {
          
                handleClick: function () {
          
                    alert("hello")
                }
            }
        })
    </script>
    
    </body>
    </html>

一个 Vue 应用由一个通过 `new Vue` 创建的**根 Vue 实例**，以及可选的嵌套的、可复用的组件树组成。

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 `<item>`。

<div id="root">
        
        <div @click="handleClick">
            {
       {message}}
        </div>
        
        <item></item>
    </div>

### 2 Vue实例生命周期 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Vue实例生命周期函数</title>
    	<script src='../vue.js'></script>
    </head>
    <body>
    	<div id="app">Hello World</div>
    
    	<script>
    		// 生命周期函数：Vue实例在某时间点自动执行的函数
    		var vm = new Vue({
          
    			el: "#app",
    			template: "<div>{
          {test}}</div>",
    			data: {
          
    				test: "hello world"
    			},
    			beforeCreate: function() {
          
    				console.log("beforeCreate");
    			},
    			created: function() {
          
    				console.log("created");
    			},
    			beforeMount: function() {
          
    				console.log(this.$el);
    				console.log("beforeMount");
    			},
    			mounted: function() {
          
    				console.log(this.$el);
    				console.log("mounted");
    			},
    			beforeDestroy: function() {
          
    				console.log("beforeDestroy");
    			},
    			destroyed: function() {
          
    				console.log("destroyed");
    			},
    			beforeUpdate: function() {
          
    				console.log("beforeUpdate");
    			},
    			updated: function() {
          
    				console.log("updated");
    			}
    		})
    	</script>
    </body>
    </html>

这些方法都是单独定义，不放在 methods 对象里。

![Vue 实例生命周期][Vue]

![c90d5582437e46c09b33249f1838d65c.png][]

见鬼了，其它几个生命周期点呢？为啥没打印出来呢？

created: function() {
    				console.log("created");
    			},

#### template ####

![93c099dbe51f4e7cb2b4ef466f64c5c5.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Vue实例生命周期函数</title>
    	<script src='../vue.js'></script>
    </head>
    <body>
    	<script>
    		// 生命周期函数：Vue实例在某时间点自动执行的函数
    		var vm = new Vue({
    			el: "#app",
    			template: "<div>{
       {test}}</div>",
    			data: {
    				test: "hello world"
    			},
    			beforeCreate: function() {
    				console.log("beforeCreate");
    			},

上面这么写和下面一样：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Vue实例生命周期函数</title>
    	<script src='../vue.js'></script>
    </head>
    <body>
    	<script>
    		// 生命周期函数：Vue实例在某时间点自动执行的函数
    		var vm = new Vue({
    			el: "#app",
    			data: {
    				test: "hello world"
    			},
    			beforeCreate: function() {
    				console.log("beforeCreate");
    			},

#### vm.$destroy() ####

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

触发 `beforeDestroy` 和 `destroyed` 的钩子。

在大多数场景中你不应该调用这个方法。最好使用 `v-if` 和 `v-for` ，以数据驱动的方式控制子组件的生命周期。

![b0efa545c29c48b6b4936da31b1e03d0.png][]

#### update ####

![6c3316647fbb4bad8982455b8ed8eac8.png][]

[Vue]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/30d90fa378d3428a848aca6f0848241a.png
[c90d5582437e46c09b33249f1838d65c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/49e3f7181474448c8c02accccbe95304.png
[93c099dbe51f4e7cb2b4ef466f64c5c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d6446f01f89342f3a9e3254ce1ad81ce.png
[b0efa545c29c48b6b4936da31b1e03d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/278f78b88ac745a4a5fff9dd507c8561.png
[6c3316647fbb4bad8982455b8ed8eac8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0408a41965e34cec99d938976c5d4cf8.png