vue系列教程-03vuejs的结构和生命周期

最新推荐文章于 2025-06-19 18:54:39 发布

原创最新推荐文章于 2025-06-19 18:54:39 发布 · 187 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue教程

本文深入探讨Vue.js实例化对象的结构组成，包括data、methods、watch等属性的作用，同时解析Vue的生命周期，如beforeCreate、created、beforeMount等阶段的应用场景，帮助读者掌握Vue的基础知识。

vuejs的结构和生命周期

本内容为系列内容，全部内容请看我的vue教程分类

结构

上一节我们实例化vue的时候传递了一个对象，那么这个对象具体是个什么样的结构那，可以传递一些什么样的值那

<script>
    // 实例化一个vue
    let vm = new Vue({
        // 页面中的挂载点
        el: '#app',
        // 定义内部数据
        data: {
        },
        // 方法列表
        methods: {

        },
        // 监听事件
        watch: {

        },
        // 计算属性
        computed: {
            
        },
        // 组件
        components: {

        },
        // 私有过滤器
        filters: {

        },
        //自定义私有指令
        directives: {

        }
    })
</script>

那么围绕这些属性，将是我们本次基础部分的内容

什么是生命周期

我们上一节在created里面执行了一个打印方法，那么我说了这个就类似于jquery的$.ready一样

那么具体有哪些常用的生命周期呢

这个东西就好比人的一生，你出生的时候做什么，成年的时候做什么，反正就是不同的阶段做不动的事情

那么我们就可以利用不同的生命周期来完成不同的事情比如

初始化数据
开启和关闭进度条
关闭页面时保存数据
…

vue有哪些生命周期

<script>
    let vm = new Vue({
        el: '#app',
        // 完成创建之前 不能使用data和methods中的数据
        beforeCreate() {
            console.log('before');
        },
        // 数据已经初始化
        created() {
            console.log('created');
        },
        // 模板已将编辑在内存但是并未渲染，数据还未渲染到页面中
        beforeMount() {
            
        },
         //vue实例 已经挂载好页面了
        mounted() {
          
        },
         // 更新页面数据后 内存中data的数据已经改变 但是页面中的数据还没有完成渲染
        beforeUpdate() {
           
        },
        // 更新数据后 页面和data数据已经同步了
        updated() {
            
        },
         // 销毁当前实例
        destroyed() {
           
        },
    })
</script>