vue2

原理:在vue2中利用的是原生js下边的Object.defineProperty()进行数据劫持,在通过里面的getter和setter方法,进行查看和数据的修改,通过发布、订阅者模式进行数据与视图的响应式。

1.定义初始数据

 2.加工数据:为了实现响应式,在javascript中Object.defineProperty()给每个初始数据都形成了get和set的写法,只要读取数据就会执行get方法,编辑数据执行set方法。

(1)、 定义响应式数据

(2)、get 查看age属性 执行get

 (3)、set   修改数据的时候调用set

(4)、当数据发生变化时 触发响应的监听回调(get/set),就已经实现了数据的双向绑定.

3、vue2双向绑定的缺点 

(1)、不能监听对象的新增属性和删除属性

(2)、无法正确的监听数组的方法,当监听的下标对应的数据发生改变时

4、解决方法

(1)、重写数组或者对象

(2)、vue中 通过this.$set(目前属性,新增的属性,新增的值)来解决  注 括号是三个参数

vue3

基本原理:

1、对于基本数据类型来说,响应式依然是靠Object.defineProperty()的get和set来完成的

2、对于对象类型的数据:

  • 通过Proxy代理:拦截对象中任意属性的变化,包括属性值得读写、添加、删除等操作等..
  • 通过Reflect反射函数进行操作

vue3中响应式是通过函数来实现的

1.ref函数

  • 作用:定义一个响应式数据
  • 语法:let   xxx = ref(xxx)
  • 创建一个包含响应式数据的引用对象
  • js中操作数据:xxx.value
  • 模板中读取数据:不需要 .value 直接使用插值语法即可
  • 注:接收的数据可以是基本类型也可以是对象类型 

 2.reactive函数

1、作用:定义一个对象类型的响应式数据(基本数据类型 最好用ref函数)

2、语法:const xxx = reactive(源对象)接收一个数组或者对象,返回一个Proxy的实例对象,简称Proxy对象

返回proxy对象 

  •  reactive定义的响应式的数据是深层次的
  • 接受的是数组,通过索引改变的数据也是响应式的
Logo

前往低代码交流专区

更多推荐