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的数据响应式的更多相关文章

  1. Vue 数据响应式原理

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

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

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

  3. vue学习之响应式原理的demo实现

    Vue.js 核心: 1.响应式的数据绑定系统 2.组件系统. 访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. va ...

  4. vue核心之响应式原理(双向绑定/数据驱动)

    实例化一个vue对象时, Observer类将每个目标对象(即data)的键值转换成getter/setter形式,用于进行依赖收集以及调度更新. Observer src/core/observer ...

  5. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  6. Vue 2.0 与 Vue 3.0 响应式原理比较

    Vue 2.0 的响应式是基于Object.defineProperty实现的 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 prop ...

  7. Vue ----》 如何实现 sessionStorage 的监听,实现数据响应式

    在开发过程中,组件中的随时可能改变的数据有的是缓存到sessionStorage里面的,但是有些组件取seesionStorage中的值时,并不能取到更新后的值. 接下来就说一下,当seesionSt ...

  8. 学习 vue 源码 -- 响应式原理

    概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 sch ...

  9. vue原理探索--响应式系统

    Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...

随机推荐

  1. clion更改大括号的位置

    进入setting 搜索code style 如果是c++ /c 选择这个选项点开 wrapping and brace 里面 有brace placement 选择你想要的方式

  2. IDEA 2020.1.2,IDEA 2020.1.3永久破解(持续更新)

    1. 本教程适用于 IntelliJ IDEA 2020.1.3 以下所有版本,请放心食用~2. 本教程适用于 JetBrains 全系列产品,包括 IDEA. Pycharm.WebStorm.Ph ...

  3. Python无限循环

    Python 无限循环:在 while 循环语句中,可以通过让判断条件一直达不到 False ,实现无限循环. 条件表达式: # var = 1 # while var == 1: # 表达式永远为 ...

  4. pdb 进行调试

    import pdb a = 'aaa' pdb.set_trace( ) b = 'bbb' c = 'ccc' final = a+b+c print(final) import pdb a = ...

  5. PHP strstr() 函数

    实例 查找 "world" 在 "Hello world!" 中是否存在,如果是,返回该字符串及后面剩余部分: <?php echo strstr(&qu ...

  6. PHP quoted_printable_encode() 函数

    定义和用法 quoted_printable_encode() 函数把 8 位字符串转换为 quoted-printable 字符串. 提示:经过 quoted-printable 编码后的数据与通过 ...

  7. Linux 如何以管理员身份运行终端

    如何以管理员身份在终端执行指令: 目录 如何以管理员身份在终端执行指令: 1. 以sudo 指令在其他指令前加上sudo 2. 以su 进入root权限,以管理员方式执行命令 设置root初始密码: ...

  8. ACL2020 Contextual Embeddings When Are They Worth It 精读

    上下文嵌入(Bert词向量): 什么时候值得用? ACL 2018 预训练词向量 (上下文嵌入Bert,上下文无关嵌入Glove, 随机)详细分析文章 1 背景 图1 Bert 优点 效果显著 缺点 ...

  9. demo2动态加载显示商品详情页

    /* 要求:实现 头像+昵称(多余7位用...) 商品图片(根据商品实际的图片的大小进行动态的展示.按照一定的比例进行展示.) 产品简介.产品简介在商品图片的下边.并跟随商品图片的大小进行动态的收缩或 ...

  10. Python入门看这些,最详细学习书籍推荐

    随着人工智能以及脚本开发火热,Python已经被推上一个非常火热的巅峰! 那么,想要学习Python却又不知道从哪里开始的朋友,看这里呀~ Python在整个编程语言来说,是比较容易上手,而且“见效” ...