vue

一、MVVM与数据双向绑定

MVVM就是一种模式

M就是Model数据模式

V就是View视图就是页面（template）

VM就是数据与视图绑定，数据更新，页面自动刷新

数据双向绑定的原理？

利用 Object.defineProperty 给一个对象绑定一个属性，然后给这个属性加一个功能，当数据发生变化时，给这个功能写一下渲染页面的代码就OK了

let data = {}

Object.defineProperty(data, "str", {

console.log("数据更新，在这里写渲染页面的代码（把数据填到页面上）")

})

二、组件之间传值（通讯）

1、父传子

props

插槽

2、子传父

父组件使用子组件的时候给子组件绑定事件，子组件通过$emit传递数据给组件

3、兄弟互传

Vuex

localStorage

路由传参

$on + $emit

三、生命周期

beforeCreate 创建前

Created 创建好了，一般用来调接口获取数据

beforeMount 第一次渲染好页面之前

mounted 第一次渲染页面后，一般用来dom操作

beforeUpdate 组件更新前

updated 组件更新后，data数据发生变化就会触发

beforeDestroy 销毁前，比如离开页面的时候会触发，一般可以清除定时器

destroyed 销毁后

四、v-show与v-if区别

v-if为true 就显示，false就删除

v-show为true就显示，false就隐藏 display：none

五、vuex怎么使用？

state 公用状态（数据）

mutations 存放修改state的方法，通过commit调用

actions 存放公用的调用接口方法，通过dispatch调用

getters 公用计算属性

modules 模块化，可以拆分文件

六、key属性的作用？

key就是一个唯一标识，类似id，就可以让Vue区分dom元素

当列表需要排序的时候，比如 12354 的列表，进行排序后就是 12345

如果没有加key属性，排序的时候Vue无法精准识别dom元素，导致12354会全部一起渲染，性能没那么好

如果加了key属性，vue可以精准识别dom元素，那么排序的时候123Vue判定不用渲染，只需要54渲染即可

七、计算属性与函数的区别？

任意data数据发生变化，页面上使用函数来计算属性，这个函数都会执行

只要data数据发生变化，函数就会执行

只有计算属性相关的data数据发生变化，才会执行计算属性

    计算属性与watch的区别？

watch只能监听一个属性，这个属性发生变化就会触发watch的函数执行

watch支持异步请求，可以调接口（比如分页功能。获取页码自动调接口）

八、组件化开发？

整个app就是一个大组件，然后每个页面就是页面组件，然后页面组件里面还有很多小组件

    封装过什么组件？

按钮，顶部导航，底部导航，列表，文本框，弹框等等

九、Keepalive

keep-alive可以缓存组件，让组件不会走destroyed，会一直存在

一般不需要变化的页面会用keep-alive, 404页面、注册页面

十、混合开发

App程序里面内嵌一个 webview 浏览器，加载打包好的vue的h5页面

app除了性能好，体验好，还有一个优势就是硬件交互好，比如获取经纬度（GPRS）特别准确，还有就是app与其他app交互更好，比如支付

app与h5的通讯一般用jsBridge，是一个发布订阅模式（事件模式）

混合开发的项目介绍：

混合开发架构就是app与h5页面

app通过webview浏览器加载h5页面

通过jsbridge通信

app可以定义一些事件

h5也可以定义事件

App触发h5

h5触发app

（比如支付：h5触发app通过jsbridge定义的支付事件，app就会调用微信，返回支付的结果给h5）

 

 

十一、路由模式：History模式与hash模式

hash模式就是地址上#来切换，最古老的模式，兼容性好，并且地址保存收藏夹后，再次访问可以直接访问

history模式是新模式，底层用的h5的historyAPI的pushState和replaceState方法，地址栏不会出现#，刷新页面如果不是首页一般加载不出来，除非服务器请求转发