vue3
文章平均质量分 65
vue3
Python User
这个作者很懒,什么都没留下…
展开
-
Vue3中深响应和浅响应 等composition API 其他部分
在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除。为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的。源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的。创建一个代理,使其自身的 property 为只读,但不执行嵌套对象的深度只读转换。只读代理是深层的:访问的任何嵌套 property 也是只读的。原创 2023-08-24 18:20:50 · 304 阅读 · 0 评论 -
Vue3 和 Vue2 中通过ref 获取标签的不同
因为调用setup的时候并没有渲染好dom标签,所以定义的时候需要保留 null 选项。ref获取元素:利用ref函数获取组件中的标签元素。功能需求:让输入框自动获取焦点。原创 2023-08-23 00:23:23 · 550 阅读 · 0 评论 -
Vue3中 toRefs的基本使用
把一个响应式对象转换成普通对象,该普通对象的每个 property 都是一个 ref;期望: 页面上展示 “小明=========…”;实际:页面展示"小明",myData中name 无法响应。--通过方式一,无法响应--> <!-- <h3>{{ myData.name }}</h3> 通过方式二,可以响应 --> </ template > < script lang = " ts " > const myData = reactive({原创 2023-08-23 00:14:22 · 308 阅读 · 0 评论 -
Vue3 中自定义hook函数
使用Vue3的组合API封装的可复用的功能函数;自定义hook的作用类似于vue2中的mixin技术;自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂;混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。// 定义一个混入对象},methods: {')// 定义一个使用混入对象的组件})原创 2023-08-22 23:48:56 · 529 阅读 · 0 评论 -
Vue3中的声明周期
【代码】Vue3中的声明周期。原创 2023-08-22 18:37:28 · 551 阅读 · 0 评论 -
Vue3中的计算属性和属性监听
Vue3中可以通过 compute进行监听计算属性,他返回的是一个ref的对象,也就是说 通过compuye这种方式计算属性实际上是进行了ref的操作。其中 watch 也可以监听多个数据。原创 2023-08-22 18:28:22 · 769 阅读 · 0 评论 -
Vue3 数据响应式原理
【代码】Vue3 数据响应式原理。原创 2023-08-21 22:39:44 · 577 阅读 · 0 评论 -
Vue3 中 setup,ref 和 reactive 的理解
const isProxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象。总结:如果操作代理对象,目标对象中的值也会跟着改变,如果想要页面跟着渲染,也是操作代理对象;内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的。// 此时state通过 reactive代理了obj,使其内属性成为响应式的;// state---代理对象,obj---目标对象。作用:定义多个数据的响应式,例如一个对象;/* 定义响应式数据对象 */原创 2023-08-08 22:40:02 · 367 阅读 · 0 评论