首先，尝试一下计算属性computed
第一种写法
<template> <div> <p><input type="text" v-model="age"></p> <p><input type="text" v-model="nextAge"></p> </div> </template> <script> import { computed, ref } from 'vue' export default { setup() { const age = ref(18) const nextAge = computed(() => { return +age.value + 1 }) return { age, nextAge } } }
修改age，nextAge会跟着自动+1
但如果修改nextAge，会有警告：计算属性不能修改
第二种写法
<template> <div> <p><input type="text" v-model="age"></p> <p><input type="text" v-model="nextAge"></p> </div> </template> <script> import { computed, ref } from 'vue' export default { setup() { const age = ref(18) const nextAge = computed({ get() { return +age.value+1 }, set(value) { console.log(value) // 输出新修改的值 return age.value = value - 1 } }) return { age, nextAge } } }
另一种写法：
使用computed和watch, 一定记得先引入
import { reactive , computed,toRefs,watch} from "vue";
computed属性
使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。
如图所示，案例：
<p>原来值:{{ count }}</p> <p>计算属性更改的值:{{ twoNumber }}</p> //引用ref函数 可以实时更新数据 import { defineComponent, reactive , computed,toRefs,watch} from "vue"; export default defineComponent({ name: "HelloWorld", setup() { const state: any = reactive({ count: 1, twoNumber: computed(() => state.count*2) }); //暴露出去给外界使用 //使用toRefs解构响应式对象数据，实现实时更新 return { ...toRefs(state), }; },
watch属性 与 vue2中的 this.$watch (以及相应的 watch 选项) 完全等效。
watch(()=>state.count,(newValue, oldValue) => { console.log('改变了'); console.log('我是新的值',newValue); console.log('我是旧的值',oldValue); })
以上大概就是VUE3中watch与computed的大概用法。
