美文网首页
this.$data和this.$options.data()区

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

作者: 乐宝呗 | 来源:发表于2022-05-23 11:05 被阅读0次

    1、个人的理解

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

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

    2、监听路由-初始化data

    在监听属性里边,监听$route就可以每次刷新 重新 初始化。然后element-ui的表单重置好像也和这个差不多

    $route() {

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

       // 把初始化的数据覆盖到已经修改了的数据上,通过浅拷贝Object.assign实现。

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

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

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

       // 执行一次mounted钩子,并传入当前的this

    },

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

    相关文章

      网友评论

          本文标题:this.$data和this.$options.data()区

          本文链接:https://www.haomeiwen.com/subject/zwrrprtx.html