用法
methods中定义了vue实例的方651法，官网是这样介绍的:
例如::
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <title>document</title></head><body> <div id="app">{{message}}<button @click="changemessage">测试按钮</button></div> <script> new vue({ el:'#app', data:{message:"hello world!"}, methods:{ changemessage:function(){this.message="hello vue!";} } }) </script></body><ie缓存位置/html>显示的样式为:
当我们点击按钮后变为了:
methods方法中的上下文为当前实例，也就是this为当前实例。
注:不应该使用箭头函数来定义 method 函数 (例如changemessage:()=>this.message=”hello vue”)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 vue 实例，this.message 将是 undefined。
源码分析
vue实例后会先执行_init()进行初始化(4579行)时，会执行initstate()对props, methods, data, computed 和 watch 进行初始化,如下:
function initstate (vm) { //第3303行 vm._watchers = []; var opts = vm.$options; if (opts.props) { initprops(vm, opts.props); } if (opts.methods) { initmethods(vm, opts.methods); } //如果定义了methods，则调用initmethods初始化data if (opts.data) { initdata(vm); } el { obrve(vm._data = {}, true /* asrootdata */); } if (opts.computed) { initcomputed(vm, opts.computed); } if (opts.watch && opts.watch !== nativewatch) { initwatch(vm, opts.watch); }}initmethods()定义如下:
function initmethods (vm, methods) { //第3513行 var props = vm.$options.props; for (var key in methods) { //遍历methods对象,key是每个键，比如例子里的changemessage { if (methods[key] == null) { //如果值为null，则报错 warn( "method \"" + key + "\" has an undefined value in the component definition. " + "did you reference the function correctly?", vm ); } if (props && hasown(props, key)) { //如果props中有同名属性，则报错 warn( ("method \"" + ktired的比较级和最高级ey + "\" has already been defined as a prop."), vm ); } if ((key in vm) && isrerved(key)) { //如果key是以$或_开头则，也报错 warn( "method \"" + key + "\" confli教师节是什么时候cts with an existing vue instance method. " + "avoid defining component methods that start with _ or $." ); } } vm[key] = methods[key] == null ? noop : bind(methods[key], vm); //如果key对应的值不是null，则执行bind()函数 }}执行bind()函数，参数1为对应的函数体，参数2是当前的vue实例，bind()函数定义在第196行，如下:
function polyfillbind (fn, ctx) { //当function的原型上不存在bind()函数时，自定义一个函数实现同样的功能，用apply()或call()来实现 function boundfn (a) { var l = arguments.length; return l ? l > 1 ? fn.apply(ctx, arguments) 齐秦好听的歌 : fn.call(ctx, a) : fn.call(ctx) } boundfn._length = fn.length; return boundfn}function nativebind (fn, ctx) { //调用function的原型上的bind()方法，上下文闻ctx return fn.bind(ctx)}var bind = function.prototype.bind //如果function的原型上有bind方法，则调用该方法，否则用自定义的polyfillbind()方法 ? nativebind : polyfillbind;相比较其它api，method的实现是比较简单的。
本文发布于:2023-04-06 06:46:50，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/2fa8d4a36ee1697c5396b43b07578750.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Vue 2.0 深入源码分析(五) 基础篇 methods属性详解.doc
本文 PDF 下载地址：Vue 2.0 深入源码分析(五) 基础篇 methods属性详解.pdf
| 留言与评论（共有 0 条评论） |
