博客地址:http://www.globm.top/blog/1/detail/40
vue双向绑定问题中,不能实现及时更新的问题:
- 不在data中显式声明的对象不能及时更新
- 在form中,经过v-model的变量 或 在其他html标签中 使用v-bind:方法的变量才能及时更新
- vue不能检测到对象属性的增加,修改,删除, 不能及时触发DOM的更新,需要借用其他的更新。
- vue不能检测数组的项修改(根据index)、length修改(仅此而已,可直接对数组重新赋值,如使用filter、map、concat、slice等方式生成新数组对其赋值)
—————————————————————————————
//对象属性不能更新数据
this.form.img = res.data.file_name
//解决方法
this.$set(this.form,'img',res.data.file_name)
在vue父子子组件传值过程中,子组件并不能实时根据父组件的值改变,这时可以使用vue 的watch属性来监听父组件传过来的值,再执行操作
//基础数据类型
watch:{
num1(newVal){
this.img = newVal
}
}
//数组的监听
watch:{
arr1: {
handler(newVal) {
this.tableData = newVal
},
deep: true //划重点
}
}
//对象的监听
watch:{
obj1: {
handler(newVal) {
this.form = newVal
},
deep: true //划重点
}
}
那么,有时,我们可能会遇到这种情况,vuex中的数据,在子组件中并不能实时更新,但是在子组件中无法使用watch直接监听this.$store.state,这时可以使用computed来配合watch监听
watch:{
list(newVal){
//最好使用vue.set更新数据
this.$set(this.treeData,'lists',newVal)
}
},
computed:{
list(){
return this.$store.state.menu
}
}