this の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+this へ行く。
• +Vue+this の差分を削除

#author("2022-05-12T09:17:37+08:00","default:Admin","Admin")
#author("2022-05-12T09:23:03+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本情報はVue 2.0を基づいて説明してる};
#contents

Vue中的this

* Vue所有的生命周期钩子方法里面 [#fbdee035]

在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例，即（new Vue）。

#codeprettify{{
<div id="app">
    <button class="btn btn-primary" v-on:click="on()">点击添加并查看this</button>
    <ul class="list-group" v-for="item in list">
        <li class="list-group-item">\{\{item\}\}</li>
    </ul>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            list: ["banner", "orange", "apple"]
        },
        methods: {
            on: function() {
            alert(this.list);
            this.list.push("Potato")
        }
})
</script>
}}

** vue实例本身的属性和方法里面 [#v8ed6e55]

如果是vue实例本身的属性和方法,那么this指向就是vue实例本身,比如methods对象,computed对象,watch对象里的方法。

方法名(){}写,就代表this指向是vue实例,

()=>{}箭头函数的方式定义方法,则this指向window,

因为箭头函数中的this指向的是外部函数的this指向,普通函数的this指向的是它的调用者,而vue中的methods和computed和watch他们都是vue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即this
因为箭头函数没有自己的this, 它的this是继承而来的，箭头函数中的this指向的是外部函数的this指向,普通函数的this指向的是它的调用者,而vue中的methods和computed和watch他们都是vue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即this


#codeprettify{{
methods:{
  a: function(){
    console.log(this)  //vm 用普通函数，this指向vue实例
    return;
  },
  b: ()=>{
    console.log(this) //箭头函数，this指向window
    return;
  },
},
}}

两个重要的小原则:

1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等)，最好写成箭头函数,这样this的指向才是vm或组件实例对象。

* 定时器用箭头函数普通函数 [#b6447d32]

箭头函数this等于父级函数this指向，下面的定时器必须用箭头函数，不能用普通函数。

#codeprettify{{
<script type="text/javascript">
const vm = new Vue({
    el : " #root",
    data:{
        firstName:'张',
        lastName:'三',
        fullName:'张-三'
    }，
    //监视属性
    watch:{
        //简写形式
        firstName(val){
            //当firstName修改后，1秒后触发计时器修改fullName
            //不写成setTimeout(function(){this.fullName = val +'-'+ this.lastName},1000);
            setTimeout(()=>{
                this.fullName = val +'-'+ this.lastName
            },1000);
        }
    }
})
<script>
}}


#hr();
コメント：
#comment_kcaptcha