devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue常用知识点总结_vue知识点大全

作者：2023面试高手 | 2024-03-20 00:46:27

赞

踩

vue知识点大全

1. Vue常见的指令有哪些，有什么用

v-text：  会替换掉元素里的内容；

v-html： 可以渲染html界面；

v-clock： 防止界面闪烁；

v-bind： 界面元素属性值的绑定，简写为：；

v-on：   事件绑定，简写为@；

v-model：数据双向绑定；

v-for： 可用来遍历数组、对象、字符串，:key提高重排效率，要求是字符串或者数字， 且唯一；

v-if、v-else、v-else-if：判断条件删除或显示dom元素（只修改一次可以使用）；

v-show： 控制显示隐藏（频繁切换时使用）；

v-once： 只会执行一次渲染，当数据发生改变时，不会再变化；

2. 双向数据绑定的原理

原理：采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

定义：

数据劫持：指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。

发布—订阅模式：又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

举个例子，售楼处卖房，那么售楼处要发布房型信息，那么它是发布者，中介关注房型，所以中介是订阅者，当售楼处发布消息之后或者房型信息更新之后，中介就会收到消息，去做某件事情，而这个事情就是去通知客户。这么做的好处是：客户不用关心房型，不用和任何一家售楼处保持紧密的联系，只需要与某个中介联系，但是他可以通过中介知道所有房型的变化。所有客户与售楼处是没有耦合关系的。

3. 路由的跳转和传参有哪几种方式

(1)路由跳转：

声明式：<router-link to="/index"></router-link>（注意加不加冒号的问题，如果是一个固 定的字符串的话不需要加冒号）

函数式：this.$router.push('/index')

(2)路由传参：

路由传参：分为path+query和name+params

声明式： <router-link :to="{path:'/index',query:{id:233}}"></router-link>

<router-link :to="{name:'home', params: {id:233}}"></router-link>

函数式： this.$router.push({path:'/index',query:{id:233}})

this.$router.push({name:'home', params: {id:233}})

4. 组件间的通讯方式有哪些

组件通讯方式有两种：父传子，子传父；

Vue中父传子：

  1. <div id=’app’>
  2.  
  3. <son msg=’hello’></son>
  4.  
  5. <son></son>
  6.  
  7. </div>
  8.  
  9. 子组件接收：
  10.  
  11. props:{
  12.  
  13. msg:{
  14.  
  15. type:[String,Number],
  16.  
  17. default:’hello world’,
  18.  
  19. }
  20.  
  21.        }
  22.  
  23. 子组件：
  24.  
  25.        <template id=’son’>
  26.  
  27.   <div>{{msg}}</div>
  28.  
  29.        </template>

