随笔分类 -  Vue

24-Vue中的$attrs和inheritAttrs
摘要：感觉这个问题官方文档的描述有点不清晰，同时没有给出一个很直观的例子，今天在这个点上纠结了半天。 inheritAttrs 当我们在使用组件时，为其传递的参数要在组件的props中进行定义，才能够使用。如果没有定义，则这个属性会作为这个DOM结构的attribute被渲染。 比如我们定义一个自定义组件 阅读全文
posted @ 2022-01-13 03:17 猎奇游渔 阅读(256) 评论(1) 推荐(0)
22-子组件props参数的一些思考
摘要：props中两个参数： 1）type是为了做传入参数做类型校验。类型可以有多种，包在数组里即可。 2）default 是当父组件压根就没传过来你去接收的这个props属性，就是做默认值用的，目的就是为了不让你在组件内去使用的时候会报 undefined （下图示例就是当父组件没有传testData这 阅读全文
posted @ 2021-09-17 21:07 猎奇游渔 阅读(205) 评论(0) 推荐(0)
19-为什么vue中的data是一个函数而不是一个对象
摘要：Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了； JavaScript只有函数构成作用域(注意理解作用域，只有函数 {} 构成作用域,对象的 {} 以及 if(){}都不构成作用域) ,data是一个函数时，每个组件实例都 阅读全文
posted @ 2021-05-12 16:10 猎奇游渔 阅读(1160) 评论(0) 推荐(0)
18.vue修饰符 passive / addEventListener
摘要：passive这个修饰符会执行默认方法。 通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。 再通俗点说就是不管你写了没写阻止默认行为，浏览器都会去查询一下，看你到底阻止了没有。 查询就需要时间成本，为了让我们的滚动事件更加平滑，提前告诉浏览器别 阅读全文
posted @ 2021-04-26 00:15 猎奇游渔 阅读(434) 评论(0) 推荐(0)
17- vue自定义指令-操作DOM的
摘要：自定义指令其实就是对普通 DOM 元素进行底层操作 自定义指令就是 v-xxx 自定义指定的钩子函数： 在不同的时机可以触发不同的钩子，如bind(){} 是指令绑定到元素上的时候会触发 自定义指令的几个参数：具体看官网搜索自定义指令 自定义指令案例： 1.聚焦 ： （1）在input被插入到父元素 阅读全文
posted @ 2021-04-19 01:14 猎奇游渔 阅读(561) 评论(0) 推荐(0)
15-keep-alive
摘要：从列表页离开回到列表页时定位到列表页原来的位置 原理： keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 因为提前被keepalive包裹了，因此在keep-alive首次加 阅读全文
posted @ 2021-04-16 15:03 猎奇游渔 阅读(99) 评论(0) 推荐(0)
14-观察者模式和发布订阅的区别/proxy实现观察者模式
摘要：1.观察者模式是只有两个对象：目标对象（类）去直接作用观察者（类）去更新，这个更新是在观察者内部调用自身的update方法去执行响应或者说去做更新。 耦合度较高，因为观察者是在目标对象的“体内”去执行的。目标对象在自己体内去添加观察者列表，然后调用自身的发布事件触发观察者调用自己的update方法执 阅读全文
posted @ 2021-04-16 02:37 猎奇游渔 阅读(1000) 评论(0) 推荐(0)
13.每个vue文件都是一个私有作用域/css的私有性原理
摘要：每个vue组件是一个私有的作用域（script标签包裹的都是）如下测试： 父组件： 子组件： 结果：我们发现只有定义在vue原型上的，才能拿到，因为this就是vue的实例，实例当然可以访问原型上的方法啦，但是虽然父组件引入了子组件，但是却不能使用子组件中的变量。 我们发现vue-runtime-e 阅读全文
posted @ 2021-04-15 23:52 猎奇游渔 阅读(184) 评论(0) 推荐(0)
12-vue首次生命周期-父组件引入子组件的生命周期顺序
摘要：beforecreate把vue实例初始化，数据方法还没有加载created已经加载数据方法beforemount模板数据已经编译mounted渲染视图前面四个是组件初始化加载经过的生命周期函数beforupdate没有修改数据update修改之后beforedestroy组件销毁之前destroy 阅读全文
posted @ 2021-04-15 11:22 猎奇游渔 阅读(254) 评论(0) 推荐(0)
11-vue路由/transtion动画效果
摘要：hash模式不利于SEO，因为搜索引擎对于#后面的内容（锚）点一般是不收录的 webpack打包public./和/或者/xxx/的区别 路由参数传递： 如果想要拿到当前路由中的参数，平常我们都是通过this.$route去获取路由信息，取值 如果在路由中 /home/:id 在组件中使用：this 阅读全文
posted @ 2021-04-14 00:30 猎奇游渔 阅读(249) 评论(0) 推荐(0)
10-this.$emit和this.$on 什么玩意？
摘要：爸爸组件：在一个组件中用this.$emit和this.$on 爸爸组件中引入了儿子组件和孙子组件，并且儿子组件套着孙子组件（因为儿子组件中用了slot） 1 <template> 2 <div class="father"> 3 <div>我是爸爸组件</div> 4 <el-button siz 阅读全文
posted @ 2021-04-13 02:11 猎奇游渔 阅读(2085) 评论(0) 推荐(0)
08-vue单项数据流
摘要：何谓单项数据流？ 就是父组件传递给子组件，子组件通过props接收，子组件不要直接修改props的值，有两种情况： 1.如果父组件传来的是一个基本数据类型，子组件直接去修改，会报错 2.如果父组件传来的是一个对象数据类型，子组件去修改，其实修改是内存空间，确实能修改，也不会报错。 但是但是问题来了： 阅读全文
posted @ 2021-04-12 23:36 猎奇游渔 阅读(62) 评论(0) 推荐(0)
08-手动实现一个v-model-以及妙用
摘要：第一种方法： 父组件： 1 <template> 2 <div class="father"> 3 <p>{{name}}</p> 4 <son v-model="name"></son> 5 <!-- 等同于下面,因为model就是代表的value --> 6 <!-- <son type="te 阅读全文
posted @ 2021-04-12 01:20 猎奇游渔 阅读(387) 评论(0) 推荐(0)
07-生命周期详解
摘要：从图中我们可以看到，Vue实例的生命周期大致可分为4个阶段： 初始化阶段：为Vue实例上初始化一些属性，事件以及响应式数据； 模板编译阶段：将模板编译成渲染函数； 挂载阶段：将实例挂载到指定的DOM上，即将模板渲染到真实DOM中； 销毁阶段：将实例自身从父组件中删除，并取消依赖追踪及事件监听器； 一 阅读全文
posted @ 2021-04-11 18:54 猎奇游渔 阅读(222) 评论(0) 推荐(0)
06-vue编译过程 / 双向绑定原理
摘要：VUE源码全解读 vue编译过程是怎样的？ 1.先说什么是编译？为什么要编译？ 首先编译，vue这个模板这些语句html根本就不识别，我们通过编译的过程可以进行依赖收集，进行依赖收集以后，就可以把我们data中的数据模型和视图之间产生了绑定关系、依赖关系。那么以后如果模型发生变化的时候，我们就可以通 阅读全文
posted @ 2021-04-07 01:06 猎奇游渔 阅读(177) 评论(0) 推荐(0)
05-虚拟DOM/Diff算法中可以看到循环中加key的重要性（性能）
摘要：1.Vue2中响应式中的Vue.$set 2.为什么尤雨溪说vue不是严格的mvvm 为什么要有虚拟DOM？ 因为我们如果把一个简单div元素的所有属性都打印出来，你会看到有二百多个属性和方法。所以我们每次更新数据后，这两百多个属性都会触发一遍，所以操作DOM是代价很高的。 DOM是前端的性能瓶颈， 阅读全文
posted @ 2021-04-03 01:15 猎奇游渔 阅读(113) 评论(0) 推荐(0)
03-Object.freeze()优化vue想目，数据列表的优化
摘要：1 数据冻结 2 vue-virtual-scoller 3 vue-virtual-scoller-list 4 使用normalize.css解决浏览器样式兼容性问题 <link rel="stylesheet" href="http://cdn.staticfile.org/normalize 阅读全文
posted @ 2021-03-30 01:07 猎奇游渔 阅读(78) 评论(0) 推荐(0)
02-Object.freeze()冻结
摘要：浅冻结： Object.freeze冻结对象的时候，只会冻结里面的基本数据类型，并且是冻结的是值，对于里面的对象是无法冻结的，还可以进行修改，是因为地址还有引用。这也叫做浅冻结 深冻结： 冻结的对象不管里面有多少层嵌套的复杂数据类型，通过递归，全部冻结 冻结数组：也是冻结数组的最外层，里面嵌套的依然 阅读全文
posted @ 2021-03-30 00:00 猎奇游渔 阅读(383) 评论(0) 推荐(0)
01-watch原理/computed原理
摘要：我们监听一个元素，在created中，如果这个值被赋值多次，但是监听只能监听到一次。如何做到监听两次？ 浏览器输出： 发现只输出一次3 解决： $nextTick()是一个promise对象，可以用async和await，下图中两种写法一个意思。 输出：为什么不输出1，因为1和3在一个层，3把1给覆 阅读全文
posted @ 2021-03-16 20:59 猎奇游渔 阅读(225) 评论(0) 推荐(0)