vue中数据改变 界面不更新问题

vue双向绑定问题中，不能实现及时更新的问题：

1. 不在data中显式声明的对象不能及时更新
2. 在form中，经过v-model的变量 或 在其他html标签中 使用v-bind:方法的变量才能及时更新
3. vue不能检测到对象属性的增加，修改，删除， 不能及时触发DOM的更新，需要借用其他的更新。
4. 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')
}