Vue中子传父：

  1. 父组件：
  2.  
  3. <template id=’father’>
  4.  
  5. <son @fromson=’fromson’></son>
  6.  
  7. </template>
  8.  
  9. 子组件：
  10.  
  11. <template id=’son’>
  12.  
  13. <div>
  14.  
  15. <button @click=’tofather’>点我子传父</button>
  16.  
  17. </div>
  18.  
  19. </template>
  20.  
  21. 子组件中触发：
  22.  
  23. methods：{
  24.         tofather(){
  25.  
  26. this.$emit(‘fromson’,’111’)
  27.  
  28. }
  29.  
  30. }
  31.  
  32. 父组件接收子组件参数：
  33.  
  34. methods：{
  35.        fromson(data){
  36.  
  37. console.log(data)
  38.  
  39. }

缓存：localStorage和sessionStorage

可以将数据存储到本地缓存中，在需要的时候从缓存中取出即可。

localStorage存储的数据会一直在浏览器本地存储，除非手动清除；

sessionStorage存储的数据在浏览器关闭后就会清除；

localStorage只能存储字符串，任何格式的数据在存储的时候都会被自动转为字符串，所以读取的时候，需要进行类型的转换；

Vuex：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态。

作用：进行统一的状态管理，解决不同组件共享数据的问题。

不同视图需要变更同一状态的问题

Ref：利用ref函数获取组件中的标签元素，并且可以使用该标签元素的属性和方法

事件总线：

事件总线像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。事件总线多用于兄弟组件的通信。

触发事件

在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。

uni.$emit('update',{msg:'页面更新'})

监听事件

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数

只监听一次

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

移除监听

uni.$off([eventName, callback])

5. 谈一谈对路由守卫的理解（谈理解，一般就是总分总，它是什么，用在哪，有什么用，

怎么用，有什么注意事项，再结合项目说明更好）

路由守卫是路由在跳转前、后过程中的一些钩子函数，这些函数可以让你操作一些其他的事，在后台管理中设置权限时经常看到，在实现路由跳转前校验是否有权限，有权限就可以通过，反之就会被执行其他操作，如返回首页。

“导航”表示路由正在发生改变。正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

路由守卫分为：全局守卫，组件守卫，路由独享；

全局守卫：所有的路由切换都会执行，一般写在路由配置文件中

router.beforeEach(fn) :to\from\next();

router.afterEach(fn):to\from;

router.beforeResolve(fn):to\from\next();

组件守卫：

beforeRouteEnter(fn):to\from\next() //在渲染该组件的对应路由被confirm前调用，不能获取组件实例，因此无法this;

beforeRouteUpdate(fn):to\from\next();

beforeRouteLeave(fn):to\from\next();

路由独享守卫：一般写在路由配置中

beforeEnter(fn):to\from\next();

实例：

可以使用 router.beforeEach 注册一个全局前置守卫。

to：跳转后的页面；from：跳转前的页面；

next是一个方法，next() 直接调用不阻止允许跳转,next(‘/index’)跳转到首页，next(false)不允许跳转；

  1. router.beforeEach（（to，from，next）=>{
  2.  
  3. If(to.meta.needLogin){ //判断是否需要登录
  4.  
  5. getUserInfo().then(res=>{
  6.  
  7. If(res.code == 0){  //判断是否已经登录
  8.  
  9. next()
  10.  
  11. }else{
  12.  
  13. alert(“先登录”)
  14.  
  15. next(“/”)
  16.  
  17. }
  18.  
  19. }else{
  20.  
  21. next()
  22.  
  23. }
  24.  
  25. return false  //返回false取消导航
  26.  
  27. }）
  28.  
  29. meta：路由元数据
  30.  
  31. {
  32.  
  33. path：’mine’,
  34.  
  35. component:Mine,
  36.  
  37. meta:{
  38.  
  39. needLogin:true
  40.  
  41. }
  42.  
  43. }

注意：确保next函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错

路由独享的守卫：

可以在路由配置上直接定义 beforeEnter 守卫，这些守卫与全局前置守卫的方法参数一样。

  1. const router = new VueRouter({
  2.  
  3.  routes: [
  4.  
  5.      {
  6.  
  7.       path: '/foo',
  8.  
  9.        component: Foo,
  10.  
  11.        beforeEnter: (to, from, next) => {
  12.  
  13.          // ...
  14.  
  15.        }
  16.  
  17.      }
  18.  
  19.  ]
  20.  
  21. })

6. 谈一谈对Vuex的理解

vuex是什么：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

使用vuex的原因：

进行统一的状态管理，解决不同组件共享数据的问题。

不同视图需要变更同一状态的问题。

使用vuex之后，状态变化更加清晰。

五个模块：

state: 定义全局状态

  1. state:{
  2.  
  3. Price:20
  4.  
  5. isLogin:false,
  6.  
  7. userInfo:{},
  8.  
  9. }

组件中通过this.$store.state.xxx获取state的值；

getters: 对全局状态state中的数据进行加工(计算)，并不会改变状态值

  1. getters:{
  2.      fee(state){
  3.           return state.price*0.5
  4.           }
  5.      }

组件中通过this.$store.getters.xxx获取值；

mutations: 同步修改全局状态

  1. mutations:{
  2.         changeLogin(state,payload){
  3.  
  4.         state.isLogin = payload.isLogin;
  5.  
  6.          state.userInfo = payload.userInfo;
  7.  
  8.     }
  9.  
  10. }

组件中:this.$store.commit(事件类型,数据)

如：this.$store.commit('changeLogin',{isLogin:true,userInfo:res.data.data})

actions: 异步修改全局状态，一般用于请求接口

action不能直接修改state，如果想修改state的话，需要触发mutation

  1. actions: {
  2.  
  3.         // 通过context（上下文环境）可以触发mutation，触发action，获取state、getter 等操作，第                二个参数就是我们传递过来的参数
  4.  
  5.         changeTitle(context,payload) {
  6.  
  7.              setTimeout(() => {
  8.  
  9.                  context.commit('changeLogin',payload)
  10.  
  11.              }, 1000);
  12.  
  13.         }
  14.  
  15.    }

this.$store.dispatch('action名字','参数')

modules: 将store模块化

  1. const moduleA = {
  2.  
  3.        state: { ... },
  4.  
  5.        mutations: { ... },
  6.  
  7.        actions: { ... },
  8.  
  9.        getters: { ... }
  10.     
  11. }
  12.  
  13. const moduleB = {
  14.  
  15.       state: { ... },
  16.  
  17.       mutations: { ... },
  18.  
  19.       actions: { ... }
  20.  
  21. }
  22.  
  23. const store = new Vuex.Store({
  24.  
  25.       modules: {
  26.  
  27.          a: moduleA,
  28.  
  29.          b: moduleB
  30.  
  31.      }
  32.  
  33. })

7. 谈一谈对混入的理解

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

混入：分为全局混入和局部混入 局部混入只可以在当前组件内部使用 全局混入可以在任何组件中进行使用。

局部混入：多个组件引入局部混入时,一个组件中改动了mixin中的数据,另一个引入了mixin的组件中的属性和方法是不会改变的。

全局混入：在任何组件中都可以使用 需要挂载在顶级对象上

import {mixins} from "./mixins"//先引入封装的混入代码文件

Vue.mixin(mixins)//将引入的文件属性方法挂载到Vue的顶级对象上不同的组件混入是互相独立的

选项合并：当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

组件和混入的属性方法合并优先级：

data数据冲突：mixin中的data数据和组件中的data数据冲突时,组件中的data数据会覆盖mixin中的数据；

生命周期函数：这种不算冲突,生命周期函数的名称是固定的,先执行混入里的代码再执行组件中的代码；

方法名冲突：在组件中调用该方法,调用的是组件中的方法；

优点：

提高代码复用性

只需要修改一个地方就可以

缺点：

命名冲突

滥用的话后期很难维护,排查问题不方便

8. 谈一谈对插槽的理解

插槽是子组件中提供给父组件使用的一个占位符，用<slot></slot>表示。父组件可以在这个占位符中填充任何模板代码，如HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

默认插槽：只能有一个

如：

  1. <div id="app">
  2.      <course>免费</course>
  3. </div>
  4.  
  5. <template id="course">
  6.  
  7.      <div>
  8.  
  9.        <h2><slot></slot>课程</h2>
  10.  
  11.      </div>
  12.  
  13. </template>

结果为：免费课程

具名插槽：给插槽取个名字，一个组件可以放多个插槽，而且可以放不同地方，父组件 填充内容时，可以根据这个名字把内容填充到对应插槽中。不影响默认插槽的使用。

如：

  1. <div id="app">
  2.  
  3.      <course>
  4.  
  5.        <template v-slot:header>免费</template>
  6.  
  7.      </course>
  8.  
  9. </div>
  10.  
  11. <template id="course">
  12.  
  13.    <div>
  14.  
  15.       <h2><slot name="header"></slot>课程</h2>
  16.  
  17.     </div>
  18.  
  19. </template>

结果为：免费课程

9. 什么是跨域，如何解决

同源策略：浏览器的一个安全协议，协议主机端口要保持一致，只要有一个不一样，就是跨   域请求。

同源策略就是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制。当一个请求url的协议、域名、端口三者之间任意一个与前面页面url不同即为跨域。

解决跨域：

后台直接不做限制，放开所有请求。优点就是方便，缺点就是不安全；

JSONP原理，利用script标签不受同源策略，需要后端配合；

配置代理；

配置代理：

  1. devServer：{
  2.  
  3.     proxy：{
  4.  
  5.         '/course-api'：{   //代理名称
  6.  
  7.             target：'https://course.myhope365.com/api',  //后台接口域名
  8.  
  9.             changeOrign：true,  //是否跨域
  10.  
  11.             pathRewrite：{
  12.  
  13.                 '^/course-api'：''  //路径重写
  14.     
  15.             }
  16.  
  17.         },
  18.         
  19.         //第二种写法
  20.  
  21.         '/api'：{   //代理名称
  22.  
  23.             target：’https://course.myhope365.com’,  //后台接口域名
  24.  
  25.             changeOrign：true  //是否跨域
  26.  
  27.         }
  28.  
  29.     }
  30. }

10. 谈一谈封装请求的心得

可以对请求进行统一化的管理，易于维护，同时，什么地方需要，什么地方导入就可以使用，对开发人员来说十分简便，此外，可以对请求开始前及过程中进行预处理，提高了请求的效率。

axios封装的好处：统一处理，提高效率，便于维护。
不用再挂载在Vue实例的原型上，降低了耦合度，两者互不相干了，   其中的任何一个出现问题，另一个都能正常运作。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/269452
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号