vue中未定义属性视图更新问题

在Vue中，如果采用选项式编写代码时候，一般会在data函数中定义我们要用到的属性，如果没有在data函数中属性，则该属性将无法触发响应式更新。这也是我们在实际项目中可能出现有些数据已经变化，但视图没有更新的情况。一般会采用比较暴力的方式，采用$forceUpdate()进行强制更新

data() {
    return {
        //name: '小白'
    }
},
mounted() {
    //视图不会进行更新
    this.name = '小白'
}

如果需要在选项式API中需要使用组合式API时候，我们需要使用到setup钩子函数作为入口

setup() {
    //定义一个age变量，并将其返回，返回值暴露给模板和其他的选项式API钩子
    let age = ref(18)
    return {
        age
    }
}
methods: {
    change() {
        //对其进行操作，页面中数据也会发生变化
        this.age = 20
    }
}

有意思的是，如果我们将没有在data函数中定义的属性，与setup钩子函数返回的属性在一个方法中进行修改的时候，页面上视图也会发生变化，类似于使用$forceUpdate()一样

change() {
    this.name = '小红'
    this.age = 20
}

虽然这种操作也能使未在data中定义的属性做到响应式更新，不过我们最好还是在data中定义需要使用的属性，避免出现视图不及时更新的情况；至于为什么会出现这种情况，暂时还不是很清楚，如果有知道的朋友，欢迎指导