Vue2为何能通过this访问到data与methods的属性

 更新时间:2022年09月05日 10:19:46   作者:前端Ah​​​​​​​  
这篇文章主要介绍了Vue2为何能通过this访问到data与methods的属性,文章围绕主题展开详细的内容戒杀,具有一定的参考价值,需要的小伙伴可以参考一下

前言

在我没接触vue之前我不着调this是啥压根就没有接触过,在我学过了vue之后我知道了this,那时候理解的this就是你要使用data中的属性或调用methods中的方法等其他东西都要用this去调用,那时候其实我还是不知道this是啥,后面慢慢的才知道,当然我知道应该就是八股文背出来的,通过今天读这个源码,让我理解的更加深刻了,原来还可以这么用。

一、vue的使用

看这一段代码我们能知道有个Vue的构造函数 ,然后我们使用new Vue创建了它的实例,并给它传了一个对象参数,里面有data和methods,那么在这个Vue构造函数做了什么才能让我使用this可以直接访问里面的属性或者方法呢?

    //创建vue的实例
    const vm = new Vue({
        data: {
            desc: '为什么this能够直接访问data中的属性',
        },
        methods: {
            sayName() {
                console.log(this.desc);
            }
        },
    });
    console.log(vm.name);
    console.log(vm.sayName());

二、Vue的构造函数

接收一个options参数

  • 使用 instanceof 判断 this对象上是否出现了Vue的prototype,我们都知道this的指向是取决于谁调用
  • this._init(options) 证明在这调用要么我们创建的实例上有_init方法要么方法在Vue的prototype上,但是我们可以看到实例上并没有_init方法 ,那么肯定在一个地方给Vue的prototype上加上了_init方法 继续往下看
 function Vue(options) {
        if (!(this instanceof Vue)
        ) {
            warn('Vue是一个构造函数,应使用“new”关键字调用');
        }
        this._init(options);
}
//Vue() //错误的调用方式 进入警告判断 此时this指向window 然后window的 window.__proto__的指向的Window构造函数的prototype

三 初始化initMixin(Vue)

在源码中会看到很多初始化的函数在这我们initMixin()

这个函数就是在Vue的原型上增加了_init方法,方法接收一个参数,然后定义了vm变量,在我看的时候就想看看这个函数的this指向谁,其实也不难函数挂在Vue构造函数的原型上,调用还是在构造函数里面使用this调用,构造函数的this指向Vue实例,根据this的指向规则 此时的vm就指向了Vue构造函数的实例。

使用this的访问规则如果实例上没有就去原型上找

然后执行 initState(vm)

initMixin(Vue)
function initMixin(Vue) {
        //prototype上增加init方法
        Vue.prototype._init = function (options) {
            var vm = this; //Vue实例
          	vm.age = 30
          //代码进行了删减
            initState(vm);
        }
}
//这里只是举例测试
const vm = new Vue({})
console.log(vm.age) //30

四 initState(vm)

这里就是对我们传入的data 或者methods进行不同的处理

 //initState方法代码进行了删减
    function initState(vm) {
        vm._watchers = [];
        var opts = vm.$options; //这里是我们在创建实例的时候传的参数
        //如果传了methods 则去调用
        if (opts.methods) { initMethods(vm, opts.methods); }
        if (opts.data) {
            initData(vm);
        } else {
            observe(vm._data = {}, true /* asRootData */);
        }
    }

五 initMethods(vm, opts.methods)

如果有methods则取调用initMethods方法

前面主要是判断 methods中的值是不是函数,key有没有跟props冲突等

最后一段代码就是在vm的实例上增加方法vm[key]=methods[key],在读的时候我有这样一个以为为什么还要用bind改变this指向呢不本来就是写在vm实例上的方法吗 只能使用vm调用 那么方法的this不就指向vm吗?

/*
    vm:构造函数实例
    methods:我们传的methods对象
    */
    function initMethods(vm, methods) {
        var props = vm.$options.props;
        //循环methods对象
        for (var key in methods) {
            {
                //判断是否是函数 不是的化则作出警告
                if (typeof methods[key] !== 'function') {
                    warn(
                        "Method "" + key + "" has type "" + (typeof methods[key]) + "" in the component definition. " +
                        "Did you reference the function correctly?",
                        vm
                    );
                }
                //判断 methods 中的每一项是不是和 props 冲突了,如果是,警告。
                if (props && hasOwn(props, key)) {
                    warn(
                        ("Method "" + key + "" has already been defined as a prop."),
                        vm
                    );
                }
                //判断 methods 中的每一项是不是已经在 new Vue实例 vm 上存在,而且是方法名是保留的 _ $ (在JS中一般指内部变量标识)开头,如果是警告。
                if ((key in vm) && isReserved(key)) {
                    warn(
                        "Method "" + key + "" conflicts with an existing Vue instance method. " +
                        "Avoid defining component methods that start with _ or $."
                    );
                }
            }
            //给实例增加methods中的方法 这样其实我们就已经可以用vm访问 到methods中的方法了
            vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
        }
    }

问了群里大佬之后原来这步操作时为了防止用户改变this指向,专门做了个例子

在这我有定义了对象a里面有个age属性和fn,fn我赋值vm实例上的sayHi,然后a.fn()调用很明显this的指向已经被改变了,使用bind之后则不会

  const vm = new Vue({
        methods: {
            sayHi() {
                console.log(this.age, 'hello-this')
            }
        }
    });
    let a = {
        age: 15,
        fn: vm.sayHi
    }
    console.log(a.fn(), 'vm') //打印15

六 initData(vm)

