vue中数据改变 界面不更新问题
vue双向绑定问题中,不能实现及时更新的问题:不在data中显式声明的对象不能及时更新在form中,经过v-model的变量 或 在其他html标签中 使用v-bind:方法的变量才能及时更新vue不能检测到对象属性的增加,修改,删除, 不能及时触发DOM的更新,需要借用其他的更新。vue不能检测数组的项修改(根据index)、length修改(仅此而已,可直接对数组重新赋值,如使...
vue双向绑定问题中,不能实现及时更新的问题:
- 不在data中显式声明的对象不能及时更新
- 在form中,经过v-model的变量 或 在其他html标签中 使用v-bind:方法的变量才能及时更新
- vue不能检测到对象属性的增加,修改,删除, 不能及时触发DOM的更新,需要借用其他的更新。
- vue不能检测数组的项修改(根据index)、length修改(仅此而已,可直接对数组重新赋值,如使用filter、map、concat、slice等方式生成新数组对其赋值)
解决办法:
this.$nextTick(()=>{
// DOM 更新了
})
this.$set(this.data, 'key', 'newValue')
this.$delete(this.data, key)
// 使用js方法
Object.assign()
// 使用数组的操作函数(其实已被Vue进行了修改)
splice(),
push(), pop(),
shift(), unshift(),
sort(), reverse()
v-model绑定的数据需要为 LHS,而不能为 RHS(item及&&、||、=、(,)、双目等运算符返回LHS),举例如下:
// 错误, item为RHS
<input v-for="(item, index) in texts" :key="index" v-model="item">
// 错误
<input v-for="(item, index) in texts" :key="index" v-model="1 > 0 ? texts[index] : codes[index]">
// 错误
<input v-for="(item, index) in texts" :key="index" v-model="(1 > 0 && texts[index]) || codes[index]">
// 正确
<input v-for="(item, index) in texts" :key="index" v-if="1>0" v-model="texts[index])">
<input v-for="(item, index) in texts" :key="index" v-if="1<0" v-model="codes[index]">
// 正确
<input v-for="(item, index) in texts" :key="index" v-model="texts[index]">
LHS与RHS:javascript引擎的两种查找类型,含义是赋值操作的左侧与右侧。
LHS:对哪个赋值就对哪个进行LHS引用,可以理解为赋值操作的目标。
RHS:需要获取哪个变量的值,就对哪个变量的值进行RHS引用,理解为赋值操作的源头。
computed必须绑定一个data中的数据(或对象的属性、数组的项),否则无法响应式更新,尤其注意绑定初始不存在的数据时,举例如下:
computed: {
// 错误
prop () {
if(!this.obj.data) return {}
return this.obj.data
}
// 正确,使用Vue.set或Object.assign亦可
prop () {
if(!this.obj.data) this.$set(this.obj, data, {}})
return this.obj.data
}
// 错误
prop () {
if(!this.obj.arr) return []
return this.obj.arr
}
// 正确
prop () {
if(!this.obj.arr) this.$set(this.obj, arr, []})
return this.obj.arr
}
}
vue 其他的坑:
1 v-show
不支持 <template>
元素,也不支持 v-else
。所以在el-table中列控制 不能用v-show 用 v-if。
2 $forceUpdate 它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。它解决的问题是:数据层次太多,render函数没有自动更新,需手动强制刷新。所以使用它的前提是数据改变了。
3 计算属性传参:利用闭包
computed: {
computedTxt() {
return function(value) {
return this.methodGetByteLen(value, 20)
}
}
}
计算属性可以依赖其他计算属性; 二是计算属性不仅可以依赖当前Vue 实例的数据,还可以依赖其他实例的数据
计算属性默认只有getter,在你需要时,也可以提供一个setter 函数
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
4 this.$emit 也可传递函数。
this.$emit('query', this.input,function () {
msg // hello
})
query(input, callback) {
callback('hello')
}
更多推荐
所有评论(0)