如何动态的去监听数值变化？

[Gaays]

比如通过数组渲染一个表单,根据 formList 渲染，有三个表单项，分别是蔬菜、水果和卡路里，现在输入蔬菜的值后，计算卡路里。卡路里与蔬菜这个表单项有关联关系。

这种应该怎么实现数据输入监听动态更新关联表单项的值，给每一个表单项都设置一个 input 事件？然后判断 id 是否与 joinId 相同？然后更新关联表单项的值？有更优美的方法嘛（表项数量、关联字段不定）

谢谢大家

formList=[
	{
    	id:1,
        type:'单选',
        label:'蔬菜'
    },
    {
    	id:2,
        type:'多选'，
        label:'水果'
    },
    {
    	id:3,
        type:'关联',
        joinId:1,
        label:'卡路里'
    },
]

[zzfer]

我是个后端，一年前写过一些 vue ，可能说的不太对。你说的好像 vue 的 watch 事件就可以实现吧。

一些 ui 框架的表单也支持关联改动吧

[haah]

简单，轮询呀！

[haah]

轮询后对比 JSON 值！

[lcorange]

https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7

用 watch 或者 computed 看看

[haah]

还是用原生 js 好一些！

[Gaays]

@zzfer
@lcorange
watch 只能针对指定值监听，或者监听整个表单的数据对象，我想知道除了监听整个数据对象之外还有没其他方式更精准的获取指定表单项数据变动，我目前想到的做法是在渲染表单项的时候提前遍历一遍，比如给 formList 每一被关联项添加一个 key 来判断，然后 v-if 条件渲染，被关联的表单项添加一个 input 或者 change 事件。

[err1y]

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

proxy 监听 set 赋值

[lcorange]

@Gaays https://v3.cn.vuejs.org/api/instance-methods.html#watch
看看这里的 deep 选项可不可行