Laollaoaolao的博客

vue长列表优化之虚拟列表实现应用场景:后台一次性发送上千条或更多数据给前台场景模拟:用户发起一个请求,后台发送了10w条数据使用虚拟列表之前:前台需要生成10w个dom节点用来渲染页面使用虚拟列表之后:前台只需要生成少量dom节点(dom节点数量取决于前端视图需要展示的数量),就可以实现对这10w条数据的视图渲染总之:虚拟列表就是固定dom节点数量,通过修改dom节点的内容而达到不重新增加(或删除)dom节点来实现列表的更新1.实现原理监听页面滚动,获取滚动的高度scrolltop根据

1.定义理解:一个路由(route)就是一组映射关系(key-value),多个路由依靠路由器(router)进行管理前端路由:key是路径，value是组件2.基本使用1.安装vue-routernpm i vue-router2.应用插件Vue.use(Router)3.编写router配置项在router.js中(如果没有这个文件就自己创建)import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)

1.定义1.vuex是什么:专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式，且适用于任意组件间通信2.什么时候使用Vuex​ 1.多个组件以来同一状态​ 2.来自不同组件的行为需要变更同一状态3.Vuex工作原理图2.vuex核心概念和API1.state1.vuex管理的状态对象(存放数据的对象)2.它应该时唯一的3.示例代码:const state = { // key:val

1.默认插槽1.定义​ 1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件==>子组件​ 2.使用场景:只需要最基本的往组件中插入html时，可以使用默认插槽2.示例理解:父组件在子组件的标签内编写代码，在子组件中使用slot标签即可接收子组件<div class="list"> <h1>{{title}}</h1> <slot></slot> </div&g

1.定义1.一种组件间通信方式，适用于任意组件间通信2.使用步骤：​ 1.安装pubsub: npm i pubsub-js​ 2.引入: import pubsub from ‘pubsub-js’​ 3.接收数据：A组件想接收数据，则在A组件中订阅消息,订阅的回调留在A组件本身 methods:{ hello(){ console.log("school组件发布的消息成功传输到student组件中了"); } }, m

1.定义​ 1.一种组件间通信的方式，适用于任何组件间通信​ 2.事件总线实际上就是定义一个全局变量将其挂载在Vue实例上，在Vue实例中需要在其生命中期中的beforeCreate中将事件总线挂载在Vue实例上，如果在创建实例之间挂载，则此时实例不存在，无法挂载，如果在创建实例之后挂载，此时页面已经渲染完成，挂载已经不生效​ 3.安装全局事件总线new Vue({ ... beforeCreate(){ //将事件总线挂载在Vue实例上 Vue.prototype.$bus

1.定义1.浏览器通过window.sessionStorage和window.localStorage属性来实现本地存储机制2.相关APIxxxxStorage.setItem('key','value')//把键值对添加到存储中，如果键名存在，则更新其对应的值xxxxStorage.getItem('key')//获取对应键名的值xxxxStorage.removeItem('key')//移除对应键值对xxxxStorage.clear()//清空存储中的所有数据3.sessio

1.定义​ 1.一种组件间通信的方式，适用于： 子组件===>父组件​ 2.使用场景:A是父组件，B是子组件，B想给A传递数据，那么就给在A中给B绑定自定义事件(事件的回调在A中)​ 3.绑定自定义事件:​ 1.方式一​ 在父组件中：<School @getSchoolName="getSchoolName" />或者<School v-on:getSchoolName="getSchoolName" />​ 2.方式二 在父组件中定义ref

1.定义作用：让样式在局部生效，防止样式冲突原理：给每个组件的最外侧div添加一个id，这样就能有效的阻止样式冲突写法:<style scoped></style>2.示例假设我们需要写两个组件的css样式,假设我们样式的类名一样在student.vue中<div class="name"></div>.name{ width: 200px; height: 200px; background-color: ye

1.定义功能:用于增强Vue本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据定义插件的方法:对象.insatll =function(Vue,options){ //1.添加全局过滤器 Vue.filter(...) //2.添加全局指令 Vue.directive(...) //3.配置全局混入 Vue.mixin(...) //4.添加实例方法 Vue.prototy

1.定义​ 功能:可以把多个组件公用的配置提取成一个混入对象​ 类似于node.js中的工具类​ mixin中可以写VC(VueComponent)中的任何属性,例如 methods data 生命周期函数等等​ 使用方式:​ 第一步:定义mixin​ 创建一个新的js文件，并在对象中书写功能export const mixin ={ methods:{ showName(){ alert(this.name) }

1.定义让组件接受外部传过来的数据​ (1).传递数据:​ ​ (2).接收数据:​ 方式一(只接收，不进行其他的配置)​ props:[‘name’]​ 方式二(限制类型)​ props:{​ name:String​ }​ 方式三(限制类型、限制必要性、指定默认值)props:{ ​ name:{ ​ type:String,//类型 ​ requried:true,//必要性

1.理解ref属性:​ 1.被用来给元素或子组件注册引用信息(id的替代者)​ 2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(VueComponent)​ 3.使用方式：​ 打标识: 或者2.示例接下来我们演示ref的结构首先我们定义一个组件 school<div> <p>姓名：{{name}}</p> <p>年龄：{{age}}</p> </div&g

1.定义组件的定义:实现应用中局部功能代码和资源的集合非单文件组件:一个文件中包含n个组件单文件组件:一个文件中只包含1个组件2.使用1.创建组件的基本格式创建组件的基本格式:使用Vue.extend创建组件实例，并在父级实例中注册该组件组件的基本格式:与vm实例类似，但是不能有el，并且data只能是一个函数const component = Vue.extend({ template:`xxx`//模板内为html代码，使用时会将模板渲染到页面 data(){

1.原理beforeCreate:此时生命周期以及事件已经被初始化但是数据代理还未开始，无法通过vm访问到data中的数据、methods中的方法created：此时数据监测和数据代理已经初始化，可以通过访问vm访问到data中的数据beforeMount：此阶段Vue开始解析模板，生成虚拟DOM(内存中)，但是页面还不能显示解析好的内容，此时页面呈现的时未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效mouted:此阶段内存中的虚拟DOM已经转成真实DOM插入页面。页面中呈现的时

1.格式 directives:{ big(element,binding){ element.innerText =binding.value*10 console.log(element,binding) }, fbind:{ //指令与元素成功绑定时 bind(element,binding){

介绍回顾以下以前学过的指令1.v-text属性1.向其所在的节点中渲染文本内容2.与插值语法的区别:v-text会替换掉节点中的内容，{{}}不会 <div id="app"> <p>{{str}}</p> <p v-text="str"></p> </div> new Vue({ el:'#app', data:{ s

16.Vue过滤器1.介绍Vue过滤器filters可以对数据进行过滤，实际上就是一个函数在修饰符{{}}中使用|可以对数据进行过滤格式为{{item | filters}}2.举例假设我们有这样一个需求:要按照一定格式并且实时输出时间在编写之前我们介绍一款很好用的插件Dayjs，可以将输入的时间戳格式化，而且有非常多的格式化方式，非常方便[Dayjs](Format · Day.js (gitee.io))我们利用Vue中的filter实现这个需求注意使用dayjs插件需要先下载

Vue监测数据的原理1.原理1.vue会监视data中所有层次的数据2.如何监测对象中的数据？​ 通过setter事件监视，且要在newVue时就传入要监测的数据​ (1).在对象后追加的属性，Vue默认不做响应式处理​ (2).如需给后添加的属性做响应式，需要使用以下API:​ Vue.set(target,propertyName/index,value)​ vm.$ser(target,propertyName/index,value)3.如何监测数组中的数据

1.原理1.虚拟DOM中key的作用1.key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较2.对比规则:​ (1).旧虚拟DOM中找到了与新虚拟DOM相同的key:​ ①.若虚拟DOM中内容没有变化，直接使用之前的真实DOM​ ②.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM​ (2).旧虚拟DOM中未找到与新虚拟DOM相同的k

※computed计算属性函数中不能添加异步回调函数，而watch中可以我们在日常开发中，很多案例既可以用watch实现，也可以用computed实现,z在两者皆可的情况下，我们优先选择更加方便的computed计算属性来实现，但是如果存在computed行不通的案例怎么办？我们来看一下以下案例我们通过输入姓和名，要求输出全名我们用计算属性来写这个案例：<div id="app"> 姓:<input type="text" v-model="firstName"&g

1.理解监视属性watch:1.当被监视的属性变化时，回调函数自动调用，进行相关操作2.监视的属性必须存在，才能进行监视3.监视的两种写法:​ 1.new Vue时传入watch配置​ 2.通过vm.$watch监视格式: watch:{ xxx:{ hander(newValue,oldValue){ xxxxx } } }2.案例1.基本属性

1.理解计算属性:1.定义:要用的属性不存在，要通过已有属性计算得来2.原理:底层接住了Object.defineproperty方法提供的getter和setter3.get函数什么时候执行？初次读取会执行一次当以来的数据发生变化时会被再次调用.4.优势:与methods相比，内部有缓存机制(复用).效率更高5.备注:​ 1.计算属性最终会出现在vm上，直接读取即可​ 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时以来的数据发生

6.Vue中的事件修饰符1.功能1.prevent:阻止默认事件 <div id="app"> <a href="https:www.baidu.com" @click=showInfo()>点击我触发事件</a> </div> const vm = new Vue({ el:'#app', data:{ }, methods:{

1.理解1.M:模型(Model):对应data中的数据2.V:视图(View):模板3.VM:视图模型(ViewModel):Vue实例对象可以理解为data中的数据通过VM视图模型监听绑定,最终在V视图中展示出来2.示例<div id="root"> <h1>姓名:{{name}} </h1> <h1>地址:{{address}} </h1> </div> var vm =

Vue数据代理前篇:理解Object.defineProperty方法1.理解Object.defineProperty方法的作用是定义一个属性,为这个属性添加值，并将属性插入一个对象中Object.defineProperty(‘对象名’,’属性’,{value:’属性的数据值’，…})2.示例 let person = { name:'张三', sex:'男' } Object.defineProperty(person,'age',{

1.v-bind(单向绑定)v-bind表示单向绑定,数据只能从data流向页面v-bind能解析表达式举例如下gif图,通过在input中单向绑定value值为data中的name,当改变input框中的值时,data中的值不会发生变化，故页面上的{{name}}也变化,只有改变data中的name时，value才会发生变化，这就是单向绑定 <div id="id"> 单向绑定: <input type="text" v-bind:value="na