声明响应式属性

由于vue不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值:

var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'
如果你在data属性中未声明message,vue将警告你渲染函数在试图访问的属性不存在
这样的限制在背后是有技术原因的,它消除了在依赖项跟踪系统中的一类边界情况,也是vue实例在类型检查系统的帮助下运行的更高效。而且在代码可维护性方面也有一点考虑:data对象就像组件状态的概要,提前声明所有的响应式属性,可以让组件代码在以后阅读或其他开发人员阅读时更易于理解。
异步更新队列

可能你还没有注意到,vue异步执行DOM更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变化。如果同一个watcher被多次触发,只会一次推入到队列中,这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后,在下一个事件循环"tick"中,vue刷新队列并执行实际(已去重)工作。
vue在内部尝试对异步队列使用原生的promise.then和MutationObserver(突变的观察者),如果执行环境不支持,会采用setTimeout(fn,0)代替。
例如,当你设置vm.somedata = 'new value',该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空是的下一个“tick”更新。多数情况下,我们不需要关心这个过程,但是如果你想在DOM状态更新后做点什么,这就可能有点棘手。虽然vue通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触DOM,但有时我们确实需要这么做,为了在数据变化之后等待vue完成更新DOM,可以再数据变化之后立即使用vue.nextTick(callback)。这样回调函数在DOM更新完成后就会调用。例:
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
在组件内使用vue.$nextTick()实例方法特别方便,因为它不需要全局vue,并且回调函数中的this将自动绑定到当前的vue实例上,
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '没有更新'
}
},
methods: {
updateMessage: function () {
this.message = '更新完成'
console.log(this.$el.textContent) // => '没有更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '更新完成'
})
}
}
})

vue 声明响应式属性的更多相关文章

  1. vue深入响应式原理

    vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...

  2. 深入Vue的响应式原理

    工作的过程中,有时候会有数据改变但是视图没有更新的问题,作者在vue的官方文档中有提到这个问题,我来总结一下 1.vue的每个组件实例都有对象的watcher实例对象,它会在组件渲染的过程中把属性记录 ...

  3. Vue 响应式属性

    本文参考自:https://www.w3cplus.com/vue/vue-reactivity-and-pitfalls.html 1.概述 当创建一个Vue实例时,每个数据属性.组件属性等都是可以 ...

  4. Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

    一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...

  5. Vue 数据响应式原理

    Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...

  6. Vue的响应式原理

    Vue的响应式原理 一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...

  7. vue系列---响应式原理实现及Observer源码解析(一)

    _ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的 ...

  8. 一探 Vue 数据响应式原理

    一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...

  9. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

随机推荐

  1. 【可持久化Trie】bzoj3261 最大异或和

    对原序列取前缀异或值,变成pre[1...N],然后询问等价于求max{a[N]^x^pre[i]}(l-1<=i<=r-1). #include<cstdio> #defin ...

  2. 【莫队算法】【权值分块】poj2104 K-th Number / poj2761 Feed the dogs

    先用莫队算法保证在询问之间转移的复杂度,每次转移都需要进行O(sqrt(m))次插入和删除,权值分块的插入/删除是O(1)的. 然后询问的时候用权值分块查询区间k小值,每次是O(sqrt(n))的. ...

  3. python3-开发面试题(python)6.22基础篇(1)

    1.为什么学习Python? 1.语言排行榜 2.语言本身简洁,优美,功能超级强大的 3.跨平台 4.非常火爆的社区 5.用的公司的多 2.通过什么途径学习的Python? 某宝2.8就搞定了,跟着视 ...

  4. 微服务之SpringCloud实战(三):SpringCloud Eureka高可用

    高可用Eureka 高可用我就不再过多解释了,Eureka Server的设计一开始就考虑了高可用的问题,在Eureka的服务治理设计中,所有的节点即是服务提供方也是消费方,注册中心也不例外,上一章中 ...

  5. React Native学习之DeviceEventEmitter传值

     使用DeviceEventEmitter前需添加 import { AppRegistry, StyleSheet, Text, View, DeviceEventEmitter } form 'r ...

  6. Node.js的集群功能以及在Express的配置

    Node.js在v0.6.0版本下内置了集群功能,作为cluster模块,用于nodejs的多核处理,也比较容易通过脚本实现一个负载均衡的集群. 脚本参考了其他人的材料,建立一个server.js(因 ...

  7. python的dict如何排序

    Python的内置dictionary数据类型是无序的,通过key来获取对应的value.可是有时我们需要对dictionary中 的item进行排序输出,可能根据key,也可能根据value来排 # ...

  8. 用Storyboard构建标签栏多页面应用程序UI

    注: 貌似CSDN的显示效果不佳,假设有须要的话我能够上传pdf格式的: 另外假设文章中有错误还请给位多多提意见,谢谢. pdf格式文档:http://download.csdn.net/detail ...

  9. 快速打开IIS的方法

    方法一: 在运行(win+r)输入inetmgr 方法二: 控制面板\所有控制面板项\管理工具\IIS 建议使用第一种方法

  10. elasticsearch term 查询二:Range Query

    Range Query 将文档与具有一定范围内字词的字段进行匹配. Lucene查询的类型取决于字段类型,对于字符串字段,TermRangeQuery,对于数字/日期字段,查询是NumericRang ...