响应式与生命周期

响应式

响应式：当某一个数据发生改变的时候，与之相关联的内容会自动的改变或刷新

Vue中的响应式时通过 Object.defineProperty() 中的 setter 方法，当修改属性的时候会自动叫用 setter 方法，这是该方法不仅仅可以更改数据，也可以进行一些其他的操作，也被称为数据劫持而与之相对应的 getter 方法被称为数据代理

Vue会给data中的所有属性以及属性中的属性添加响应式，后补的方法不会自动添加需要手动添加

Vue.set(目标对象, "属性名", 值);
vm.$set(目标对象, "属性名", 值);
// 例
vm.$set(vm.a, 't', "我是后加的");

不能直接给根（vm | vm.$data）直接追加属性，根中的属性只能自己预先声明

在数组内，通过数组的下标去修改数组中的元素，默认没有响应式处理，有两种解决方案：

1. 可以通过上面的两种 set 方法进行添加响应式，如：vm.$set(目标数组, 下标, 值);
2. 条用Vue指定的7个API：
   • push()：末尾添加元素
   • pop()：弹出末尾元素
   • reveres()：反转数组
   • splice()：修改
   • shift()：移除第一个元素
   • unshift()：向第一个添加元素
   • sort()：对数组进行排序

生命周期

在指定时间点内执行特定的函数这个函数叫钩子函数

四个阶段八个钩子

四个阶段：初始、挂载、更新、销毁

每个阶段都有两个钩子函数，命名特点：beforeXxx()、xxxed()

初始

beforeCreate()：创建数据代理和数据监测前执行

created()：创建数据代理和数据监测后执行

挂载

beforeMount()：页面挂载前执行

mounted()：页面挂载后执行

更新

beforeUpdate()：更新前执行（页面没更新但是data已更新）

updateed()：更新后执行

销毁

beforeDestroy()：销毁前执行

destroyed()：销毁后执行

想要进去销毁阶段必须执行 vm.$destroy() ；所谓的销毁就是解绑vm所绑定的监视器、子组件、自定义事件和监听器（具体看vue版本），vm实例并不会消失

示例

const vm = new Vue({
    el: "#app",
    data: {},
    // 创建
    beforeCreate() { console.log("创建前") },
    created() { console.log("创建后") },
    // 挂载
    beforeMount() { console.log("挂载前") },
    mounted() { console.log("挂载后") },
    // 更新
    beforeUpdate() { console.log("更新前") },
    updated() { console.log("更新后") },
    // 销毁
    beforeDestroy() { console.log("销毁前") },
    destroyed() { console.log("销毁后") }
})

img