Vue的一些知识汇总---希望对你有用

  •  一.在不知元素宽高的情况下,如何让块状元素自动居中?
  • 方式1:
        <!--给元素加入定位元素-->
          position::absolute;
        <!--给元素设置距离: 距离上下各 50%-->
          left:50%; 
          top:50%;
        <!--设置元素的相对于⾃身的偏移度为负50%(也就是元素⾃身尺⼨的⼀半)--> 
         transform:translate(-50%,-50%); 
    方式2:
        <!--把元素变成定位元素--> 
           position:absolute; 
        <!--设置元素的定位位置,距离上、下、左、右都为0--> 
           left:0; 
           right:0; 
           top:0; 
           bottom:0; 
        <!--设置元素的margin样式值为 auto--> 
           margin:auto; 
  • 二.var,let,const 这些有啥区别: 
  •  1. var 具有变量提升,⽽const和let没有
     2. const和let都是块级局部变量
     3. 同⼀个作⽤域下 const和let不可以声明同⼀个变量 var是可以的const在使⽤的时候不可以修改值
  • 三.普通函数和箭头函数的区别
  •  ⼀.外形不同:箭头函数使⽤箭头定义,普通函数中没有
     ⼆.箭头函数都是匿名函数: 普通函数可以有匿名函数,也可以有具体名函数,但是箭头函数都是
    匿名函数。
     三.箭头函数不能⽤于构造函数,不能使⽤new命令,否则报错 
        普通函数可以⽤于构造函数,以此创建对象实例。
     四.箭头函数中this的指向不同:
               箭头函数的外层如果有普通函数,那么箭头函数的 this 就是外层普通函数的this
               箭头函数的外层如果没有普通函数,那么箭头函数的 this 就是全局变量window
  • 四.闭包的含义,用途,缺点:
  • 闭包:是指有权访问另⼀个函数作⽤域中的变量的函数,当函数可以记住并访问所在的词法作⽤域时,就产⽣了 
        闭包(即使函数是在当前词法作⽤域之外执⾏)
    闭包用途:
        能够访问函数定义时所在的词法作⽤域(阻⽌其被回收) 
        私有化变量
        模拟块级作⽤域
        创建模块
    闭包缺点:
        会导致函数的变量⼀直保存在内存中,过多的闭包可能会导致内存泄漏
  • 五. TCP请求方式的过程
  • 建⽴TCP连接->发送请求⾏->发送请求头->(到达服务器)发送状态⾏->发送响应头->发送响应数据->断TCP连接
  •  六.回流和重绘
  • 重排(也称回流): 当DOM的变化影响了元素的⼏何信息(DOM对象的位置和尺⼨⼤⼩),浏览器需要重新计算元素         
        的⼏何属性,将其安放在界⾯中的正确位置,这个过程叫做重排(回流)。
    触发:添加或者删除可⻅的DOM元素,元素尺⼨改变(边距、填充、边框、宽度和⾼度)
    
    重绘:当⼀个元素的外观发⽣改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘
    触发:改变元素的color、background、box-shadow等属性
    
    回流(重排)优化建议:
         分离读写操作
         样式集中修改
        缓存需要修改的DOM元素
       尽量只修改position:absolute或fixed元素,对其他元素影响不⼤
       动画开始GPU加速,translate使⽤3D变化
  • 七.原型链:
  • 当我们访问⼀个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象⾥找这个属性,这个原型对象⼜会有⾃⼰的原型,于是就这样⼀直找下去,也就是原型链的概念
  • 八.什么是生命周期,他的作用,过程
  • vue的⽣命周期:每个Vue实例在创建时都会经过⼀系列的初始化过程
    
    作用:在vue生命周期的不同阶段通过对应的钩子函数来实现  组件数据管理 和 DOM渲染  两大重要功能
    
    过程: 
    1.创建阶段(create阶段): 
           beforecreate: vue实例已经初始化,但不能获取DOM节点 (无 data /无el )
           created: vue实例已经创建,但是仍然不能获取dom节点 (有data /无el )
    
    2.载入阶段(mount阶段):
           beforeMount: 模板编译完成,但是未挂载到界面上 (有data /有el )
           mounted: 编译好的魔板已经挂载到了界面中(数据和dom节点已经渲染出来了)   
    
    3.更新阶段(update阶段):
           beforeupdate: 数据发生变化立即调用,此时data中的数据时最新的,但是页面上的数据还是旧的(检测到数据更新时,但dom更新前执行)
           updataed: 更新结束后执行,此时data中的值与页面上的值都已经是最新的 
    
    4.销毁阶段(destroy阶段):
            beforedestroy: (实例被销毁前)当要销毁vue实例时,在销毁之前执行
            destroy: (实例被销毁前)在销毁vue实例前执行
    
    • 九.created和mounted的区别
  • created :实例已经创建, 但不能获取DOM节点 
    mounted :模板已经挂载到页面上了,可以操作dom元素
    
  • 九. 如果在实例创建之后添加新的属性到实例上,它会不会触发视图更新
  • 不会,同时vue官方给我们提供了两种方法: vue.set() 和 this.$set()
    
  • 十. Vue组件通信
  • ⽗⼦组件通信
    ⽗->⼦ props
    ⼦->⽗ $on、$emit  获取⽗⼦组件实例
    parent、children Ref  获取实例的⽅式调⽤组件的属性或者⽅法
    Provide、inject   官⽅不推荐使⽤,但是写组件库时很常⽤
    兄弟组件通信(bus总栈)
    Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() 
    Vuex 跨级组件通信
    $attrs、$listeners Provide、inject
  • 十一. 监听器与计算属性的区别:
  • 1).计算属性 需要依赖多个属性的情况  侦听器只依赖一个属性的情况
    
    2).计算属性缓存结果时每次都会不断重新创建变量,而侦听器是直接计算,不会创建变量保存结果
    
    3)计算属性有缓存, 监听没有缓存
    
    4).computed计算属性的结果是通过return返回的,而watch不需要return。
    
    5).watch监听中的参数可以得到侦听属性改变的最新结果,而computed函数没有这种参数。
  • 十二.$route与$router的区别
  • router: 
        是VueRouter的⼀个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到⼀个router的实例对象,这个对象中是⼀个全局的对象,他包含了所有的路由包含了多关键的对象和属性。
    
    route:
        是⼀个跳转的路由对象,每⼀个路由都会有⼀个route对象,是⼀个局部的对象,可以获取对应的name,path,params,query等
    
    两者的⼀些属性是不同的。
    
  •  十三.导航守卫:
  • 全局: beforeEach            局部: afterEach
    
    导航守卫的执行顺序:
        beforeRouteLeave --> beforeEach : 全局前置守卫(三个参数) 
                    to :即将进入的路由对象
                    from :当前导航正要离开的路由   
                    next :下一步
      -->路由独享守卫 (beforeEnter) -->组件内进入(beforeRouteEnter) --> 全局解析守卫(beforeResolve) --> 全局后置守卫(afterEach) --> beforecreate --> created -->失活组件的销毁(destory)-->当前的组件的beforeMout -->mounted
    
    
  • 十四.第一次页面加载会触发哪几个钩子函数?
  • beforeCreate   created   beforeMount    mounted
  • 十五.双向绑定实现原理
  • 当⼀个Vue实例创建时
        Vue会遍历data选项的属性,⽤Object.defineProperty
        将它们转为 getter/setter并且在内部追踪相关依赖,
        在属性被访问和修改时通知变化。每个组件实例都有相应的watcher 程序实例,
        它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调⽤时
        会通知 watcher重新计算,从⽽致使它关联的组件得以更新
  • 十六.vuex是什么?它的核心概念是什么?
  • Vuex是一个专为vue.js应用程序开发的状态管理模式
    
    状态管理(五个属性) :state,getters,mutation,action,modules
    状态就是数据,它相当于一个仓库,是用于存放数据用的,它可以把存储的数据共享给其他组件
    
    
    详细五个概念:
    
    state
         负责状态管理,类似于vue中的data,用于初始化数据
    
    mutation
         存放的是动态修改Vuex的state中保存的数据状态的方法,通过commit触发
    
    action
       可以处理异步,通过dispatch触发,不能直接修改state,首先在组件中通过dispatch触发action,然 
    后在action函数内部commit触发mutation,通过mutation修改state状态值,将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据
    
    getter
        Vuex中的计算属性,相当于vue中的computed,依赖于state状态值,状态值一旦改变,getter会重新计算,也就是说,当一个数据依赖于另一个数据发生变化时,就要使用getter
    
    module
        模块化管理
    
  •  十七.axios 是⼀个基于Promise ⽤于浏览器和 nodejs 的 HTTP 客户端
  • 十八.vue组件中的data 定义为何必须是一个函数?
    因为data是对象的话,由于对象是引用类型,组件被复用的话,就会创建多个实例.本质上,这些实例用的都是同一个构造函数。这样就会影响到所有的实例,所以为了保证组件不同的实例之间data不冲突,data必须是一个函数

     十九.什么是声明式路由? 什么是编程式路由 ?

  • 声明式: <router-link to='跳转的路径'></router-link>
    
    编程式跳转: 就是js写法 即this.$route.push('跳转的路径')
    
                    //不带参数推荐直接跳转
    				// this.$router.push('跳转的路径')
    				//如需带参数: 推荐使用路由的name属性
    				let myname = this.$route.params.id;
    				this.$router.push( {name:'logo',params:{m:myname} });

    二十.使用vue的v-for时,为什么要绑定:key? 如何不绑定会有什么效果?

  • key :可以给组件的添加唯一的标识性,为了更好的区别各个组件,更好的查找和单个渲染
       不绑定会导致所有列表Dom重新渲染
    


     
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Vue Seamless Scroll是一个Vue的无缝滚动组件,可以用来创建平滑的滚动效果。使用Vue Seamless Scroll需要以下步骤: 1. 首先,需要引入Vue Seamless Scroll插件。在Vue2中,可以使用以下代码进行引入: ```javascript import vueSeamlessScroll from 'vue-seamless-scroll' ``` 在Vue3中,可以使用以下代码进行引入: ```javascript import { Vue3SeamlessScroll } from "vue3-seamless-scroll";``` 2. 注册Vue Seamless Scroll组件。在Vue2中,可以在组件的`components`选项中注册Vue Seamless Scroll: ```javascript components: { vueSeamlessScroll } ``` 在Vue3中,可以在组件的`components`选项中注册Vue Seamless Scroll: ```javascript components: { Vue3SeamlessScroll } ``` 3. 在需要使用无缝滚动效果的地方添加Vue Seamless Scroll组件标签。在Vue2中,可以使用`<vue-seamless-scroll></vue-seamless-scroll>`标签进行包裹: ```html <vue-seamless-scroll></vue-seamless-scroll> ``` 在Vue3中,可以使用`<vue3-seamless-scroll></vue3-seamless-scroll>`标签进行包裹: ```html <vue3-seamless-scroll></vue3-seamless-scroll> ``` 你还可以参考Vue Seamless Scroll插件的在线演示文档,了解更多关于它的用法和示例。 这就是使用Vue Seamless Scroll的方法。希望对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue-seamless-scroll插件,使用详细( vue-seamless-scroll 无缝滚动)](https://blog.csdn.net/weixin_65793170/article/details/129388795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue的无缝滚动组件vue-seamless-scroll实例](https://download.csdn.net/download/weixin_38674415/12766875)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

甜宝小妮儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值