场景
在项目开发的时候，前端肯定是先写静态页面
在静态页面写好之后
然后就可以与后端对接数据了【高兴】
但是在对接接口的时候
我们会发现后端返回来的字段与前端在页面上写的可能不一致
这个时候有意思的事情就发生了
这种情况数据是不会跟新的
<div> {{ objData }} <button @click="submitHander">改变数据</button> </div> <script> import { reactive } from 'vue' export default { setup () { let objData=reactive({ name:'林漾', age:31, sex:'女' }) //这样的方式跟新失败 function submitHander(){ objData={ name:'林漾1', age:31, sex:'女nv' } } return { objData, submitHander } } } </script>
发生的现象
想必各位都发现， 点击按钮的时候，
数据始终没有发生改变
为什么数据没有发生改变了？
因为我点击的时候是这样操作的
objData={ name:'林漾1', age:31, sex:'女nv' }
我是重新赋值的。如果你赋值是整个对象，vue3.0是无法跟新的
如何要跟新怎么处理
这样可以跟新
<template> <div> {{ objData }} <button @click="submitHander">改变数据</button> </div> </template> <script> import { reactive } from 'vue' export default { setup () { let objData=reactive({ name:'林漾', age:31, sex:'女' }) function submitHander(){ objData.name='林漾1'; objData.name='31'; objData.name='女nv'; } return { objData, submitHander } } } </script>
上面跟新遇见的问题
如何有很多值。如果需要我去跟新，
那岂不是我要一个一个的去参与赋值，
这样的话岂不是要把我累死？？？【妈呀！接受不了】
也有办法去解决：如何处理呢？？
其实上面reactive的是使用方式都错了。真的错了，我骗你
reactive 如何正确去跟新
<template> <div> {{ objData.arr }} <button @click="submitHander">改变数据</button> </div> </template> <script> import { reactive } from 'vue' export default { setup () { let objData=reactive({ // reactive下面应该放置一个属性值 arr:[ { name:'林漾', age:31, sex:'女' } ] }); function submitHander(){ objData.arr=[ { name:'余声声', age:29, sex:'女' } ] } return { objData, submitHander } } } </script>
reactive 正确使用姿势
reactive函数传递的参数必须是对象(json/arr)
千万不要这样写
let objData=reactive({ name:'林漾', age:31, sex:'女' })
这样写是非常的不好的。
有的小伙伴可能会说：
上面reactive函数传递的参数是对象呀
有什么问题了？？？
问题是在我们跟新数据的时候一点都不友好
还有就是我们在实际开发过程中可能有好几处都是响应式的数据
这个时候我们只需要创建一个reactive
就说按照下面这样来处理
let objData=reactive({ // 某一个区域使用的数据 oneObj:[ { name:'林漾', age:31, sex:'女' } ], // 另一个区域使用的数据 two:{ name:'余声声', age:123 } }); 不推荐这样使用 let oneObj=reactive({ name:'林漾', age:31, sex:'女' }) let two=reactive({ name:'余声声', age:123 })
