Vue面试题三@酷酷的小航航

最新推荐文章于 2024-04-04 20:45:18 发布

TongQiHang

最新推荐文章于 2024-04-04 20:45:18 发布

阅读量159

点赞数

分类专栏： Vue 文章标签： mvc mvp mvvm 跨域组件

本文链接：https://blog.csdn.net/kukuhang/article/details/103116594

版权

Vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

MVC MVP MVVM区别

MVC模式得理解

MVC一般分为 Model（模型）、Controller（控制器）、View（试图）。
View 一般通过Controller和Model进行联系。View和Model不进行联系。基本联系都是单向

View→Controller→Model→View

1.View传送指令到Controller
2.Controller完成业务逻辑后，要求Model改变状态
3.Model将新得数据发送到View，用户得到反馈

MVP模式得理解

MVP模式将Controller改名为Presenter，同时改变了通信方向

View↔Presenter↔Model

1.MVP的通信，都是双向的。
2.View于Model不发生联系，都通过Presenter传递
3.View非常薄，不部署任何业务逻辑，称为“被动试图”（Passive View），即没有任何主动性，而Presenter非常厚，所有逻辑都部署在哪里。

MVVM模式的理解

MVVM是把MVC的Controller和MVP的Presenter改成了ViewModel。

View双向ViewModel↔Model

Model、View、ViewModel三部分构成，Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑，View代表UI组件，他负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。
在MVVM架构下，View和Model之间并没有直接的联系，二十通过viewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
ViewModel通过双向数据绑定把View层和Model层链接了起来，而View和Model之间的同步工作完全是自动的，无需认为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

组件通信

父传子

父传子 - 在组件标签上通过自定义属性的形式:list="list1"绑定数据，然后在子组件中通过props接收props:[“list”]
// 组件标签 - 父组件

// 子组件接收
props: [ ‘list’ ],

子传父

在子组件中通过this. $e m i t (^{'} 自定义事件名称^{'},^{'} 要传递的数据^{'}) ，完成子组件配置在子组件的组件标签上通过 @ 自定义事件名称 = " 事件处理函数 " ，来完成父组件接收的任务 / / 子组件 - 发布 t h i s .$ emit(‘receive’, val) // 第一个参数：“自定义事件名称”；第二个参数：你要传递的数据
// 父组件 - 接收
<list @receive=“changeVal”>

兄弟

可以借助于父组件作为中转完成通信子 > 父 > 子
中央通信
目前中央通信是解决组件通信的最佳方法。
无需关注组件嵌套层级，也无需关注组件关系、
$emit - 完成发布
$on - 监听订阅
let bus = new Vue() // 空实例

// 组件A
Vue.component('Aaa', {
    template: `我是A组件`,
    methods: {
        aaa() {
            bus.$emit('is-selected')
        }
}
});
// 组件B
Vue.component('Bbb', {
    template: `我是B组件`,
    created() {
        bus.$on('is-selected', function () {
        console.log('我是B组件');
    })
}
});
//Vue实例
new Vue({
    el: '#app'
})

Vue中的跨域解决方案

什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据，指的是协议、端口、域名、只要有一个不同就是跨域
协议 http和https
端口 8080 和8081
域名 //a //b

第一种服务端 java 更改header
允许域名允许请求方法

第二种反向代理
配置代理服务器。请求另一个服务器中的数据，数据返回代理服务器中，代理服务器，返回数据给我们服务端。
在ProxyTable中
在target 中网址前缀
changeorigin：true改变源
“^/api”:" /api"中写道如/api/vi/

第三种
jsonp动态创建script标签
JQuery 中通过jsonp来跨域获取数据
第一种方法是在ajax函数中设置dataType为jsonp
第二种利用getjson来实现地址加上callback=参数
函数外定义foo方法
同源策略是浏览器的一个安全功能。不同源的客户端脚本在没有明确授权的情况下不饿能读写对方资源