#### 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完成,更改数据会进行死循环