关于vue3中ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解

ref() 和ractive都是用来定义响应式数据的,但是reactive更适合定义复杂的数据类型(object,arr)、ref适合定义基本数据类型。

 

     1.ref() 使用ref创建一个数类型,ref有value这个属性(单一数据属性)

       更改数据即更改其value属性。

       ref为复制响应式数据,不会影响原始数据,当数据发生改变时页面会自动更新。

       在template中访问系统会自动添加.value,在js中需要手动添加。

ref(1)->reactive({value:1})
ref函数只能操作浅层次的数据,把基本数据类型当作自己的属性值;深层次依赖于reactive

  响应式原理时依赖于object.defineProperty()的get()和set()。

       2.reactive() 复杂数据类型,无value属性。

       更改其内容时可直接通过object.key = xxxx来更新数据。

       它的响应式是更深层次的,底层本身是将传入的数据包装成一个Proxy。

  参数必须是对象或者数组,如果要让对象的某个元素实现响应式需要使用toRefs。

 

posted @ 2022-06-17 10:52  妄欢  阅读(881)  评论(0编辑  收藏  举报