vue模板编译过程
摘要：Vue 模板的编译过程是 Vue 中非常核心的一部分，它将你在模板中写的 HTML 代码转换成 JavaScript 代码，使得 Vue 能够高效地在页面上渲染和更新数据。Vue 的模板编译过程可以分为几个重要步骤，具体的过程是： Vue 模板编译的过程： 模板解析（Parsing） 抽象语法树生成
阅读全文
posted @ 2025-02-23 21:24
随笔分类 - vue3
Vue ref和reactive
摘要：1.ref：接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value 1.1为了读写通过ref()创建的响应式变量，你需要通过.value属性来访问，可以使用unref直接获取返回值，如果unref()的参数是一个ref，就会返回其内部值。否则就返回参
阅读全文
posted @ 2023-05-28 21:37
Vue3.0相对Vue2的优势
摘要：1.组合式API逻辑更加分明，Vue2需要使用的数据要在data、method等里面分开写，不是一个整体。现在可以将需要使用的数据和方法放在一起写，或者通过写hook函数进行区分。 2.vue3重写了数据双向绑定，使用了ES6的proxy。vue2使用的是defineProperty进行数据劫持，缺
阅读全文
posted @ 2023-01-04 10:30
vue3.0组件传值
摘要：1.通过ref传值，并进行操作（子组件最好进行定义，否则会有warning，但是不定义也有值）
阅读全文
posted @ 2023-01-03 17:43
vue3.0的全局api变化
摘要：1.全局api使用的变化：vue3已经去除Vue语法，取代的是用createApp创建的app 2.其他改变 2.1data函数的变化，在vue3data必须是一个函数，否则报错 2.2过渡类名的变化 2.3移除键盘事件@keyup 2.4移除.native事件：现在只要你emits没定义click
阅读全文
posted @ 2023-01-03 14:27
vue3.0新组件
摘要：1.fragment 1.1解释和意义 1.2使用：没有特定的标签，直接不使用根标签即可 2.teleport(传送） 1.1解释和意义：不管嵌套多少层都可以直接进行组件传送 1.2使用：to的位置可以是标签也可以是类名，类名的话是#className 3.suspense：是一个内置组件，用来在组
阅读全文
posted @ 2023-01-03 14:07
vue3.0toRaw()、markRaw()、customRef()
摘要：1.toRaw和markRaw的使用意义（给reactive对象进行的添加属性都会自动给该属性添加响应式，当需要给reactive添加没有响应式的属性则使用） 2. toRaw和markRaw的使用示例（对其可以进行操作，只是响应式失效，区别于readOnly的不可以操作） 3.customRef：
阅读全文
posted @ 2022-12-30 17:48
vue3的shallowRef()、shallowReactive()和shallowReadonly()
摘要：1.shallowReactive()：使用shallowReactive转化的对象只有对象的第一层级有响应式。 2.shallowRef()：使用shallowRef转化的基本数据类型和使用ref没有差别，使用shallowRef转化的对象都会失去响应式。 3.shallowReadonly()：
阅读全文
posted @ 2022-12-30 13:54
vue3的hook函数
摘要：1.hook的定义（本质上是可以使用组合式API的封装好的函数） 2.使用示例：
阅读全文
posted @ 2022-12-29 16:59
vue3.0的生命周期
摘要：1.vue3的生命周期与vue2的不同点： 2.vue3的生命周期与vue2对应的点： 2.1beforeCreate和create相当于setup，因为不能写入setup生命周期内 2.2使用vue3的组合式API的生命周期，需要先按需引入才能在setup内进行使用（vue3的生命周期都加了on前
阅读全文
posted @ 2022-12-29 13:58
vue2和vue3响应式原理
摘要：1.vue2响应式（视频附带解决存在的问题，通过$set和vue的set、delete方法） https://www.bilibili.com/video/BV1Zy4y1K7SH?p=145&spm_id_from=pageDriver&vd_source=ce8f93194a63c57cca08
阅读全文
posted @ 2022-12-26 09:46
vue3.0--<script setup>的使用
摘要：1.<script setup>的定义 <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势： 更少的样板内容，更简洁的代码。 能够使用纯 Typ
阅读全文
posted @ 2022-12-15 14:14
vue3.0--setup()
摘要：1.setup()定义： setup () 是vue3新增加的组件。vue3采用了组合式 API ，为了使用组合式API，我们需要一个入口，在vue3组件中，称之为setup。(简单点来说，就是vue2里面的data，method，computed，所有数据方法全写在setup里) 2.setup(
阅读全文
posted @ 2022-12-14 17:11
Vue3.0文档学习心得--依赖注入
摘要：1.provide():在祖先组件或整个应用 (通过 app.provide()) 提供一个值，可以被后代组件注入。(只要是后代就可以，不限制为孙组件） (1)第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。 (2)当使用 TypeScript 时，ke
阅读全文
posted @ 2022-12-13 17:25
Vue3.0文档学习心得--响应式工具
摘要：1.isRef：检查某个值是否为 ref。返回值是true或者false let foo: unknown //返回值是一个类型判定 (type predicate)，这意味着 isRef 可以被用作类型守卫。 if (isRef(foo)) { // foo 的类型被收窄为了 Ref<unknow
阅读全文
posted @ 2022-12-12 16:09
Vue3.0文档学习心得--响应式核心
摘要：1.ref():接受一个内部值，返回一个响应式的、可更改的 ref 对象.此对象只有一个指向其内部值的属性 .value。 使用实例： 1.1ref接收值 const count = ref(0) console.log(count.value) // 0 count.value++ console
阅读全文
posted @ 2022-12-12 12:05
