Vue3中的ref和reactive如何使用
这篇文章主要讲解了“Vue3中的ref和reactive如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3中的ref和reactive如何使用”吧!
创新互联是专业的师宗网站建设公司,师宗接单;提供成都做网站、网站建设、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行师宗网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
一、是什么
ref和reactive是Vue3中用来实现数据响应式的API
一般情况下,ref
定义基本数据类型,reactive
定义引用数据类型
二、先聊reactive
reactive定义引用数据类型(以对象和数组举例),它能够将复杂数据类型的内部属性或者数据项声明为响应式数据,所以reactive的响应式是深层次的,其底层是通过ES6的Proxy
来实现数据响应式,相对于Vue2的Object.defineProperty
,具有能监听增删操作,能监听对象属性的变化等优点
使用reactive定义对象数据类型举例
const paginationConfig = reactive({ pageNum: 1, pageSize: 10 }) // 定义 const onChange = () => { paginationConfig.pageNum = 2 // js使用 paginationConfig.pageSize = 20 // js使用 }
若用reactive定义基本数据类型,Vue3会报警告错误,如图
const str = reactive('我是字符串')
分析Vue3源码可知,使用reactive定义响应式数据时,若数据不是对象类型直接就返回了,就不会进行后续的数据响应式处理了,这也就是我只用reactive定义对象型响应式数据的原因,那数组类型数据怎么办呢?答案在下文中可以找到
三、再聊ref
为什么我会理解成ref是reactive的再封装,因为在ref的底层源码里最终还是reactive()来实现的
由源码分析得知,如果是对象类型,底层走的还是reactive()的逻辑,另外我们知道,使用ref定义基本数据类型时,在脚本里使用时,需要加.value
后缀,然而在模板里不需要,这是因为Vue3会自动帮你加上,这就使得ref相比reactive更加简单
let num = ref(0) // 定义 let isShow = ref(false) // 定义 const onChange = () => { num.value++ // js使用 isShow.value = true // js使用 }
四、ref和reactive定义数组对比
使用ref定义数组举例如下
const tableData = ref([]) // 定义 const getTableData = async () => { const { data } = await getTableDataApi() // 模拟接口获取表格数据 tableData.value = data // 修改 }
图中以我们常用的表格数据举例,可以看到,ref定义数组与定义基本数据类型没什么差别,接下来看看reactive
const tableData = reactive([]) // 定义 const getTableData = async () => { const { data } = await getTableDataApi() // 模拟接口获取表格数据 tableData = data // 修改,错误示例,这样赋值会使tableData失去响应式 }
需要注意的是,使用 tableData = data 的修改方式会造成 tableData 响应式丢失,解决方法如下(供参考)
// 方法一:改为 ref 定义 const tableData = ref([]) const getTableData = async () => { const { data } = await getTableDataApi() tableData.value = data // 使用.value重新赋值 } // 方法二:使用 push 方法 const tableData = reactive([]) const getTableData = async () => { const { data } = await getTableDataApi() tableData.push(...data) // 先使用...将data解构,再使用push方法 } // 方法三:定义时数组外层嵌套一个对象 const tableData = reactive({ list:[] }) const getTableData = async () => { const { data } = await getTableDataApi() tableData.list = data // 通过访问list属性重新赋值 } // 方法四:赋值前再包一层 reactive const tableData = reactive([]) const getTableData = async () => { const { data } = await getTableDataApi() tableData = reactive(data) // 赋值前再包一层reactive }
感谢各位的阅读,以上就是“Vue3中的ref和reactive如何使用”的内容了,经过本文的学习后,相信大家对Vue3中的ref和reactive如何使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
名称栏目:Vue3中的ref和reactive如何使用
网页路径:http://pwwzsj.com/article/pigohd.html