Vue常用知识点汇总

news2024/12/23 18:14:42

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

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

（2）v-html：可以渲染html界面；

（3）v-clock：防止界面闪烁；

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

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

（6）v-model：数据双向绑定；

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

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

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

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

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

双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的，通过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}})

详情见之前发布的文章——

(1条消息) Vue中路由的使用_终将抵达丶的博客-CSDN博客_vue中路由的使用https://blog.csdn.net/gkx19898993699/article/details/127034600?spm=1001.2014.3001.5502

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

（1）父传子

（2）子传父

（3）vuex

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

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

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

（4）事件总线

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

（5）本地缓存

（6）ref

详情见之前的文章——

(1条消息) 组件间的通讯方式_终将抵达丶的博客-CSDN博客https://blog.csdn.net/gkx19898993699/article/details/127928743?spm=1001.2014.3001.5502

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)不允许跳转；

6.谈一谈对Vuex的理解

（1）vuex是什么：

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

（2）使用vuex的原因：

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

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

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

此处需单独整理一个vuex的文章后续放入链接——

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条消息) VUE-组件以及插槽父子间传递（更新版）_终将抵达丶的博客-CSDN博客https://blog.csdn.net/gkx19898993699/article/details/126990630?spm=1001.2014.3001.5502

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

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

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

解决跨域：

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

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

（3）配置代理；

配置代理：

devServer：{
 
    proxy：{
 
        '/course-api'：{   //代理名称
 
            target：'https://course.myhope365.com/api',  //后台接口域名
 
            changeOrign：true,  //是否跨域
 
            pathRewrite：{
 
                '^/course-api'：''  //路径重写
    
            }
 
        },
        
        //第二种写法
 
        '/api'：{   //代理名称
 
            target：’https://course.myhope365.com’,  //后台接口域名
 
            changeOrign：true  //是否跨域
 
        }
 
    }
}