MVVM是Model-View-ViewModel的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
View代表UI组件，它负责将数据模型转换成UI 展现出来
ViewModel监听模型数据的改变和控制视图的行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。在MVVM架构下，View和Model没有直接的联系，而是通过ViewModel进行交互的，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的工作室同步自动的，无需认为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理
beforeCreated（创建前）在数据观测和初始化事件还未开始
created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成如下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上
Mounted（载入后）在el被新创建的vm.$el替换，并挂载到实例上去之后调用，实例已完成如下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中，此过程中进行ajax交互。
beforeUpdate（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步更新状态，不会触发附加的重渲染过程
updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM操作。然而在大多数情况下，应该避免在此期间更改状态，因为可能会导致更新无线循环，该钩子在服务器端渲染期间不被调用
beforeDestroy（销毁前）在实例销毁之前调用，实例仍然完全可用。
destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用。
Vue实例从创建到销毁的过程就是生命周期。从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、销毁等一系列操作就称为vue生命周期
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时会更容易形成好的逻辑
可以分为八个阶段。创建前后、载入前后、更新前后、销毁前后
会触发beforeCreate、Created、beforeMount、Mounted
Mounted中就已经完成了
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式方式，通过Object.defineProperty来劫持各个属性的setter、getter，在数据变动时发布信息给订阅者，触发响应监听回调。当把一个普通JS对象传给VUE实例来作为data选项时，Vue将遍历它的属性，用Object.defineProperty将它们转为getter/setter。用户看不到getter/setter,但是内部会让vue追踪依赖，在属性访问和修改时通知变化。
vue的数据双向绑定将MVVM作为数据绑定的入口，整和observer、Compile、Watcher三者，通过Observer来监听自己model的数据变化，通过compile来解析编译模板指令（vue中是用来解析{{}})，最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化->数据model变更的双向绑定效果。
父组件向子组件传递值
子组件向父组件传值
兄弟之间传递数据
hash模式：在浏览器中符号’#’,#以及#后面的字符称为hash，用window.location.hash来读取
特点：hash虽然在URL中，但是不被包括在http请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash模式下，仅hash符号之前的内容会被包含在请求中，如http://www.xxx.com因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误
history模式：history采用H5新特性，且提供了两个新方法，pushState（）、replaceState（）可以对浏览器记录栈进行修改，以及popState事件的监听到状态变更
history模式下，前端的url必须和实际向后端发起请求的URL一致，如http://www.xxx.com/items/id,后端如果缺少对items/id的路由处理，将返回404错误。**Vue-Router官网里描述：**不过这种模式要玩好，还需要后台配置支持，所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个页面，这个页面就是app依赖的页面
相同点:
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后在使用，中心思想相同，都是组件，组件实例之间可以嵌套，都提供合理的钩子函数，可以让开发者定制化地去处理需求，都不内置ajax、Route等核心包而是以插件的方式加载，在组件开发中都支持mixins的特性
不同点:
React才有virtual DOM会对渲染出来的结果做检查，Vue.js在模板中提供了指令，过滤器，可以非常方便，快捷的操作Virtual DOM
首页可以控制导航跳转，beforeEach、afterEach，一般用于页面title的修改，一些需要登录才能调整页面的重定向功能
beforeEach主要有三个参数，to、from、next
to：route即将进入的目标路由对象
from：route当前导航正要离开的路由
next：function一定要调用该方法resolve这个钩子，执行效果依赖next方法的调用参数，可以控制网页跳转
只用来读取的状态集中放在store中，改变状态的方式是提交mutations，这是个同步的事物，异步逻辑应该封装在action中，在main.js中引入store，注入。新建一个目录store，…export。场景有：单页面应用，组件之间的状态，音乐播放，登录状态，加入购物车
state：
Vuex使用单一状态数，即每个应用仅仅包含一个store实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据
mutations：
mutations定义的方法动态修改Vuex的store中的状态或数据
getters：
类似vue中的computed计算属性，主要用来过滤一些数据
action：
actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据，view层通过store.dispatch来分发action
keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免 重新渲染，keep-alive新加入了两个属性，include（包含的组件缓存）、exclude（排除的组件不缓存，优先级大于include）
参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。
数据驱动：
数据驱动也叫双向数据绑定，ViewModel，保证数据和视图的一致性，利用的是Object.definePropery和存储器属性：getter和setter，可称作为基于依赖收集的观测机制
组件系统
.vue组件的核心选项：
1、模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系
2、初始数据（data）：一个组件的初始数据状态，对于可复用的组件来说通常是私有状态
3、接收外界的参数（props）：组件之间通过参数来进行数据的传递和共享
4、方法（methods）：对数据改动操作一般在组件的方法内进行
5、生命周期钩子函数：一个组件会触发多个生命周期钩子函数
6、私有资源（assets）：vue.js当中将用户自定义的指令、过滤器组件等成为资源。一个组件可以声明自己的私有资源，私有资源只有该组件和它的组件可以调用
其实不只是vue，react中在执行列表渲染的时候要求给每个组件添加key属性。
要解释key的作用不得不说虚拟DOM的diff算法。
我们知道，vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素，只操作数据便可以更新渲染页面。
比如一下这个情况：
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置去插入新的节点。
一句话概括作用就是操作更新虚拟DOM更高效，另外vue在使用相同的标签名元素的时候过度切换会使用到key属性
本文地址：https://blog.csdn.net/weixin_43514149/article/details/107579550
如对本文有疑问， 点击进行留言回复！！
vue-cli或vue项目利用HBuilder打包成移动端app操作
我要评论
网友评论