形意设计素材网站,做网站我网站找第三方支付,8网站建设做网站,惠州网络运营目录 前言#xff1a;
错误示范#xff1a;
reactive() 的局限性
解决办法#xff1a;
1.使用ref
2.reative多套一层
3.使用Object.assign 前言#xff1a; 今天看到有人在提问#xff0c;问题是这样的#xff0c;我修改了reative的值#xff0c;数据居然失去了响…目录 前言
错误示范
reactive() 的局限性
解决办法
1.使用ref
2.reative多套一层
3.使用Object.assign 前言 今天看到有人在提问问题是这样的我修改了reative的值数据居然失去了响应性页面毫无变化这是什么情况本着好奇心害死猫的原则我就看了下我直呼好家伙
错误示范
请看以下代码大概是这个样子的
templateviewview class{{ user }}/viewbutton clicksetUser修改user/button/view
/templatescript setupimport {reactive} from vue;let user reactive({name: jay});const setUser () {user {name: qianjue,age: 20}};
/script
此时我无论如何点击改变user按钮页面岿然不动 本着严谨的原则我们在setUser内打印下user的值观察观察 const setUser () {console.log(user);user {name: qianjue,age: 20}}; 红色框是我们第一次点击按钮的打印值绿色框是我们之后点击的打印值我们都很清楚这两个值所代表的意义当我们第一次点击之后我们的user对象变成了一个普通的对象并不是由proxy的代理对象所以根本不具有响应性。
这个时候就会有人想点子了不是说我是个普通对象不是代理的吗我给他重新赋值一个reative这不就完美解决 const setUser () {console.log(user);user reactive({name: qianjue,age: 20})}; 然后点击按钮发现页面还是毫无变化user的打印值如下嗯感觉没毛病啊莫非是vue3的bug 原因Vue 的响应式系统是通过属性访问进行追踪的因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象因为这将导致对初始引用的响应性连接丢失 这可不是我说的是vue官网说的---- vue响应式文档https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-proxy-vs-original-1
reactive() 的局限性
reactive() API 有一些局限性 有限的值类型它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。 不能替换整个对象由于 Vue 的响应式跟踪是通过属性访问实现的因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象因为这样的话与第一个引用的响应性连接将丢失
let state reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失)
state reactive({ count: 1 })
对解构操作不友好当我们将响应式对象的原始类型属性解构为本地变量时或者将该属性传递给函数时我们将丢失响应性连接
const state reactive({ count: 0 })// 当解构时count 已经与 state.count 断开连接
let { count } state
// 不会影响原始的 state
count// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)
由于这些限制我们建议使用 ref() 作为声明响应式状态的主要 API。
解决办法
1.使用ref let user ref({name: jay});const setUser () {console.log(user.value);user.value {name: qianjue,age: 20}}; 2.reative多套一层
templateviewview class{{ state.user }}/viewbutton clicksetUser修改user/button/view
/templatescript setupimport {reactive} from vue;const state reactive({user: {name: jay}})const setUser () {console.log(state.user);state.user {name: qianjue,age: 20}};
/script
3.使用Object.assign const user reactive({name: jay})const setUser () {console.log(user);Object.assign(user, {name: qianjue,age: 20})};
