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

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>

这里这么多的生命周期，其实不是所有都是常用的，具体的使用我们会在后面一一讲解，这里只做一个了解