第十九天2019-01-19

碎碎念

今天碰到一个需求,就是在element-ui表格中,列表操作这一列有下载和删除按钮,需要点击某一行的下载按钮,该行下载按钮显示正在下载的loading状态。这个看了下,应该只能是通过在scope.row对象中加属性,比如:isDownloading。这个就要求新属性isDownloading,能够具有响应式特性。


深入响应式原理

  • 追踪变化
    下面这张图,是基于Object.defineProperty 实现响应式的关键。

不巧的是,受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),Vue 不能检测到对象属性的添加或删除。[1]

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:[1]

  • 添加响应式属性
    使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象
  • 一个已有对象添加多个属性
    // 代替 Object.assign(this.someObject, { a: 1, b: 2 })
    this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

vuejs 提供的Api

Vue.set( target, key, value )
参数:

{Object | Array} target
{string | number} key
{any} value
返回值: 设置的值。
用法: 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

实践

实践了一下,响应式的对象。在拉取list的forEach里新增一个响应式属性,this.$set(this.list, 'isDownloading', false)。然后就可以在操作前置true,操作后false。在列表的地方就可以用响应式的isDownloading属性了!

参考

[1]. https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96
[2]. https://cn.vuejs.org/v2/api/#Vue-set
——————————————————-end———————————————————–

文章作者: lmislm
文章链接: http://lmislm.com/2019/01/19/2019-01-19/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog