vue3 中的 v-model

在原生组件中使用 v-model1<input v-model="name" /> v-model 是本质上是一个语法糖,上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开): 1234<input :value="name" @input="name = $event.target.value&qu...

发布于 Vue3

vue h() render() 渲染函数入门

必要的前置知识DOM 树在深入渲染函数之前,了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例: 12345<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --></div> 当浏览器读到这些代码时,它会建立一个 ”DOM 节点“ ...

发布于 Vue3

vue3 ref() 响应式源码浅析

官方解释 ref 接收一个内部值并返回一个响应式且可变的ref对象。ref 对象具有指向内部值的单个property .value如果将对象分配为 ref 值,则通过 reactive 函数使该对象具有高度的响应式。 语法:const xxx = ref(initValue) ref() 返回一个包含响应式数据的引用对象 JS中操作数据需要加 xxx.value,模板中读取数据不需要加(内...

发布于 Vue3

vue3 响应式原理笔记

v2响应式原理 Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 对象:其核心是递归 object 的每一个属性,(这也是浪费性能的地方),给每个对象属性增加 getter 和 setter,当属性发生变化的时候会更新视图 缺点:defineProperty 只能检测到对象自带的属性,无法检测到对象属性的新增...

发布于 Vue3