企业电商网站优化,注册城乡规划师合格标准,外贸推广平台排名,深圳规模较大的网站建设公司目录 前言
回调函数中的this指向问题
vue实例访问methods
methods实现原理 前言
vue实例对象为什么可以访问methods中的函数方法#xff1f;methods的实现原理是什么#xff1f;
回调函数中的this指向问题
在解答前言中的问题前#xff0c;需要了解一下回调函数中的th…目录 前言
回调函数中的this指向问题
vue实例访问methods
methods实现原理 前言
vue实例对象为什么可以访问methods中的函数方法methods的实现原理是什么
回调函数中的this指向问题
在解答前言中的问题前需要了解一下回调函数中的this指向问题
在正常函数中 div classapph1{{msg}}/h1button clickapp1/button/divscriptconst vm new Vue({el:.app,data:{msg:this指向问题,count:0},methods:{app(){console.log(this);console.log(vm this);}}})/script 由上述代码验证得出在普通函数中this是指向vm的也就是vue实例对象
在箭头函数中 app2:(){console.log(this);console.log(vm this);} 由上得知在箭头函数中this不是指向vue实例对象的而是指向window。其实在箭头函数是没有this的箭头函数的this是从父级作用域中继承过来的在上述代码中window作用域就是父级作用域
vue实例访问methods div classapp/divscriptconst vm new Vue({el:.app,data:{msg:methods的实现原理},methods:{app(){alert(hh)}}})/script 由上述代码及结果得出Vue实例对象访问methods中的函数是没有做数据代理的数据代理会调用getter方法也就是上述截图中msg后面的...当我们点击时就会调用getter方法查看数据所有数据代理只会代理数据不会代理函数方法
methods实现原理
我们可以自己写一个仅针对于methods配置项的js文件methods实现原理
// 定义一个类
class Vue {// 定义构造函数// options是一个纯粹的js对象{}constructor(options){// 获取所有的方法名Object.keys(options.methods).forEach((methodName,index){// 给当前的Vue实例一个扩展方法this[methodName] options.methods[methodName]})}
}
原理
通过Object.keys()获取vue实例中所有的方法名然后通过forEach()遍历在上述代码中this就是指向vm,也就是vue实例对象给实例对象一个拓展方法而是什么拓展方法与methods中的方法同名从而达到了通过vue实例可以访问到methods中的方法
将该文件引入到代码中 div classapp/divscriptconst vm new Vue({el:.app,data:{msg:methods的实现原理},methods:{app(){alert(hh)},app2(){alert(xx)}}})/script 若上即是methods实现原理
