生命周期钩子函数
beformeCreate 是获取不到props和data中的数据，也不能操作dom，只能执行一次
created 是vue生命周期中第一个访问到data和props中数据，但是不能操作dom树，只能执行一次
beforeMount 渲染前，能操作数据但不能操作dom，只能执行一次
mounted 渲染后，生命周期中第一个能操作dom，只能执行一次
beforeUpdate和updated 数据更新前后会调用，可以多次调用，但基本不用
在使用keep-alive的页面有两个独有的生命周期，activated 该页面显示时执行，deactivated在页面隐藏时执行
最后是销毁前后钩子函数，beforeDestroy和destroyed,前者适合做页面的善后工作（移出事件和定时器等），避免造成内存泄漏
组件通讯
组件通讯一般分为以下几种
- 父子组件通讯
- 兄弟组件通讯
- 跨多层级组件通讯
- 任意组件
父子组件
父组件通过props传递数据给子组件，子组件通过emit发送事件传递数据给父组件。但是这种传值是单向数据流，必须通过事件的方式告诉父组件修改数据
兄弟组件通讯
可以通过公共bus进行组件之间的传值
跨多层级组件通讯
是通过vue中的provide和inject结合使用
任意组件通讯
在vue中多处对一个数据进行更改，最好使用vuex进行通讯
组件间通信方式
- ref & parent
- 父传子（父访问子实例对象（this））
- 在子组件标签上定义ref属性
- this.$refs.ref值===子组件this
- 子传父(子访问父的实例的对象)
- this.$parent===父组件的this
// app <van-button> <son></son> </van-button> // son this.$parent===van-button的this
- 父传子（父访问子实例对象（this））
- props emit
- eventbus
- 定义：中间信息中转站在main.js中定义一个$bus
-
Vue.prototype.$bus=new Vue()
-
- 注册：在想接受相应信息的组件创建一个监听事件
this.$bus.on('message',(str)=>{ console.log(str) }) - 触发：在想发送信息的组件中通过$emit发送消息
this.emit('事件名'，'传递的参数')
- 定义：中间信息中转站在main.js中定义一个$bus
- eventbus
- vuex
- attrs & listeners
- v-bind="attrs非props属性
- v-on="$listeners"
- provide & inject
- 高阶组件传值
- 只用于高等组件传值给低等组件
- provide的值不可修改
- inject:的值（堆可修改，栈不可修改），原始值不可改，引用值只要不改变它的引用，它的值可以随意修改
computed和watch的区别
computed是计算属性，依赖一个或者多值，产生新的值，computed有缓存，只用当依赖的值发生改变时才会改变
watch 监听的值发生改变时才会执行，有两个参数，一个是旧值，一个是新值。
keep-alive组件的作用
在切换组件时，保持一些组件的状态防止多次渲染，可以使用keep-alive包裹该组件的路由出口，使用name标识，如果有多个使用逗号隔开。 在keep-alive中有两个特殊的生命周期构子函数，在组件切换的时候，不会进行销毁，而是缓存到内存中并执行deactivated钩子函数，该组件重新渲染时会执行actived钩子函数
v-if和v-show区别
v-show是通过控制display:none;和display:block之间进行切换，不会重新渲染dom，消耗比较小，适用于频繁切换
v-if是vue底层编译，当为false时，所在组件就不会编译，直到为true的时候才会编译渲染到页面中。（v-if不能和v-for在同一标签中使用）
动态组件
vue中提供一个特殊的元素用来动态地挂载不同的组件，使用is特性来选择要挂载的组件
<ul>
<li @click="mycom='login'">登录</li>
<li @click="mycom='regitser'">注册</li>
</ul>
<compontent :is="mycom"></compontent>
<script>
import login from './login'
import regitser from './register'
export default{
data(){
return {
mycom:'login'
}
}
}
性能优化
vue的缺点： 1 首次加载慢 2 兼容性，只支持IE8以上 vue优化
- gzip压缩（服务器处理）
- gzip就是压缩了相应的html,css,js
- 前端压缩
- 在webpack打包是支持压缩
- 后端压缩
- 路由懒加载
- 减少接口请求
- 缓存组件
- vuex存储用户信息
- 组件按需加载（异步组件，公共方法等）
- 图片精灵图（减少了服务器请求）
- cdn全局使用的js库
- 图片等资源压缩
