Vue的数据响应式
getter和setter怎么用
示例代码
getter ,关键词为 get ,用于获取一个值。定义时为函数,但是使用时不用加括号。
setter 用于对数据的改写
Object.defineProperty
示例代码
可以给对象添加属性value
可以给对象添加getter / setter
getter / setter用于对属性的读写进行监控
代理:
对myData对象的属性读写,全权由另一个对象vm负责
那么vm就是myData的代理
用vm.n来操作myData.n
vue 对 data 做了什么
当你创建一个实例时
const vm = new Vue({data: myData})
vue 会让 vm 成为 myData 的代理。
vue 会对 myData 的所有属性进行监控。
目的
你可以使用 this 来访问到 vm。 this.n === myData.n
。
之所以要监控,就是防止 vue 无法得知 myData 的属性变化。
vue 得知属性变化才可以使用 render(data) 来更新 UI 和渲染页面。
数据响应式
响应式即对外界的变化做出的反应的一种形式。
const vm = new Vue({data:{n: 0}})
当修改 vm.n 或 data.n 时,render(data...)
中的 n 就会做出响应的响应。
这个联动的过程就是 vue 的 数据响应式。
vue 目前通过 Object.defineProperty
来实现数据响应式。
在 data 中添加属性
Vue 虽然对 data 中的属性(或对象中的属性)进行监听和代理,但是它却没有办法进行事先的监听和代理。
如果你在初始化 data 之后再添加属性,该如何实现?
一般对象
对于一般的对象来说,可以在 data 中预先把所有可能用到的属性全部写出来,这样并不需要新增属性,只需要改它。
也可以通过其他方法来添加属性。
在了解以上原理后,我们来了解 Vue 提供的一个 API:
Vue.set(object, key, value)
或
this.$set(object, key, value)
作用
- 在 data 中添加新的属性。
- 自动创建为它创建代理和监听(如果没有创建过)。
示例:
const Vue = window.Vue
new Vue({
data: {
obj: {
a: 0
}
},
template: `
<div>
{{obj.b}}
<button @click='one'>One</button>
</div>
`,
methods: {
one() {
Vue.set(this.obj, 'b', 1)
// 或 this.$set(this.obj, 'b', 1)
}
}
}).$mount('#app')
数组
因为数组本身的特殊性:数组的长度无法预测(比如所有用户的用户名,存在数组中),你无法使用 undefined 去为每一项占位,或一直使用 Vue.set( )
方法。
- 你可以使用 push 方法
this.array.push('value')
,但其实数组已经被 Vue 包装了新的 push 方法。 - 原理就是声明一个新的类来继承数组。
- 各种在 Vue 实例 中使用的特例方法, 详见
数组变异方法,一共有7个API。 - 这些方法 (API) 会自动处理对数组该项的监听和代理,并触发视图更新。
Vue的数据响应式的更多相关文章
- Vue 数据响应式原理
Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...
- 一探 Vue 数据响应式原理
一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...
- vue学习之响应式原理的demo实现
Vue.js 核心: 1.响应式的数据绑定系统 2.组件系统. 访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. va ...
- vue核心之响应式原理(双向绑定/数据驱动)
实例化一个vue对象时, Observer类将每个目标对象(即data)的键值转换成getter/setter形式,用于进行依赖收集以及调度更新. Observer src/core/observer ...
- Vue数据绑定和响应式原理
Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
- Vue 2.0 与 Vue 3.0 响应式原理比较
Vue 2.0 的响应式是基于Object.defineProperty实现的 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 prop ...
- Vue ----》 如何实现 sessionStorage 的监听,实现数据响应式
在开发过程中,组件中的随时可能改变的数据有的是缓存到sessionStorage里面的,但是有些组件取seesionStorage中的值时,并不能取到更新后的值. 接下来就说一下,当seesionSt ...
- 学习 vue 源码 -- 响应式原理
概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 sch ...
- vue原理探索--响应式系统
Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...
随机推荐
- clion更改大括号的位置
进入setting 搜索code style 如果是c++ /c 选择这个选项点开 wrapping and brace 里面 有brace placement 选择你想要的方式
- IDEA 2020.1.2,IDEA 2020.1.3永久破解(持续更新)
1. 本教程适用于 IntelliJ IDEA 2020.1.3 以下所有版本,请放心食用~2. 本教程适用于 JetBrains 全系列产品,包括 IDEA. Pycharm.WebStorm.Ph ...
- Python无限循环
Python 无限循环:在 while 循环语句中,可以通过让判断条件一直达不到 False ,实现无限循环. 条件表达式: # var = 1 # while var == 1: # 表达式永远为 ...
- pdb 进行调试
import pdb a = 'aaa' pdb.set_trace( ) b = 'bbb' c = 'ccc' final = a+b+c print(final) import pdb a = ...
- PHP strstr() 函数
实例 查找 "world" 在 "Hello world!" 中是否存在,如果是,返回该字符串及后面剩余部分: <?php echo strstr(&qu ...
- PHP quoted_printable_encode() 函数
定义和用法 quoted_printable_encode() 函数把 8 位字符串转换为 quoted-printable 字符串. 提示:经过 quoted-printable 编码后的数据与通过 ...
- Linux 如何以管理员身份运行终端
如何以管理员身份在终端执行指令: 目录 如何以管理员身份在终端执行指令: 1. 以sudo 指令在其他指令前加上sudo 2. 以su 进入root权限,以管理员方式执行命令 设置root初始密码: ...
- ACL2020 Contextual Embeddings When Are They Worth It 精读
上下文嵌入(Bert词向量): 什么时候值得用? ACL 2018 预训练词向量 (上下文嵌入Bert,上下文无关嵌入Glove, 随机)详细分析文章 1 背景 图1 Bert 优点 效果显著 缺点 ...
- demo2动态加载显示商品详情页
/* 要求:实现 头像+昵称(多余7位用...) 商品图片(根据商品实际的图片的大小进行动态的展示.按照一定的比例进行展示.) 产品简介.产品简介在商品图片的下边.并跟随商品图片的大小进行动态的收缩或 ...
- Python入门看这些,最详细学习书籍推荐
随着人工智能以及脚本开发火热,Python已经被推上一个非常火热的巅峰! 那么,想要学习Python却又不知道从哪里开始的朋友,看这里呀~ Python在整个编程语言来说,是比较容易上手,而且“见效” ...