解决Vue数组更新不渲染的问题

当使用索引直接赋值和直接修改数组长度时，Vue不能检测出变动的数组。
这样写页面显示的是共0个

<span class="pull-right">已全部加载，共{{fileDatas.length}} 个</span>

js:

export default {
    data() {
        return {
          fileDatas: []
        }
    },
    created() {
        this.getData();
     },
     methods: {
       getData() {
            var that = this
            var api ='/api/directory/null';
            console.log('api:' + api)
            that.$axios.get(api).then((res) => {
                console.log('data' + JSON.stringify(res.data.data))
                var i =0
                for (i=0;i<res.data.data[0].children.length;i++){
                    that.fileDatas[i] = res.data.data[0].children[i]
                }
                console.log('that.fileDatas##' + that.fileDatas.length)
                console.log('that.fileDatas = ' + JSON.stringify(that.fileDatas))
            })
        }
     }

getData方法要改成下面的，给数组赋值要写成this.$set()，出现的结果是正确的。

 methods: {
       getData() {
            var that = this
            var api ='/api/directory/null';
            console.log('api:' + api)
            that.$axios.get(api).then((res) => {
                console.log('data' + JSON.stringify(res.data.data))
                var i =0
                for (i=0;i<res.data.data[0].children.length;i++){   
                    this.$set(this.fileDatas,i,res.data.data[0].children[i])
                    console.log('this.fileDates+++' + JSON.stringify(this.fileDatas))
                }
                console.log('that.fileDatas##' + that.fileDatas.length)
            })
        },
     }

如果是对象数组可以在for循环中定义一个对象赋给数组

 for (i=0;i<res.data.data[0].children.length;i++){
                    var obj = new Object()
                    obj.id = res.data.data[0].children[i].id
                    obj.name = res.data.data[0].children[i].name
                    obj.size = res.data.data[0].children[i].size
                    obj.checked = false
                    obj.iconStyle = 'fa fa-folder slot-t-top-button'
                    obj.createTime = res.data.data[0].children[i].createTime
                    console.log('obj===' + JSON.stringify(obj))
                    this.$set(this.fileDatas,i,obj)
                    console.log('this.fileDates+++' + JSON.stringify(this.fileDatas))
                }

作为笔记使用，借鉴 https://www.jb51.net/article/126756.htm
关于vue set 的使用可以借鉴 https://blog.csdn.net/qq_30455841/article/details/78666571