丫丫要努力！-优快云博客

原创 JavaScript 学习笔记

<div data-id="1"> 自定义属性 </div><script>// 1. 获取元素// 2. 获取自定义属性值</script>

2026-02-27 16:25:42 654

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能//在main.js中Vue.directive('指令名', {// 可以对 el 标签，扩展额外功能el.focus()})//在Vue组件的配置项中"指令名": {// 可以对 el 标签，扩展额外功能el.focus()注册指令时不用加v-前缀，但使用时一定要加v-前缀指令有 5 个钩子函数（和组件生命周期类似），常用的是mountedupdatedunbind（Vue2）/unmounted钩子函数（Vue2）

2026-02-26 13:41:19 683

原创前端vue3 组件通信——学习记录

测试

2026-01-25 23:09:34 730

原创前端vue3 pinia——学习记录

正常情况下访问ref对象应该使用.value，即countStore.sum.value，但是这种访问方式不对，因为这个ref对象是嵌套在reactive下的，已经自动解包了，所以直接countStore.sum读取数据就行。但是这样就失去响应式，此时就会想到torefs，不过，torefs会把countStore里面所有的属性方法都变成ref，因此需要用到storeToRefs，它只会把里面的store里面的数据变为ref。使用数据时需要countStore.sum，这样比较麻烦。

2026-01-22 21:05:53 329

原创前端vue3 路由——学习记录

但这样传参的缺点是，传过去的id和name都是字符串，to=“/news/detail?同样的方式，在你想要添加子展示区的page组件中，使用<RouterLink>和<RouterView>，注意to的用法为 to:"/news/detail"，要把路径写完整，只写detail的话就会变成和news路由平行的路由，匹配不到。像上面那种，Detail.vue文件接收参数需要用的query.id，params.id，这样很麻烦，路由props配置项让路由组件更方便的收到参数（可以将路由参数作为。

2026-01-22 14:19:49 683

原创 vue的生命周期

挂载（挂载前 beforeMount，挂载完毕 mounted)：网页初步渲染，初始化。更新（更新前 beforeUpdate，更新完毕 Updated）：网页有变化。创建（创建前 beforeCreate，创建完毕 created）：进入网页。onBeforeMount(()=>{//执行逻辑})Mounted(()=>{//执行逻辑})3、子组件先挂载完毕后父组件再挂载。ed(()=>{//执行逻辑})ed(()=>{//执行逻辑})(()=>{//执行逻辑})(()=>{//执行逻辑})

2026-01-20 21:56:38 197

原创前端vue3 watch

文章摘要：watch在Vue中用于监视数据变化，其行为因数据类型而异。对于基本类型（字符串/数字/布尔值），watch监视值本身；对于引用类型（对象/数组等），则监视内存地址变化。文章详细介绍了不同场景下的watch用法：1）基本类型直接监视；2）对象类型需开启深度监视（deep:true）；3）reactive对象默认深度监视；4）监视对象属性时，非对象属性需用函数返回，对象属性建议用函数形式并开启深度监视；5）可同时监视多个数据。还指出了地址变化对监视的影响及解决方案。

2026-01-19 17:48:44 932

原创前端vue3——ref和reavtive 学习心得

对于（2），定义let car=reactive({brand:'aaa',price:123})后，如果像car={brand:'奥托',price:200}这样重新分配对象，失去响应式,后面的修改价格也不会生效，因为给变量 car 重新赋值了一个「全新的普通对象的内存地址」用ref定义car的话，log出car，car不是响应式对象，而是refImpl对象，car.value就是proxy实例对象，即响应式对象。变量 car 本身，依然是原来的「RefImpl 响应式容器」，地址没变、响应式能力没变；

2026-01-19 11:45:44 527

原创前端vue3的toRefs和toRef 学习记录

此时是把person中的属性拿出来全部转化为ObjectRefImpl类型，并且ObjectRefImpl中引用了原来的person，感觉相当于地址引用，所以在name.value是响应式的，修改之后person.name也会修改，页面会变化。2、如果想要解构这个对象，即只引用其中几个属性，let {name,age}=person,此时只是单纯的值传递，即使修改了name，person.name不会改变，并且页面也不会改变，因为name不是响应式的。

2026-01-18 23:09:41 202

m0_60549223的博客