vue 组件不更新的问题（原始类型变量赋值、对象赋值视图不更新、数组赋值视图不更新）

在vue中，以下三种形式的赋值，变量的值会发生变化（这也就是为什么console的时候看到值发生了变化，但是视图就是不更新），但是不会触发视图的更新

一、原始类型的变量没有放入data return的变量中，在页面中虽然可以渲染该变量，但是这个变量并没有绑定到vue实例上，该变量赋值就不会触发视图更新。当然，一般是不会犯这种错误的。

不会触发视图更新

let name = '翁同和'

export default {
    data() {
        this.name = name
        return {}
    },
    
    methods: {
        handleChangeName () {
            this.name = '李鸿章'
        }
    }
}

正确写法，会触发视图更新

export default {
    data() {
        return {
            name: '翁同和'
        }
    },
    
    methods: {
        handleChangeName () {
            this.name = '李鸿章'
        }
    }
}

二、对象的某一属性赋值时，如果这个属性没有在data中声明，那么也不会触发视图更新。

不会触发视图更新

export default {
    data () {
        return {
            userInfo: {}
        }
    },

    methods: {
        handleChangeUserInfo () {
            this.userInfo.name = '张之洞' 
        }
    }
}

正确写法，会触发视图更新

export default {
    data () {
        return {
            userInfo: {
                name: '袁XX'
            }
        }
    },

    methods: {
        handleChangeUserInfo () {
            this.userInfo.name = '张之洞' 
        }
    }
}

三、操作数组时，使用数组的索引赋值时，数组发生变化，但视图不更新！！！这个应该时最常见的问题！！！！

视图不会更新

export default {
    data () {
        return {
            list: ['a', 'b', 'c']
        }   
    },
    
    methods: {
        handleChangeList () {
            this.list[0] = 'aaa'
        }
    }
}

正确写法，视图会更新

export default {
    data () {
        return {
            list: ['a', 'b', 'c']
        }   
    },
    
    methods: {
        handleChangeList () {
            this.list.splice(0, 1, 'aaa')
        }
    }
}

另外，需要注意的是：使用filter()，concat()，slice()方法操作数组，不会更新视图；使用push()，pop()，shift()，unshift()，splice()，sort()，reverse()方法操作数组，会触发视图更新。

【注意】 以上覆盖了所有常见的情况，需要demo，可自行下载。。。demo下载链接

如果你看到了这里，请小伙伴给个一键三连，你的肯定是对我最大的鼓励^-