Vue 元素挂载、方法、生命周期钩子函数

原创已于 2023-02-23 11:23:10 修改 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-11-02 00:14:11 首次发布

vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

笔记

6 篇文章

订阅专栏

本文介绍了Vue.js中的元素挂载、方法定义及生命周期钩子函数等内容。通过实例展示了如何使用Vue.js进行数据绑定、方法调用，并详细解释了Vue实例从创建到销毁过程中的各个生命周期阶段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、元素挂载

二、vue的方法

三、生命周期钩子函数

一、元素挂载

在Vue.的构造函数中有一个el选项，该选项的作用是为了Vue实例提供挂载元素。

如下在div中定义了一个id "element",在script引入vue.js后创建vue实例，vue实例中的el即挂载元素，需要与div中的id对应。data选项定义数据，在div中使用双括号{{}}绑定data中的数据。

<div id="element">
    <h3>{{text}}</h3>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo=new Vue({
        el:'#element',
        data:{
            text:'Hello World'
        }
    })
</script>

元素的挂载，如果div中有多个相同的id，vue实例的元素的挂载匹配为从上往下第一个id，有效范围为第一个id下的所有深度

二、vue的方法

在Vue实例中，通过methods选项可以定义方法，一样通过双括号进行绑定。实例如下：

<div id="element">
    <h3>{{demo()}}</h3>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo=new Vue({
        el:'#element',
        data:{
            text:'Hello World'
        },
        methods:{
            demo:function(){
                return 'Hello World'+this.text;
            }
        }
    })
</script>

三、生命周期钩子函数

每个vue在创建的时候都会有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到DOM并在数据变化时触发DOM更新、销毁实例等，在这个过程中会运行一些叫做生命周期钩子的函数。Vue实例中的钩子函数如下：

创建期间的四个声明周期函数

beforeCreate() Vue实例完全被创建出来之前，会执行它，当beforeCreate，data和methods数据还未初始化
created() 实例创建之后调用，data和methods中的数据已经被初始化
beforeMount() 实例对象挂载之前，模板已经在内存中编辑完成，但还没有渲染到页面
mounted() 实例对象挂载之后，将内存中编译好的模板替换到浏览器页面中，用户可以看到渲染好的页面了，这时候，Vue组件已经创建完毕

运行和销毁期间一共有两个声明周期函数：

beforeUpdate() 界面还没有被更新，但是数据更新了
updated() 事件执行的时候，界面和data数据保持同步了（最新）

其它声明周期函数

beforeDestroy() Vue实例已经从运行阶段进入到了销毁阶段，组件中的数据、方法仍然可用
destroyed() Vue实例完全被销毁了，组件中的数据、方法都不可用了

<div id="element">{{text}}</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo = new Vue({
        el: '#element',
        data: {
            text: 'Hello world'
        },
        beforeCreate: function () {
            console.log('beforeCreate'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        created: function () {
            console.log('created'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        beforeMount: function () {
            console.log('beforeMount'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        mounted: function () {
            console.log('mounted'+' —— el:'+this.$el+' —— data: '+this.text)
            this.text='Hello World';
        },
        beforeUpdate: function () {
            console.log('beforeUpdate'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        updated: function () {
            console.log('updated'+' —— el:'+this.$el+' —— data: '+this.text)
            this.$destroy();
        },
        beforeDestroy: function () {
            console.log('beforeDestroy'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        destroyed: function () {
            console.log('destroyed'+' —— el:'+this.$el+' —— data: '+this.text)
        }
    })
</script>