#### Vue基本代码结构

~~~js
const vm = new Vue({
    el:'#app', //所有的挂在元素会被Vue生成的DOM替换
    data:{this->window}, //定义变量, data中的变量之间不能互相访问
    methods:{this->vm}, //定义方法, this.变量名可以访问data中的数据
    props:{}, //可以是数组或者对象类型,用于接收父组件的数据
    watch:{this->vm}, //监听data中数据的变化,监听路由的变化,一个数据影响到多个数据变化
    computed:{}, //计算属性得到的结果缓存,方便下次的使用,多个数据影响一个数据的变化
    render(){},
    //声明周期钩子函数
})
~~~

#### 理解vue的生命周期

初始化：

- beforeCreate：该函数执行结束后，会开始进行数据初始化，会定义data数据、方法以及事件，并且完成数据劫持observe以及给组件实例配置watcher观察者实例，当数据变化，才可以感知数据变化并完成页面渲染。
- created：数据已经挂载，钩子函数里面可以做一些异步操作，并且在钩子函数里更改数据不会影响运行时的钩子函数。目前已经拿到了data下的数据和methods下的方法，可以开始调用方法进行数据请求。
- 执行完毕后，判断是否有el参数，如果有是否有template参数，没有等待调用$mount(el)。确保有了el后，判断template参数选择将template模板转化为render函数，如果没有，直接将获取到的el编译成templae，再转换。
- beforeMounte：created到beforeMounte最主要的工作是将模板或者el转换为render函数。开始渲染render函数。
- mounted：数据已经挂载，真实DOM渲染出来，此时可以对dom进行操作。

运行中：

- beforeUpdate：
- updated：

销毁时：

- beforeDestroy：
- destroy：

##### 说说对Vue的理解

Vue.js是一个开源JavaScript框架，是一个创建单页应用的Web应用框架

#### 什么是MVVM，与MVM的区别

##### 1.MVVM表示的是 Model-View-ViewModel

- Model：模型层，负责处理业务逻辑以及和服务器端进行交互
- View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
- ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

##### 2.MVVM和MVM的区别

- MVM

  

  特点：所有的通信都是单向的

  View将传送指令到控制器，控制器完成业务逻辑后，要求模型的状态进行改变，同时模型将新的数据返回给视图，让用户得到反馈

- MVVM

  

  特点：实施双向的数据绑定，当View在变动的时候自动反应于ViewModel上，反之也是如此。

#### 完整的生命周期函数

- beforeCreated() 在实例创建之间执行，数据未加载的状态
- created() 在实例创建、数据加载之后，能够初始化数据，dom渲染之前执行
- beforeMount() 虚拟dom已经创建完成，在数据渲染前最后一次更改数据
- mounted() 页面、数据渲染完成，真是dom挂载完成
- beforeUpdated() 更新渲染之前触发
- updated() 数据已经更新完成，dom也诚心render完成，更改数据会进行死循环