没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
22页
vue 中使用了哪些设计模式? 1、工厂模式 - 传入参数即可创建实例 虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode。 2、单例模式 - 整个程序有且仅有一个实例 vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉。 3、发布-订阅模式。(vue 事件机制) 4、观察者模式。(响应式数据原理) 5、装饰器模式(@装饰器的用法) 6、策略模式,策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案 - 比如选项的合并策略。
资源推荐
资源详情
资源评论
1、MVC 和 MVVM 区别
MVC
MVC 全名是 Model View Controller,时模型 - 视图 - 控制器的缩写,一种软件设计典范。
� Model(模型):是用于处理应用程序数据逻辑部分。通常模型对象负责在数据库中存
取数据。
� View(视图):是应用程序中处理数据显示的本分。通常视图是依据模型数据创建的。
� Controller(控制器):是应用程序处理用户交互的部分。通常控制器负责从视图读取
数据,控制用户输入,并向模型发送数据。
MVC 的思想:一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来,换句话
说就是在 Controller 里面把 Model 的数据赋值给 View。
MVVM
MVVM 新增了 VM 类。
ViewModel 层:做了两件事达到了数据的双向绑定,一是将【模型】转化成【视图】,
即将后端传递的数据转化成所看到的页面。 实现的方式时:数据绑定。二是将【视图】
转化成【模型】,即将所看到的页面转换成后端的数据。实现的方式是:DOM 事件监
听。
MVVM 与 MVC 最大的区别就是:实现了 View 和 Model 的自动同步,也就是当 Model 的属
性改变时,我们不用再手动操作 Dom 元素来改变 View 的显示。 而是改变属性后该属性对
应的 View 层显示会自动改变(对应 Vue 数据驱动的思想)
整体看来,MVVM 比 MVC 精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更
新的问题,不用再用选择器操作 DOM 元素。因为在 MVVM 中,View 不知道 Model 的存在,
Model 和 ViewModel 也察觉不到 View,这种低耦合模式提高代码的可重用性。
注意:Vue 并没有完全遵循 MVVM 的思想,这一点官网自己也有声明。
那么问题来了,为什么官方要说 Vue 没有完全遵循 MVVM 思想呢?
严格的 MVVVM 要求 View 不能和 Model 直接通信,而 Vue 提供了$refs 这个属性,让 Model
可以直接操作 View,违反了这一规定,所以是 Vue 没有完全遵循 MVVM。
2、为什么 data 是一个函数
组件的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回
一分新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各
自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个
变了全都会变的结果。
3、Vue 组件通讯有哪些方式?
1、props 和 $emit。父组件向子组件传递数据是通过 props 传递的,子组件传递给父组件
是通过$emit 触发事件来做到的。
2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。
3、$attrs 和 $listeners A -> B -> C。Vue2.4 开始提供了$attrs 和$listeners 来解决这个问
题。
4、父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量。(官方
不推荐在实际业务中适用,但是写组件库时很常用。)
5、$refs 获取组件实例。
6、envetBus 兄弟组件数据传递,这种情况下可以使用事件总线的方式。
7、vuex 状态管理。
4、Vue 的生命周期方法有哪些?一般在哪一步发送请求?
beforeCreate 在实例初始化之后,数据观测(data observe)和 event/watcher 事件配置
之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不
能被访问。
created 实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测
(data observe ),属性和方法的运算,watch/event 事件回调。这里没有 $el,如果非
要想与 DOM 进行交互,可以通过 vm.$nextTick 来访问 DOM。
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted 在挂载完成后发生,在当前阶段,真实的 Dom 挂载完毕,数据完成双向绑定,
可以访问到 Dom 节点。
beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁 (patch)之前。
可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated 发生在更新完成之后,当前阶段组件 Dom 已经完成更新。要注意的是避免在此
期间更新数据,因为这个可能导致无限循环的更新,该钩子在服务器渲染期间不被调用。
beforeDestroy 实例销毁之前调用。在这一步,实力仍然完全可用。我们可以在这时进行
善后收尾工作,比如清除定时器。
destroy Vue 实例销毁后调用。调用后,Vue 实例指示的东西都会解绑定,所有的事件监听
器会被移除,左右的子实例也会被销毁,该钩子在服务器端渲染不被调用。
activated keep-alive 专属,组件被激活时调用
deactivated keep-alive 专属,组件被销毁时调用
异步请求在哪一步发起?
可以在钩子函数 created、beforeMount、mounted 中进行异步请求,因为在这三个钩子
函数中,data 已经创建,可以将服务器端返回的数据进行赋值。
如果异步请求不需要依赖 DOM 推荐加载 created 钩子函数中调用异步请求,因为在
created 钩子函数中调用异步请求有以下优点:
� 能更快获取到服务端数据,减少页面 loading 时间;
剩余21页未读,继续阅读
资源评论
V393521400
- 粉丝: 1
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功