Vue3 computed-计算属性

<template>
	<p>{{msg}}</p>
    <input type="text" v-model="val">
</template>

<script setup>
import { ref, computed } from 'vue'
const msg = ref('666')
const val = computed({
	get: () => {
		return msg.value
	},
	set: (value) => {
		// value是被修改后的值
		return msg.value = value
	}
})
// 当只需要使用到get:()时的简写方法
const val2 = computed(() => {
	// 此时等同于调用get:()
	return msg.value
})
</script>

初始页面进入，input值为666，因为双向绑定val中的get返回值为msg的值，此时修改input中的值为999，set方法被触发，则页面msg的值变为999