![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3
码小白1
在搬砖道路上渐行渐远。
展开
-
vue3响应式基础API-Refs
ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property.value。const count = ref(0)console.log(count.value) // 0count.value++console.log(count.value) // 1ref实现原理ref的原理就是将一个普通值,转化成对象,并且在获取和设置值时可以增加依赖收集和触发更新的功能function ref(value){ return createR原创 2022-01-05 17:21:04 · 318 阅读 · 0 评论 -
Vue3的响应式基础API-toRaw & makeRaw
toRaw返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”,可用于临时读取数据而无需承担代理访问/跟踪的开销,也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。const foo = {}const reactiveFoo = reactive(foo)console.log(toRaw(reactiveFoo) === foo) // truemarkRaw标记一个对象,使其永远不会转换为 proxy。返回对象本身。原创 2022-01-05 17:19:57 · 295 阅读 · 0 评论 -
Vue3响应式API-reactive的数组代理
基本用法返回对象的响应式副本,只能代理对象,不能代理普通值const obj = reactive({count: 0, name: 'hyh'})const count = reactive(1)// value cannot be made reactive: 1实现原理reactive 是基于 Proxy 实现的响应式。const ReactiveFlags = { SKIP = '__v_skip', IS_REACTIVE = '__v_isReactive',原创 2022-01-05 17:19:27 · 2150 阅读 · 0 评论 -
Vue3 响应性基础 API-- readonly
基本用法接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。const original = reactive({ count: 0 })const copy = readonly(original)watchEffect(() => { // 用于响应性追踪 console.log(copy.count)})// 变更 original 会触发依赖于副本的侦听器original.count++// 变更副本将失败并导致警告copy.count原创 2022-01-05 17:18:52 · 915 阅读 · 0 评论 -
Vue3 响应性基础 API --reactive
基本用法返回对象的响应式副本,只能代理对象,不能代理普通值const obj = reactive({count: 0, name: 'hyh'})const count = reactive(1)// value cannot be made reactive: 1响应式转换是“深层”的——它影响所有嵌套 propertyconst obj = reactive({count: 0, name: 'hyh', info: { age: 25 }})console.log(obj原创 2022-01-05 17:18:18 · 2988 阅读 · 0 评论 -
Vue3 v-model的用法
在Vue3.0中,将移除`v-bind`的`.sync`修饰符使用带参数的`v-model`替代。原创 2022-01-05 17:17:33 · 2666 阅读 · 0 评论 -
Vue 3.x 废弃和修改的用法
filtersVue3.0 将不再支持filters语法。<!-- before -->{{ msg | format }}<!-- after -->{{ format(msg) }}原因Filters的功能可以通过方法调用或计算属性轻松复制,因此它主要提供的是语法价值,而不是实际价值。Filters需要一个自定义的小语法,然而这打破表达式只是JavaScript的假设——这增加了学习和实现的成本。事实上,它与JavaScript自己的位或运算符(|)相冲突,原创 2021-03-16 17:14:47 · 803 阅读 · 0 评论 -
Vue3 中指令参数支持动态参数
Vue3 中指令参数支持动态参数在Vue3 的 RFCs文档中,Vue3中指令参数将支持动态参数。基础示例<div v-bind:[key]="value"></div><div v-on:[event]="handler"></div><div v-slot:[slotName]="slotProps"></div>为什么要这么做在Vue3.0之前,Vue中的指令参数都是静态设置的,当然也可以通过JavaScript的翻译 2021-02-03 15:40:20 · 1143 阅读 · 0 评论 -
Vue3 中插槽(slot)的用法
Vue3 中插槽(slot)的用法概要Vue3(其实从2.6开始)中引入了一个新的指令v-slot,用来表示具名插槽和默认插槽基础示例<!-- default slot --><foo v-slot="{ msg }"> {{ msg }}</foo><!-- named slot --><foo> <template v-slot:one="{msg}"> {{ msg }}翻译 2021-02-03 14:58:39 · 42843 阅读 · 4 评论