美文网首页
Vue的响应式浅析

Vue的响应式浅析

作者: lin_lilili | 来源:发表于2020-10-31 00:42 被阅读0次

1 Vue如何实现响应式?

  • Vue的响应式是建立在监听data中的数据.

2 在Vue2中响应式的实现

  • Vue通过Object.defineProperty()来实现对数据的代理和监听
  • 将数据声明在data中,Vue会将数据进行封装
  • 给data中的数据添加getting,setting方法.
  • 在Vue发现数据发生变化,进行render(数据)

3 Vue响应式中有特殊的情况.

3.1 对象

  • 对象可以将所有的属性提前声明.
  • 但是,对象有时候无法将所有的属性进行提前声明.
  • 需要动态的添加新的属性,这时候就需要Vue.set或者this.$set来动态绑定.
  • 实际上set API调用的也是Object.defineProperty()来实现.

3.2 数组.

  • 数组无法将未来添加的数据,进行提前声明.
  • 又无法用set API来监听.
  • 尤雨溪使用增加原型链的方式,继承数组原型.
  • 在原有的基础上重写了7个数组的API
  • pop,push,shift,unshift,reverse,sort,splice
  • 帮助数组中的数据动态的代理和监听.

相关文章

  • 浅析Vue响应式

    Vue 响应式是什么 Vue 是一个 MVVM 的框架,即 Model-View-ViewModel,Model ...

  • Vue的响应式浅析

    1 Vue如何实现响应式? Vue的响应式是建立在监听data中的数据. 2 在Vue2中响应式的实现 Vue通过...

  • 前端面试题【Day02】

    本篇绪论 1,Vue响应式原理 1,Vue响应式原理 在vue实例中声明的数据就是响应式的。响应式:数据发生改变,...

  • Vue响应式原理浅析

    响应式原理 考虑下面的情形: 如何让a变化的时候,b始终是a的10倍?也就是说像下面这样: 这其实就是vue的响应...

  • Vue响应式原理浅析

    最近在学习前端框架Vue ,对其响应式原理做一些简单的分析 大致原理: 当把一个普通的 JavaScript 对象...

  • 面试总结之基础(2)

    Vue2响应式原理 Vue3响应式原理

  • vue系列--- vue响应式原理

    vue响应式原理 要说vue响应式原理首先要说的是Object.defindProperty(),这个是响应式原理...

  • 2021-07-23 vue2与vue3的响应式原理

    vue2的响应式原理 无法响应对象的新增与删除 vue3的响应式原理

  • vue 中数组和json的响应式

    一. vue 中数组操作的响应式 1. Vue 中javaScript 数组响应式操作的方法 push()方法响应...

  • VUE响应式原理

    VUE响应式原理 这里的响应式(Reactive)不同于CSS布局的响应式(Responsive), 这里的响应式...

网友评论

      本文标题:Vue的响应式浅析

      本文链接:https://www.haomeiwen.com/subject/mbwjvktx.html