一、Vue中的MVVM的理解
M - 模型(Model)：数据模型。负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库西戎展开。
V - View 视图：负责页面展示，也就是用户界面。主要由HTML和CSS来构建。
VM - 视图模型：负责业务逻辑处理(比如Ajax请求等)，对数据进行加工后交给视图展示。
通过vue类创建的对象叫Vue实例化对象，这个对象就是MVVM模式中的VM层，模型通过它可以将数据绑定到页面上，视图可以通过它将数据映射到模型上。
优点：
1、低耦合。视图(View)可以独立与Model辩护和修改。
2、可重用性。可以把一些试图逻辑放在一个ViewModel里面，让很多view重用这段视频逻辑。
3、前后端分离。开发人员可以专注于业务逻辑（ViewModel）和数据的开发，设计人员可以专注于页面设计。
二、Vue渐进式的javascript框架
Vue允许将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。对于Vue的使用可大可小它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。Vue是响应式的（reactive）这是Vue最独特的特性，也就是说我们的数据变更时，Vue会帮你更新所有的网页中用到它的地方。
三、Vue生命周期
beforeCreate(创建前)：组件实例被创建之初，组件的属性生效之前
// beforeCreate生命周期执行的时候，data和methods中的数据还没有初始化，不能在这个阶段使用data中的数据和methods中的方法
created（创建后）：组件实例已经完全创建，属性也绑定，但真实的 dom 还没有生成，$el 还不能使用
// data和methods都应经被初始化好了，如果要调用methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount（挂在前）：在挂在开始之前被调用，相关的 render 函数首次被调用
// 执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted（挂载后）：在 el 被新创建的 vm.$el 替换，并挂载到实力上去之后调用该钩子
// 到mounted周期的时候，Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的 dom 节点，最早可以在这个阶段中进行
beforeUpdate（更新前）：组建数据更新之前调用，真实 dom 还没被渲染
// 当执行这个钩子时，页面中显示的数据还是旧的，data 中的数据是更新后的，页面还没有和罪行的数据保持同步
updata（更新后）：组件数据更新之后
// 页面现实的数据和data中的数据已经保持同步了，都是最新的
activated（激活前）：keep-alive 专属，组件被激活时调用
// 当组件被切回来时，再去缓存里照这个组件、触发 activated 钩子函数。
deactivated（激活后）：keep-alive专属，组件被销毁是调用
// 当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期
beforeDestory（销毁前）：组件销毁前调用
// Vue 实例从运行阶段进入到销毁阶段，这个时候上所有的 data、methods、指令、过滤器... 都是处于可用状态，还没有真正被销毁，
destoryed（销毁后）：组件销毁后调用
// 这个时候所有的 data、methods、指令、过滤器... 都是处于不可用状态。组件已经被销毁了。
Vue实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载 dom -> 渲染、更新->渲染、销毁等一系列过程，被称之为Vue 的生命周期
Vue子组件和父组件的执行顺序
加载渲染过程：beforeCreate(父) -> cerated(父) -> beforeMount(父) -> beforeCreate(子) -> cearted(子) -> beforeMount(子) -> mounted(子) -> mounted(父)
更新过程：beforeUpdate(父) -> beforeUpdate(子) -> updatad(子) -> updatad(父)
父组件更新：beforeUpdate(父) -> updatad(父)
销毁过程：beforeDestory(父) -> beforeDestory(子) -> destoryed(子) -> destoryed(父)
v-el 作用是什么
提供一个在页面上已经存在的 DOM 元素最为 Vue 实例的挂载目标。可以使 CSS 选择器。也可以是一个 HTMLElement 实例。
Vue实现数据上想绑定的原理：Object.defineProperty()
Vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布给订阅者，触发相应的监听回调。
Vue的数据双向绑定，将MVVM作为数据绑定入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（Vue 中是用来解析{{}}），最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到 数据变化->视图更新；视图交互变化(input)-> 数据model变更双向绑定效果。
数据双向绑定示例
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
注：https://blog.csdn.net/qq_45659769/article/details/119564784
