vue2.x与vue3.0的响应式数据演示

2.x时代的响应式与3.0的稍有不同。我一一列出来，2.x的响应式一般有两种写法，因为作用域的不同，很可能造成你写的代码无效果。

2.x的第一种：
（同作用域下）

export default {
    
    
    name:"StaffAdmin",
    data(){
    
    
        return{
    
    
            staffList:[],
            loading:false
        }
    },
    created(){
    
    
        this.loading = true

    },
   
}

在函数或方法内，在与data同作用域的情况下，可以直接使用this来改变data里面数据的值，此时该数据就为响应式数据。

2.x的第二种：
（不同作用域下）
如何判断是不是同一作用域呢？假如你在一个方法内进行了一次post请求，接着在请求体内返回参数进行展示，在此请求体内就变成了另外一个作用域，如果此时再继续使用this，就不能成功的将返回的数据赋给data里面的变量。
所以，请看演示代码：

<script>

import {
    
    fetchData} from '@/utils/reqs'
export default {
    
    
    name:"StaffAdmin",
    data(){
    
    
        return{
    
    
            staffList:[],
            loading:false
        }
    },
    created(){
    
    
        this.loading = true
        var _this = this
        var query = {
    
    
            data:{
    
    
                uuid:this.uuid
            },
            url:'/web/AdminSupplier/supplierStaffList'
        }
        fetchData(query).then(res=>{
    
    
            _this.staffList = res.data
            _this.loading = false
        })
    }
    }
}
</script>

比如在fetchData的then内，就是与created内不同的作用域。所以我们就需要在请求方法体外面，将this赋值给一个变量，再在去请求方法体内用这个变量来进行响应式数据处理。

vue3.0中不再有this这个词，想要响应式数据，可以通过toRefs来将数据进行动态渲染。