Vue 3 怎样动态修改响应式变量的值？

Question

// Vue 2
methods: {
    setValue(key, val) {
        this[key] = val
    } 
}

// Vue 3
const setValue = (key, val) => {
    ...
}

Vue 3 该怎么写呢？

Answer 1

Vue3 也是可以用选项式来写的，只不过大部分人会按照推荐的组合式来写。

选项式就是还是使用原来的 this[key] = value 的方式就可以了。
组合式的话，就不能用原来的方式了，不过你可以通过再包裹一层的方式来处理比如说：

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
const testObj = { msg }
testObj['msg'].value = '动态属性名赋值'
</script>

Answer 2

// vue3
const setValue = (key, val) => {
    this[key] = val
}

是同样的