最近公司开始使用vue开发,同事在开发中出现一个奇怪的问题。一个普通的管理系统,左边一个机构树 tree 右边一个表格,上方有个搜索输入框。如下图所示,tree是使用render进行自定义的。当在用户名或者邮箱的输入框中输入内容的时候,这颗树的render方法就被触发了。
看似两者没有什么关系,一开始也很奇怪,后来看了同事的代码,发现同事在render函数中去调用了表格查询数据的方法,data的属性值与这颗树绑定了,因为input与data数据的属性字段进行了v-model,所以当进行输入的时候等于修改了data里面的值,而这棵树是监听这个字段的,你字段的改变就执行了render函数。
在网上查了下资料,
关于input的输入内容触发tree的render函数问题
如果将data里的字段放在了render中使用,而data的字段 的值改变的时候就会触发render函数,因为data里的字段与input进行了v-model的双向绑定,所以input输入内容等于data的值也改变了,就触发了render 。
例如下方这样的写法。searchData.name的值改变就会触发render。