vue

84 阅读3分钟

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

当创建一个Vue实例时,它将在其data对象中找到的所有属性添加到Vue的反应性系统中。当这些属性的值改变时,视图将“反应”更新以匹配新值。

区分实例属性与用户定义的属性。vm.**区分实例属性**与用户定义的属性。 vm.data, vm.$watch。

实例生命周期钩

实例生命周期钩:每个Vue实例在创建时都会经历一系列初始化步骤。 - 例如,它需要设置数据观察,编译模板,将实例安装到DOM以及在数据更改时更新DOM。一路上,它还运行称为生命周期的函数,使用户有机会在特定阶段添加自己的代码。

所有的生命周期钩子都会调用它们的this上下文,指向调用它的Vue实例

不要在选项属性或回调中使用箭头函数,例如created: () => console.log(this.a)vm.$watch('a', newValue => this.myMethod())。由于箭头函数绑定到父上下文,this因此不会像您期望的那样是Vue实例

一、对于MVVM的理解?mvvm和mvc区别?vue和其它框架(jquery)的区别是什么?哪些场景适用?

MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型,在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件,它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

mvc和mvvm其实区别并不大,都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢。

img

(1)View 层

View 是视图层,也就是用户界面。前端主要由 HTML 和 CSS 来构建 。

(2)Model 层

Model 是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,对于前端来说就是后端提供的 api 接口。

(3)ViewModel 层

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的 Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型。

需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分,而 Model 层的数据模型是只包含状态的,比如页面的这一块展示什么,而页面加载进来时发生什么,点击这一块发生什么,这一块滚动时发生什么这些都属于视图行为(交互),视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。

MVVM 框架实现了双向绑定,这样 ViewModel 的内容会实时展现在 View 层,前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图,MVVM 框架已经把最脏最累的一块做好了,我们开发者只需要处理和维护 ViewModel,更新数据视图就会自动得到相应更新。

这样 View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的重要一环。

我们以下通过一个 Vue 实例来说明 MVVM 的具体实现,有 Vue 开发经验的同学应该一目了然:

(1)View 层

<div id="app">

(2)ViewModel 层

var app = new Vue({

(3) Model 层

{

\