this.$data和this.$options.data()

今天在公司发现一段vue代码的写法

$route() {
    Object.assign(this.$data, this.$options.data());
    const mounted = this.$options.mounted || [];
    mounted.forEach(fn => fn.call(this));
},

个人的理解

• vm.$options.methods可以获取自定义的属性，created,mounted等也一样

• this.$data是已经转成了getter和setter，所以拿到的是一个修改后的数据

• this.$options.data()是刚刚传入vue里边，成员没有转成了getter和setter,所以拿到的仅仅是注入vue实例的初始数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rJfRZd0G-1646130702422)(F:/markdownImag/JS/image-20220301165413373.png)]

先分析这一段代码

Object.assign(this.$data, this.$options.data());

• 把未修改的覆盖到，已经修改了的,Object.assign浅拷贝

• 在监听属性里边，监听$route就可以每次刷新 重新 初始化2

• 然后element-ui的表单重置好像也和这个差不多

然后是这段代码

    const mounted = this.$options.mounted || [];

• this.$options.mounted这里拿到的是一个数组，里边存的是mounted这个钩子函数

最后一段代码

 mounted.forEach(fn => fn.call(this));

• 执行一次mounted钩子，并传入当前的this

个人理解：

总的代码意思就是说:当监听到路由变化的时候,让数据重置,然后再执行mouted钩子函数,把数据再出现渲染