vue

vue

数组$set的用法

vue不跟踪数组值的变化

    this.$set(this.arr[i], 'show', false)；
    this.$set(this.arr, 2, 'zmm');

生命周期

生命周期图片示例
eg:

<template>
    <div>666</div>
</template>
<style>
</style>
<script>
    export default {
        name: 'TryTest',
        components: {
        },
        props: {},
        data() {
            return{
                num: 1
            }
        },
        beforeCreate(){
            console.log('beforeCreate',this.$el,this.num);
                //undefined undefined
        },
        --数据已经初始化，未生成虚拟的DOM节点
        created(){
            console.log('created',this.$el,this.num);
            //undefined 1
        },
        --data数据与模板编译成为虚拟的DOM
        beforeMount(){
            console.log('beforeMount',this.$el,this.num)
            //undefined 1
        },
        --将虚拟DOM插入到实际DOM中
        mounted(){
            console.log('mounted',this.$el,this.num)
            //<div>666</div> 1
        },
        beforeUpdate(){
            console.log('beforeUpdate',this.$el,this.num)
        },
        updated(){
            console.log('updated')
        }
    }
</script>

• new Vue()创建了一个Vue对象，script标签中的new Vue({})
• Observe Data通过ES5中的Object.defineProperty属性进行数据劫持，对数据进行初始化的设置。当数据发生变化时会执行该属性中的set事件，从而改变监听该数据变化的DOM。
• beforeCreate钩子在Observe Data前，所以此处无法读取到数据
• init Events进行内部事件的初始化
• created在数据初始化之后，所以能获取到数据
• created之后与beforeMount之前会将data数据与模版编译成为虚拟DOM，因为在页面中操作DOM的性能
  开销大，故与react相似采用虚拟DOM的方式处理。
• beforeMount之后与mount之前便会将虚拟DOM插入到实际的DOM中。
• beforeUpdate跟updated会实时监听数据变化，并随时更新DOM。
• beforeDestroy是Vue示例销毁前执行的钩子
• destroyed是Vue示例销毁执行的钩子

导航钩子

导航钩子beforeRouteEnter在页面加载之前便已经执行，不能获取组件实例 this，因为当钩子执行前，组件实例还没被创建，所以会先于所有的生命周期，但可以通过回调对组建数据进行修改。

在执行生命周期时导航钩子的回调还没有执行，所有无法获取到该回调设置的数据，但该回调的数据变化造成了DOM的变化，我们可以通过nextTick获取到更新DOM循环后的数据。