title: New to vue, used Jquery, but not really Javascript, I'm confused by "this" in Vue... are there any simple rules to follow
body: <p>So I'm learning Vue, without having ever really been a javascript programmer, I did some light Jquery, but that's about it. Mostly I've done c++ and c# where 'this' behaves much more simply.</p>
  <p>I'm reading about this in Javascript, but I'm trying to grok just in Vue, and
  built a set or rules or patterns to follow in Vue. I'm not there yet from the this rules in JS</p>
  <p>In Vue Sometimes *(like in Lifecycle Hooks) you HAVE to use a function so that 'this' is the vue page object:</p>
  <p>mounted: function () {
  console.log(this);
  }</p>
  <p>or in es5+</p>
  <p>mounted() {
  console.log(this);
  }</p>
  <p>But other times, for Vue to have a correct meaningful this, you HAVE to use an arrow function, Like when using Axios</p>
  <p>axios.get( obj.Url + &quot;StudentAdName=&quot; + obj.StudentAdName )
  .then(response =&gt; {// if you use a method here this is a Bad Value
  this.info = response.data;
  this.isloaded = true;
  })
  .catch(function (error) {
  console.log(error);
  });</p>
  <p>And I'm finding this mightily confusing, when do you have to use a function, and when do you have to use an arrow function.</p>
  <p>I read that Functions have an implicit 'this' based on who Is calling them, and arrow function &quot;look up&quot; their this based on some obscure javacript rules...</p>
  <p>But I don't know how to turn that into a set of rules to follow on when to use which.</p>
  <p>So Far I have</p>
  <p>Rules to Have a Valid This pointer in Vue</p>
  <ol>
  <li>Always call a function when writing a &quot;lifecycle Hook&quot; call in Vue.</li>
  <li>Always use a arrow function, something something, Axios, something something, chaos.</li>
  </ol>
  <p>Alternately, as simple consistent set of patterns to have this in Vue always refer to the vue page object would be great (like how to use &quot;that&quot; to be right when this isn't)</p>