一、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方法,地址栏不会出现#,刷新页面如果不是首页一般加载不出来,除非服务器请求转发