Vue 数据双向绑定的误区
都知道 Vue 的核心是数据的双向绑定:即数据变化,DOM中的显示值即变化;
但有个例外,
<template> <div> <input v-model="form.name" /> <span>{{form.code}}</span> <input v-model="form.old" /> </div> </template> <script> export default { data() { return { form: { name: '张三', code: '0001' } } }, watch: { ['form.name']() { console.log(this.form) }, ['form.old']() { console.log(this.form) } }, mounted() { this.form.old = 12 }, methods: { oldInput(value) { this.form.old = value } } } </script>
参数中 form.old是后加的参数,这样的结果就是form.old变化时,是监听不到数据变化的,会导致一些逻辑问题。
所以在Vue中要实现数据的双向绑定,一定要初始化时,参数一定要存在,否则就会有意想不到的问题