请问vue中this与dom的问题

小黄人
  • 50

c2ae41ebec143ba53fa01dfc833e86b.png
4f8874ee0f6e56dfbabdaa2f547933e.png
请问上图中两者的v-if判断中的this.a与a有区别吗?
image.png
若是在table中好像写this又无法获取到数据,请指教!!

回复
阅读 293
3 个回答

在模板中使用变量不要加this,this是函数作用域,而模板经过编译后,在运行里面的语法,如果没有使用bind、call等绑定this,那么你知道this会指向哪?这不可控。而不加this为什么可以,因为为了解决这个问题,vue使用了with关键字强行改变了模板中的作用域,但这也使得此时再使用this,找不到this了,因为相当于this.this.xx

你这个问题是因为scope;正如楼上所说,vue2里是用的with来使得模板可以直接访问实例属性;看下源码里的generate:

function generate (
    ast,
    options
  ) {
    var state = new CodegenState(options);
    var code = ast ? genElement(ast, state) : '_c("div")';
    return {
      render: ("with(this){return " + code + "}"),
      staticRenderFns: state.staticRenderFns
    }
  }

关于with的内容可以看MDN
为什么你的table不起作用这就涉及到scope的编译,它最终编译出的code不是with,而是一个函数,具体你可以打印出来或者打断点看看再或者webpack/cli打包一下看看输出的code就能理解this指向;所以不要在模板中使用this,多此一举还有可能有bug

q想
  • 3
新手上路,请多包涵

虚拟DOM里面写上this应该是不行的,你应该直接写a或者b

你知道吗?

宣传栏