Vue的data为什么是函数
1.JS对象是引用类型
2.函数可以返回多个对象
3.分发到每个组件中的数据不会相互干扰
Vue2.0双向绑定原理
1.数据劫持(Object.defineProperty())
2.发布订阅模式
Vue2.0生命周期
1.beforeCreate
没有$el,没有$data
做一个loading, mounted后销毁loading
2.created
没有$el,有$data
请求数据 初始化数据
3.beforeMount
没有$el,有$data
4.mounted
有$el,有$data
el-scrollbar页面随内容自动拖到最底处 获取DOM 操作DOM
5.beforeUpdate
对要更新的数据进行检测
6.updated
7.beforeDestroy
a.事件解绑
b.清除定时器(clearTimeout() clearInterval())
c.localStorage.removeItem()
d.监听的移除
8.destroyed
keep-alive:
缓存组件, 避免多次加载。
被缓存后第一次beforeCreate + created + beforeMount + mounted + activated, 第N次activated。
1.activated
组件渲染后调用
2.deactivated
组件销毁后调用
使用场景: 详情页性能优化
v-if&v-show的使用
初次加载v-if更好
频繁切换v-show更好
v-if&v-for优先级
v-for优先
数据优先级
props > methods > data > computed > watch
watch&computed:
watch: 一个数据改变触发多个数据改变
使用场景: 页面mode切换
computed: 多个数据改变触发一个数据改变
使用场景: 购物车
filter
过滤器
mixins
数据和逻辑在多个组件间的复用
SSR
首屏加载速度更快
Virtual Dom
用javascript描述Real Dom的对象
Vue-Router
Vue-Router模式:hash history
Vue-Router钩子函数:beforeEach beforeResolve afterEach
Vue-Router钩子参数:(to, from, next)
hash模式原理:onhashchange()事件
scoped
作用
让样式在本组件中生效，不影响其他组件。
原理
给节点新增自定义属性，css根据属性选择器添加样式。
ref
用来直接获取DOM的。
$nextTick
作用:
获取更新后的DOM内容,nextTick的执行是异步的,应对随数据变化而变化的DOM结构
使用场景:
el-scrollbar拖到底部
:key
作用:
高效地更新虚拟DOM
原理:
diff算法中patch操作中会根据key判断是否为相同节点
Vue组件通信
1.props/$emit
2.$children/$parent
3.provide/reject
4.ref
5.eventBus
6.Vuex
7.localStorage/sessionStorage
8.$attrs&$listeners
父子:1,2,3,4,8
兄弟:5,6
跨级:3,5,8
Vue性能优化
1.减少data数据: 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
2.keep-alive: SPA 页面采用keep-alive缓存组件
3.服务端渲染(SSR)
