- 博客(102)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 标签中的ref属性
可能存在的情况是，在挂载之前，ref() 函数已经执行，此时获取的引用则是undefined，在挂载之后，Vue 底层会自动找到对应的 ref() 与 经过ref 标记的DOM或组件，并赋值给 Value属性。1、在标签中添加 ref 属性的同时，需要在 脚本中 通过 ref() 函数定义一个容器来放置 给ref属性打上标签的DOM或组件实例，且接收的变量需要 与 标签中的ref 属性值相同。按照Vue2 的情况，此时在父组件中是可以访问到子组件中的数据的，但是通过打印，我们发现什么都没拿到。
2024-09-04 13:51:32
1374
1
原创 props与defineProps
使用 defineProps() 来接收父组件传递数据，defineProps() 函数接收一个字符串形式的数组，类似['a','b','c']，数组中每一项就是父组件传递的数据。Vue3 中的 defineProps() 函数返回一个 Proxy 对象，该对象内部包含的是 defineProps() 函数 中接收的 props 数据，可以针对于 props 中的数据进行某些代码逻辑判断。上面说的是最基础的 props 数据传递，在Vue3 中更好的支持了ts，以此来限制类型，提高代码质量。
2024-09-03 15:20:05
1307
2
原创 customRef 与 ref
但是我们发现，当过快输入时，值出现了诡异的变动，会突然卡一下，这是因为，每次改变数据时，都会开启一个定时器，但是定时器却并没有清除，这就导致累计了多个定时器才会出现这种情况。在 ref() 中，在get 中收集依赖，在 set 中分发依赖，按这个模式，我们在 customRef() 中的 get 和 set 中也应该收集或分发。这是因为数据只是发生了变更，但是并没有实现依赖追踪和触发更新，这个时候，我们在看看 ref() 的源码。到了这里，其实我们就完成了与第一步同样的效果：不延迟，直接同步展示。
2024-08-26 22:40:42
1143
原创 toRaw 与 markRaw
那么问题就来了，我的 ref() 函数 ，在定义对象类型的响应式数据时，其底层也是通过 reactive() 函数来实现响应式转化的。用于标记某个对象为“原始对象”（非响应式对象），从而确保该对象不会被 Vue 的响应式系统代理。不会自动递归处理这些嵌套的对象，也就是说它只会处理调用它时直接传入的那一层对象，而不会处理更深层次的嵌套对象。只能作用于传入的那个对象本身，并将该对象还原为其未代理的原始对象。：标记某个对象为“原始对象”（非响应式对象），从而确保该对象不会被 Vue 的响应式系统代理。
2024-08-24 23:21:10
1221
原创 shallowReadonly 和 readonly
的只读响应式对象，所有嵌套的属性都会变成只读的，且会被递归地转换为只读响应式对象。这意味着你不能直接修改这个对象或它的任何嵌套属性的值，如果尝试修改会在开发环境下抛出警告。的只读响应对象，用于将一个对象的顶层属性设为只读，而不会递归地处理嵌套属性。这两者的主要区别在于它们的“深度”处理方式。是只读的，不能被重新赋值，但是嵌套属性。创建的深层次只读对象。创建的浅层次只读对象。的任何属性，包括嵌套属性。仍然是可变的，可以被修改。嵌套的属性仍然是可变的。在 Vue 3 中，
2024-08-24 12:49:04
328
原创 shallowReactive 与 shallowRef
首先 ref 是可以接收基础类型数据和对象类型数据的，shallowRef 也能接收同样类型的数据，但是 shallowRef 只会对基础类型数据进行转化，对于复杂类型则不会被转化为响应式。person 还是一个ref 对象，但是其中的 value 已经不是Proxy代理对象了，而是一个普通对象，也就是说 shallowRef 无法将对象转化为响应式数据。：当你需要将 Vue 的响应式系统与某些外部库的对象（比如大型数据结构或库自带的对象）集成，而这些对象不需要深层次的响应式支持时，
2024-08-23 23:20:13
965
原创 toRef 与 toRefs
这是因为在初始化时，确实是从 person 对象中取值，但是在取值过程中其实和上面的例子一样也只是拿到了一个基础类型的值，通过 ref 转化后，也只是将这个值转化为了响应式，而源对象 person 其实只在初始化时提供了一下值，后续操作毫无关联。这是因为如果单独返回的是具体数据的话，其实是访问到了响应式对象 person 中的某个具体属性值，相当于返回的是一个具体的字符串，而一个字符串是不具备响应式的。打印 newPerson ，我们发现确实是一个普通对象，但是对象内部的每个属性，都是单独的ref对象。
2024-08-22 17:56:12
1348
原创 Vue3 自定义hook
除了生命周期 hook 之外，Vue3还可以自定义 hook，我们在自定义 hook 时习惯性的采用 use 开头，类似于 react hook 中的 useState、useCallback、useRef 等等。Vue2 中其实也存在 hook ，那就是 Vue的生命周期钩子函数，通过钩子函数，我们可以将特定的逻辑挂载到特定的时间节点上。Vue2 中的配置式生命周期在Vue3中同样可以使用，但是Vue3还有组合式的生命周期，需要在 setup 中使用，它们允许你在特定的生命周期阶段执行代码。
2024-08-20 23:11:23
916
原创 watchEffect 函数 与 watch 函数的区别
我们通过 ref 函数定义了一个基础数据类型的响应式 ，然后在 watchEffect 函数中访问该响应式数据，最后我们惊奇的发现，除了初始化时监听的一次之外，当我在点击按钮之后，该 watchEffect 还会触发一次。，但是在使用过程中我们可以感觉的到并不是很方便，既要指定需要监听的属性，又要指明监听的回调，而且监听对象存在多种不同类型：例如变量，数组，函数，数组中包含函数等等，所以 Vue3 提供了一个新的 API --从控制台打印的参数可以发现，除了第一个参数存在，其他的都是undefined。
2024-08-17 21:36:42
796
原创 Vue2中watch与Vue3中watch对比和踩坑
Vue3 中的 watch 是一个函数，接收三个参数，第一个参数是需要被监听的数据( 可以是单个数据，也可以是数组格式的多个数据 )，第二个参数是回调函数，第三个参数则是监听配置项( 深度监听、初始化监听 )。该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深，也就是说即使监听的是一个对象形式的数据，只要对象内部属性发生变化，都能被监听到。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。简单监听：监听的是一个回调函数，当监听的值发生改变时，才会执行监听动作。
2024-08-14 14:59:25
2708
原创 Vue2计算属性与Vue3的计算属性对比
但是这么写其实存在一个优化点，因为 Vue3 现在对于对象的响应式时通过Proxy代理实现的，是针对于对象的，现在可以直接删除或添加属性的同时还能实现响应式，而不用像Vue2一样还需要依赖 set、delete 等api。：允许开发者定义基于响应式数据的动态值。在Vue2 的例子中，我们改变了计算属性，同时响应式数据夜同步发生改变，我们现在在Vue3的语法中同样可以实现，且方法大致上和 Vue2 一致。上面说的是Vue2 和 Vue3 混用，现在我们来看看真正的Vue3的计算属性时怎么使用的。
2024-08-12 23:44:43
648
原创 Vue2与Vue3响应式原理对比
因为Vue3重新改写了底层响应式原理，那我们大胆猜测一下，Vue3 应该修复了 Vue2.x 版本的问题，也就是说 Vue3 能够直接监听到对于对象的新增属性或删除属性，同时还能直接通过数组下标来操作数组，或通过 length 属性直接改变数组长度，而不用依赖于 $set 方法、$delete 方法或 splice 方法。上面说到了 在 ref函数中如果接收了一个对象，且需要深层响应的话，就会调用 reactive 函数来进行响应式转化，那我们现在来看看 reactive 函数转化响应式数据的原理。
2024-08-11 22:05:36
1803
原创 ref函数与reactive函数的对比
但是当我们在模板中通过插值语法来使用xxx变量时，Vue3 会自动解包，找到 xxx.value ,而我们在模版上只需要按照正常插值语法书写即可。，那么我们在操作数组的时候，又需要加上 value了，这里就和 上面的 reactive 函数 接收一个 通过ref转化标准对象形式的结果形成了对比。，因为返回的是 Proxy 代理对象，所以不需要解包这一操作，就和普通对象一样操作即可。，那我们在操作数组的时候，也是像操作普通数组一样，通过数组下标进行操作，不用解包。在模板中，只有顶级属性才会被解包，
2024-08-01 11:37:04
287
原创 reactive函数
我们可以看到，虽然页面上展示了正确数据，但是在控制台上Vue已经报了警告，并不建议我们这样做，此时我们点击按钮改变数据，发现数据已经改变了，但是页面并没有更新，这表示当前属性a，并不是一个响应式数据，这也表示了为什么Vue3 不建议使用reactive 来转化基础数据。此时我们注意到，修改数据时，我们并没有像 ref() 函数转化响应式对象时，通过 xxx.value 来修改属性值，而是直接通过 xxx.xxx 进行修改的。作用：定义一个 对象类型的响应式数据( 基本类型还请使用 ref()函数转化 )
2024-07-31 21:30:36
1473
原创 ref函数
那么我们可以推断出，当我们在改变unseInfo内部 name 属性的时候，我们也应该通过 name.value 去修改，也就是说当我们需要修改对象内部属性时，我们需要这样做：先通过 userInfo.value 拿到转化为响应式的 userInfo 对象，然后修改name时，也需要拿到 name 的value去修改。同理，在模板中使用数据的时候，我们好像也应该通过 插值语法的形式 {{ name.value }} 去使用，但是在你真这么做之后，你会发现，页面渲染其实错误了。
2024-07-30 22:53:32
1532
原创 Vue3-拉开序幕的setup
与 Vue2 不一样的是，setup 中包含了 data 数据，methods方法，computed计算属性，watch监听器等等一系列的属性，也就是说，在 Vue3 中，我们不会显式的把这些属性配置到 setup 中，而是直接将属性内部的数据或方法直接暴露在 setup 中。3、setup 一般不用 async，因为 setup 需要同步的返回一个对象，以此来保证 模板中数据或方法正常绑定，如果用了 async 那么返回的数据对象 会被 Promise 包裹，模板中无法看到对象中的属性，无法绑定。
2024-07-27 12:49:35
1328
原创 ref属性
可以看到，在refs 中存在三个 属性，分别是 我们在DOM 节点上定义的三个 ref，且这三个ref 对应的就是我们 需要的 DOM节点，以及 组件实例对象。至于为什么组件上添加 ref 属性之后，获取的是组件实例对象 而不是单纯的 DOM 节点，这是因为我们在后续的开发过程中，可能会用到组件实例对象中的某些属性，方法，或其他的数据，这就是ref 的优势所在。diiv 和 button 两个DOM 元素展示都是正常的，但是 School 组件可以看到，展示的是 School 组件内部的元素结构，
2023-11-16 11:24:01
686
原创 main.js 中的 render函数
至于为啥 脚手架会引入一个 运行时的 Vue 而不是 使用一个完整版的Vue，这是因为，当我们开发完毕之后，通过webpack打包之后，生成的都是可以直接让浏览器识别的 html、js、css文件，不需要 模板编译器这玩意，在打包的时候也可以节省一点 Vue 包的体积。说成大白话就是，我们现在使用的 Vue 是阉割版的，不包含模板编译器，这是因为 vue-cli 在搭建项目的时候，用的就是不带编译模板的Vue.js。在同一个目录下，找到 Vue.js 这个就是最完整的 Vue，包含了Vue 的所有功能。
2023-11-16 09:50:44
975
原创 Vue 插槽 slot
template> 标签中 通过 v-slot='slotProps' 接收了这个 slotProps，这个名字是随便定义的，对应的就是 组件中 中绑定的 games 数据。在 App 组件中报了这个错，games 不存在，肯定不存在啊，我的 games 数据是存在 组件中的啊，在 组件中随便你怎么使用都没毛病。那么这个默认插槽在被使用时，v-slot 指令，可以直接作用在 组件标签上，可以简写为。
2023-08-09 14:33:39
772
2
原创 关键字 new 创建对象的内部步骤
工厂模式 创建对象function creatPerson(name, age, job) { let obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayName = function () { alert(this.name); }; return obj;}let person1 = creatPerson('al',26,'Doctor')let per.
2023-08-04 17:44:17
295
原创 Vue 全局事件总线 Event-Bus
3、在 Vue 原型对象，以及 组件实例对象上都是不存在这个东西的，但是我们又需要使用 Vue 实例对象上的 $on、$emit、$off 等方法，所以这玩意应该继承了 Vue 原型对象，或者 组件实例对象。两个兄弟组件之间没有任何关联，但是现在需要 School 子组件 获取到 Student 子组件 传递的数据，这个时候，我们的事件总线就起到作用了。相当于是独立于所有组件之外的旁观者，不参与组件内的任何逻辑，只负责调用 Vue 实例对象上的方法，且所有组件都能访问到它。定义 Student 子组件。
2023-08-03 17:28:22
946
原创 Vue 自定义事件绑定与解绑
8 、注意：通过 this.$refs.xxx.$on( 'xxx' , callback )，绑定自定义事件时，callback 回调要么配置在 mtenods 中，要么使用箭头函数，否则 this 指向存在问题( 因为 callback 函数接收的参数都是从子组件中传递的，包括 this也是，如果使用 function () {} 函数，则该函数内部 this 指向子组件 )该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
2023-08-02 15:59:56
1316
原创 Vue事件
Vue事件处理在jq中的事件处理，我们都很熟悉了，模式类似于下面这样，通过DOM节点，执行click事件$("button").click(function () { $("p").hide();});但是在Vue中，我们触发事件，并不是这样的。首先，绑定方式不一样，在Vue中绑定事件使用的是 v-on： ，当然肯定也是存在简写的，那就是 @ ，例如：绑定按钮事件<button v-on:click='showInfo'>点击打印信息</button&...
2023-07-28 11:28:35
132
原创 Vue style中的 scoped 属性
用来隔离样式 -- Scoped CSS一个是在编译之后，直接在 DOM 节点上给类名增加一个hash后缀，不会在节点上增加自定义属性用来隔离样式，且DOM节点与样式文件展示类名一致 -- CSS Modules。这样一对比，发现 CSS Modules 是更好用一点哈。所以在。
2023-07-26 16:54:44
4027
原创 Vue mixin 混入
创建一个 mixin 混入对象是很简单的，只是我们需要注意的是，配置的键值对，只能是创建组件时传入的配置项，如果，你传了一个 其他不存在的属性 ，组件接收之后，是不会对其解析的，就相当于你在组件内部，定义了一个不存在属性，Vue 底层是不会管这个玩意的。这就看出来很多余了。其次、我们创建的 mixin 对象，在组件中引用的时候，mixin 对象 中的键值对会 混入 该组件的配置详项中，至于是怎么混入的，下面在讲。创建了一个 mixin 对象之后，组件需要使用的时候，就和引入公共组件和公共方法一样。
2023-07-25 16:16:26
527
原创 new Vue () 中的 render 函数与 templete 模板
如果我们引入了完整版的 vue.js ，那么在我们webpack 打包编译的时候，生成的包就会变大，就会增加浏览器的加载时间。文档上说的是，可以是 HTML 标签名称，可以是 组件，那也就是说，我的 App 组件，直接放进去当做参数，有问题没，那必须是没问题的啊。在官网上存在这么一个例子，说的比较清楚，按照之前的理解，我使用 templete 模板是没有问题的，但是 因为 脚手架生成的项目，引入的 Vue 文件，是不带 templete 模板编译器的 运行时文件，所以导致出现了这个问题。
2023-07-21 14:34:52
1595
原创 Vue与VueComponent的内置关系
构造函数 VueComponent 的原型对象也是一个对象，也存在 __proto__ 属性，按理来说是 VueComponent .prototype.__proto__ 指向的同样是是 Object。6、通过 注册组件之后应用，Vue 自动帮我们 使用 New VueComponent() 生成了一个实例对象，这里叫他vc，以便于后续操作。这里只需要理解一个点，那就是构造函数的prototype 属性(显式原型属性) === 实例对象的 __proto__属性(隐式原型属性)，注意，
2022-12-28 18:29:29
468
原创 Vue-extend和VueComponent
在一个非单文件组件中(一个文件中包含n个组件，最常见的就是单个html文件中存在多个组件)，如果我们需要在这个文件中创建n个组件，然后再页面上展示，这时候我们就需要先定义组件，然后注册组件，最后使用组件。原则上，默认一个非单文件组件中 只存在一个 new Vue() 定义的根组件，可以有无数个 Vue.extend() 定义的子组件，这是因为，如果所有组件都用 new Vue() 定义，那么如果存在组件包裹的情况，子组件内部双向绑定的数据不会生效。， 因为是通过函数返回的。.........
2022-08-10 20:53:35
2225
原创 Vue2-生命周期
之前说完了Vue的基础知识，说了语法、数据代理、数据监听、计算属性、指令、过滤器等等，但是没有涉及到Vue的声明周期，其实之所以把生命周期放在后面讲，是因为，如果最开始讲生命周期，里面涉及到的概念性东西比较多，初学者不容易理解，只能死记硬背。但是在理解了前面的这些基础知识之后，回过头来理解生命周期，就会很方便了。这就是 Vue 官网上的生命周期图，在这里 对每个生命周期以及每个模块都标注了tips，可以根据这些图例来辅助理解Vue的生命周期。源起 new Vue()当我们通过 new V
2022-06-23 14:37:51
9456
1
原创 Vue-自定义指令
上面说完了 Vue 的内置指令，了解了这些内置指令的使用及原理，接下来我们来说说 Vue 的自定义指令。自定义指令定义v-show ：Vue 的内置指令，通过这个指令能展示和隐藏节点 ，其实也就是Vue底层控制了该节点的 display 属性。自定义指令：在构建项目过程中，虽然我们都是使用的组件形式，但是在某些情况下，我们仍然需要对普通DOM元素进行底层操作，这个时候就会用到自定义指令。自定义指令既可以像 v-show 一样，不搭配属性值，也可以像 v-text配置属性值来实现特殊效果
2022-01-24 16:44:51
6513
原创 Vue-内置指令
之前用到过的 v-bind、v-model等等都是属于Vue 的内置指令，是Vue给我们定义好的，我们可以直接使用，接下来我们来说一说之前没有用到过的其他的内置指令v-text指令：向所在节点中 渲染文本内容初始化一个 Vue ，在data内部添加 name 属性，分别通过插值语法、v-text 指令来绑定到不同的标签上进行展示<div id='root'> <div>你好，{{name}}</div> <div v-text='name'
2022-01-18 18:08:02
573
原创 Vue-过滤器
数组过滤( filter )我们都不陌生，就是对数组的每一项做一些处理之后，返回一个新的数组。 那么Vue的 过滤器又是个啥玩意呢？我们现在有一个需求，就是将当前时间戳转为为正常时间展示出来，我们可以有很多种方法来实现首先，引入 dayjs，这是一个类似于Moment.js de 处理时间和日期的 js库，但是更为轻量。computed实现<body> <div id='root'> <!-- 计算属性实现 --> <h2&g.
2022-01-17 15:21:21
498
原创 Vue-数据监听-数组监听
说完了对象的监听和后期添加对象的操作，接下来，我们来说一说针对于数组的监听。1、首先还是定义一组数据用于展示，hobbys 为字符串数组，friends 为对象数组const vm = new Vue({ el: '#root', data() { return { hobbys: ['抽烟', '喝酒', '烫头'], firends: [ { name: 'al', age: 20 }, { name: 'hj', age
2022-01-12 17:42:55
16710
原创 Vue-Vue.set() 的原理及使用
上面刚刚讲完 Vue 监听对象的改变，接下来本应该说说数组的监听过程，但是在这里需要插播一节 Vue.set() ，这是因为 Vue.set() 与对象的连接较为紧密，所以串联在一起方便理解。1、首先，定义一批数据用来渲染到页面上展示<body> <div id="root"> <h2>姓名：{{student.name}}</h2> <h2>年龄：真实{{student.age.realAge}} 虚拟{{stude
2022-01-11 20:01:55
19229
7
原创 Vue-数据监听-对象监听
之前说到了Object.defineProperty() 用来监听 data 的数据改变，从而实现响应式，但是在回顾definePropety方法博客中，出现了一个问题，那就是我在 改变数据，调用 set() 函数的时候，出现了堆栈溢出的问题，这是因为出现了递归的情况。在这里我们就来看看Vue是怎么解决这个问题的。首先，我们来实现一个简单的数据监听效果，以此来深入理解一下，Vue的数据监听是怎么做到的。1、新建一个html文件，不需要引入Vue ，然后定义一个对象<script&...
2022-01-11 10:08:58
3399
1
原创 Vue-v-for列表渲染中的key
在上一章讲到 v-for 列表渲染的博文中，只是说到了 v-for 的基本使用，并没有对其内部进行更深层次的 解读，其实在 v-for 这个指令下，有一个及其关键的 连带属性 key。这个 key 才是 Vue 或者是是 MVVM 框架的 最精髓的东西。key的使用方式：以数组为例<ul> <li v-for='(person,index) of personArr' :key='index'> {{person.name}} </li>...
2021-12-06 16:27:31
1110
原创 Vue-v-for列表渲染
列表渲染这个东西，在远古时期( 或者说是在没有这种Vue、React等这种便捷工具时期 )，我们的渲染都是手工写出来的。例如以前的 使用 jq 写 列表页的时候，我们都是先写出静态页面，然后根据返回的数组数据，通过forEach 循环，然后 append 到父节点内部，从而完成展示。但是这样的缺陷其实很大，因为如果数据很多的话，一旦返回的数组数据中，有某一条数据发生了，会导致所有的数据全部重写渲染一遍，造成了极大的性能开销。但是在新的 Vue 工具中，为我们提供了简单方便的渲染方法 ：v-for
2021-11-26 15:29:20
2013
原创 Vue-条件渲染if与show的区别
v-show：当绑定的值( 或表达式的值 ) 为 true 时，在页面上展示当绑定的值、绑定的表达式 分别为 true 和 false 时<div id="root"> <div id="root"> <h3 v-show="true">{{name}}</h3> <h3 v-show="1 === 1">{{name}}</h3> <h3 v-show="false">{{name}}&l..
2021-11-24 16:34:42
1295
原创 vue-绑定class样式
css样式<style> .basic { padding: 20px; background: #ddd; } .red { border: 1px solid red; } .radius { border-radius: 5px; }</style>绑定单个的class类名绑定单个class类名，且能动态切换<!-- 绑定class样式--字符串写法，适用于：样式类名不确定，需要动态..
2021-11-22 17:41:56
616
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人