跟我一起学vue3(ref /reactive)

首选先我说说vue3和vue2使用方面的不同
vue3将watch,data,component,methods等等都统一放到setup函数里面了

我先说说常用的定义数据
在setup函数中，可以使用ref函数和reactive函数来创建响应式数据，当数据发生改变时，Vue会自动更新UI

现在vue3定义数据需要借用 reactive和ref函数来定义
前者定义引用类型(object,array等),后者定义常用的值类型的数据(string,number等等),

**注意vue3为了实现响应式数据,所以ref和reactive定义的数据都需要专门暴露出去,不暴露是无法使用的
如果单纯的定义数据(不用ref或者reactive),那创建的数据也需要暴露,不暴露就无法使用**

说再多不如贴实际代码

//使用前需要引入模块
//只定义值类型 的数据
import {ref} from 'vue'
//如果定义引用类型的数据(注意: 引入了reactive就不需要引入ref 下面我会解释)
import {reactive} from 'vue'
setup() {

//定义值类型
let age=ref(18)
let reactive({
    students:[
          {id:1,name:'曾'},
          {id:1,name:'陈'}
      ]
    })
//暴露出去
    return {age,students}
}

使用定义好的数据 不用像vue2那样 this.数据名 因为setup的this是undefined

说完基本使用 我来说说 ref函数和reactive的区别吧

重点①:
ref和reactive本质上是一致的
ref其实是依赖于reactive的,
vue3的底层会对数据类型进行判断 是否为值类型
具体是通过一个私有属性__v_isref 来判断
为true就决定是ref ,否则为reactive

重点②:
使用ref包装之后，需要使用.value才行进行取值和赋值操作。这就导致一个结果，就是在对象起属性名时，尽可能避开有value的属性名。因为会引起混淆，让人不知道是ref方法加上去的属性，还是原来对象就是这样的结构

通过数据名.value来修改数据

虽然是用age.value来修改值,但是template里面使用数据却不需

重点③:
如果给reactive传递一个值对象时 , 那这个值对象 就不会变成响应式 (换句话说: 就是在方法里面修改这个数据 ,视图页面不会跟着被修改 )

重点④:

像正常的传递 引用类型的对象 比如数组 ,调用方法修改该数据视图会更新

原理是 :会把传递给reactive的复杂数据包装成proxy对象

为啥会这样呢,因为vue3用proxy代替的Object.defineProperty来对数据进行监听
实现双向绑定

我知道我排版很垃圾 ,想到啥就写啥,但我还是厚着脸皮来求关注收藏
新人博主求关注收藏/(ㄒoㄒ