Vue3的响应式ref

我们在阅读vue3文档打开简介的时候会发现这样一句话

vue2也即将停止维护了,所以后面的项目基本上会升级成vue3来写,所以,我后面也会多更新一些vue3的知识点。

在很早之前,我已经写过vue3的用法,但是时隔一年多,一直用的vue2开发,回头来,顺便再过一遍。

一文看懂Vue3

今天主要更新的是vue3的响应式,在官方文档中,给出了两种写法,一种是ref(),一种是reactive()的写法,打开官方文章最前面就说了,组合式api推荐使用ref来声明响应式状态,所以我们注重讲解一下ref()。

在vue2的写法中,我们一般会使用data来定义响应式数据,那么在vue3中,我们定义响应式数据,该如何定义呢?

const num = ref(0);console.log(num); // {num: 0}console.log(num.value) // 0

为什么我们直接打印num却不是0呢?

那是因为,ref将我们的参数接受,包裹在一个带有.value属性的一个对象中返回,所以我们在访问该属性值的时候,需要加上.value来访问,这个主要跟vue的响应式系统是有关联的,大家可以看一看vue官方写的深入响应式系统文章

https://cn.vuejs.org/guide/extras/reactivity-in-depth.html

如果是深层响应式,我们该如何使用呢?

比如我们定义一个对象,里面有数组

const news= ref({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ]})

我们现在去改变一下里面的数组如何改变呢?

function clicknews() { news.value.books = [];}

其实这样我们就可以轻松的改变对象里面的数组属性了

这样我们的ref使用就更新完成了,后面,我们会更新vue3的计算属性