vue3中手写shallowReactive, shallowRef(系列十三)
Vue3 系列 手写 十三
2023-09-11 14:20:08 时间
function shallowRef(val) { return shallowReactive({value:val}); } function shallowReactive(obj) { return new Proxy(obj, { get(obj, key){ return obj[key]; }, set(obj, key, val){ obj[key] = val; console.log('更新UI界面'); return true; } }) } let obj = { a:'a', gf:{ b:'b', f:{ c:'c', s:{ d:'d' } } } }; /* let state = shallowReactive(obj); //只有最外层的a属性变化,才会触发视图更新 // state.a = '1'; state.gf.b = '2'; state.gf.f.c = '3'; state.gf.f.s.d = '4'; */ let state = shallowRef(obj); // state.value.a = '1'; // state.value.gf.b = '2'; // state.value.gf.f.c = '3'; // state.value.gf.f.s.d = '4'; // ref的最外层属性value,只有它改变,视图才会跟新 state.value = { a:1, gf:{ b:2, f:{ c:3, s:{ d:4 } } } }
相关文章
- 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)
- vue3: 动态修改favicon(网站的ico 图标)(vue@3.2.26)
- vue2和vue3响应式observer的简单实现
- vue3: 用el-dialog展示component(vue@3.0.5 / element-plus@1.0.1-beta.20)
- vue3:子组件向父组件发送数据(vue@3.2.26)
- vue3 - 定义window 全局变量
- vue3+ts创建二维数组响应式变量及赋值
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- vite + vue3 项目中引入文件路由
- Vue3学习笔记(二)——组合式API(Composition API)
- Vue3带来了什么
- Vue3悬浮返回主页按钮设计与实现
- Vue3+TypeScript+Element Plus前端项目构建入门
- vue3 watch 异步方法