定时器setinterval函数+数据页面渲染

Question

为什么不能将数据渲染到页面上

```html
<template>
  <p v-html="state"></p>
  <button @click="asd">切换</button>
 </template>
     
 <script>
 export default {
   data() {
     return {
       state:"问题接收"
     };
   },
   methods: {
     asd(){
       let states= [ "问题解析", "发送给ChatGPT", "等待ChatGPT回答"]
       let i=0
       const timeTop = setInterval(function () {
         this.state=states[i]
         console.log(this.state)
         i++
         if (i >=states.length) {
           clearInterval(timeTop);
         }
         
       }, 1000);
     }
   },
 
 };
 </script>

但是把定时器里的函数，换成箭头函数的话数据就会成功渲染（请问是什么原因）

```

Answer 1

this指向的问题，使用function的话this指向的是计时器，使用箭头函数this指向的是计时器的上一级，也就是vue