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来将数据进行动态渲染。