data是如何做到的使用this可以直接访问的,其实原理都一样,

首先在vm实例上增加了_data,里面存的我们传入的data参数

 function initData(vm) {
        var data = vm.$options.data;
        data = vm._data = typeof data === 'function'
            ? getData(data, vm)
            : data || {};
        //如果不是对象则警告
        if (!isPlainObject(data)) {
            data = {};
            warn(
                'data functions should return an object:\n' +
                'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
                vm
            );
        }
        // proxy data on instance
        var keys = Object.keys(data);
        var props = vm.$options.props;
        var methods = vm.$options.methods;
        var i = keys.length;
        while (i--) {
            var key = keys[i];
            //判断key值有没有跟methods中的key重名
            {
                if (methods && hasOwn(methods, key)) {
                    warn(
                        ("Method "" + key + "" has already been defined as a data property."),
                        vm
                    );
                }
            }
            //判断key值有没有跟props中的key重名
            if (props && hasOwn(props, key)) {
                warn(
                    "The data property "" + key + "" is already declared as a prop. " +
                    "Use prop default value instead.",
                    vm
                );
                //是否是内部私有保留的字符串$ 和 _ 开头
            } else if (!isReserved(key)) {
              //代理
                proxy(vm, "_data", key);
            }
        }
        // observe data
        observe(data, true /* asRootData */);
    }

七 proxy(vm, "_data", key)

get 和 set 方法 注意里面的this 指向vm实例对象,上面已经在vm实例对象上增加了_data 所有在获取或者设置属性值的时候 都是this._data[key] 也就是vm._data[key],

然后通过Object.defineProperty往实例对象上添加属性,所以当我们访问vm[key] 也就是 vm._data[key]

  function proxy (target, sourceKey, key) {
      sharedPropertyDefinition.get = function proxyGetter () {
        return this[sourceKey][key]
      };
      sharedPropertyDefinition.set = function proxySetter (val) {
        this[sourceKey][key] = val;
      };
      Object.defineProperty(target, key, sharedPropertyDefinition);
  }
//创建vue构造函数
    function Vue(options) {
        if (!(this instanceof Vue)
        ) {
            warn('Vue是一个构造函数,应使用“new”关键字调用');
        }
        this._init(options);
    }
    //初始化
    initMixin(Vue);
    function initMixin(Vue) {
        //prototype上增加init方法
        Vue.prototype._init = function (options) {
            var vm = this; //Vue实例
            let methods = options.methods
            initState(vm);
        }
    }
    //initState方法代码进行了删减
    function initState(vm) {
        vm._watchers = [];
        var opts = vm.$options; //这里是我们在创建实例的时候传的参数
        //如果传了methods 则去调用
        if (opts.methods) { initMethods(vm, opts.methods); }
        if (opts.data) {
            initData(vm);
        } else {
            observe(vm._data = {}, true /* asRootData */);
        }
    }
    /*
    vm:构造函数实例
    methods:我们传的methods对象
    */
    function initMethods(vm, methods) {
        var props = vm.$options.props;
        //循环methods对象
        for (var key in methods) {
            {
                //一些条件判断
            }
            //给实例增加methods中的方法 这样其实我们就已经可以用vm访问 到methods中的方法了
            vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
        }
    }
    const vm = new Vue({
        methods: {
            sayHi() {
                console.log('hello-this')
            }
        }
    });
    vm.sayHi() //hello-this

总结

其实看明白了Methods是怎么做到直接用this可以直接访问的后面的都是差不多的,主要就是一个构造函数,然后创建一个实例,在实例上增加属性或者方法,这样我们就可以用实例对象直接访问了。原理就是那么简单。

到此这篇关于Vue2为何能通过this访问到data与methods的属性的文章就介绍到这了,更多相关Vue2访问data内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Element中el-table动态合并单元格(span-method方法)

    Element中el-table动态合并单元格(span-method方法)

    本文主要介绍了Element中el-table动态合并单元格(span-method方法),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Vue分析同步和异步有什么区别

    Vue分析同步和异步有什么区别

    这篇文章主要介绍了Vue分析同步和异步有什么区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-05-05
  • Vue解决element-ui消息提示$message重叠问题

    Vue解决element-ui消息提示$message重叠问题

    这篇文章主要为大家介绍了Vue解决element-ui消息提示$message重叠问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue项目网站全局置灰功能实现示例详解

    vue项目网站全局置灰功能实现示例详解

    这篇文章主要为大家介绍了vue项目网站全局置灰功能实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue实现动态表单动态渲染组件的方式(1)

    vue实现动态表单动态渲染组件的方式(1)

    这篇文章主要为大家详细介绍了vue实现动态表单动态渲染组件的方式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue如何将字符串变为数组

    vue如何将字符串变为数组

    这篇文章主要介绍了vue如何将字符串变为数组问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue项目打包:修改dist文件名方式

    vue项目打包:修改dist文件名方式

    这篇文章主要介绍了vue项目打包:修改dist文件名方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 详解VueRouter 路由

    详解VueRouter 路由

    本文详细介绍了VueRouter 路由的概念、规则、基础等相关内容,文中运用大量的图片进行讲解,感兴趣的小伙伴可以看一看这篇文章
    2021-08-08
  • vue实现移动端返回顶部

    vue实现移动端返回顶部

    这篇文章主要为大家详细介绍了vue实现移动端返回顶部,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue3中provide和inject的使用

    vue3中provide和inject的使用

    provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个,本文重点给大家介绍vue3中provide和inject的使用,需要的朋友参考下吧
    2021-07-07

最新评论