provide 和 inject
provide：Object | () => Object
inject：Array | { [key: string]: string | Symbol | Object }
provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。from就是对应父组件传的key, default就是默认key
示例代码：
// app.vue 父组件中
provide () {
return {
test1: 'testkey',
test2: 'testkey',
}
}
// child.vue 子组件
inject: ['test1', 'test2'], // 数组形式
inject: { // 对象形式
test1: {
from: 'test1', // 向上寻找的时候是寻找这个key
default: 'ceshi1' // 找不到的话就返回这个值
}
}
created() {
cosnole.log(this.test1) // 就可以直接拿到值
}
在访问inject中的属性值的时候，vue会逐层向父组件的provide中去寻找from同名的key,如果找到就返回结果，找不到就返回default中的值
vue 父子组件以及mixin的执行顺序
mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted</code>
vue组件相关钩子函数：
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destoryed
filters: vue过滤器
这个对象里定义的方法可以作为渲染数据的过滤方法，使用方法是
<div>
这里是过滤器
{{num | filtnum}} <!--这里会把num传入到filtnum 函数里，这里渲染的就是filtnum返回的值-->
</div>
<div>
{{num | filtnum1('翻转输出： ')}} <!--过滤器也可以传参数，直接传的参数会从第二个形参开始传入-->
</div>
filters:{
filtnum(val){
val=val+'';
return val.split('').reverse().join('')
}，
filtnum1(val,val1){
val=val+'';
return val1+val.split('').reverse().join('')
}
},
deactivated: 组件停用钩子函数,v-if的组件需要放到<keep-alive/>标签里
（如果用v-if=false 组件会销毁；如果只是停用还在dom里只是不显示，不销毁��所以再次v-if=true的时候直接显示，性能会好的多）
activated：组件启用钩子函数
computed :计算属性
是把所有需要依赖其他值计算的值写成对象的key值
computed:{} 计算属性 和 method:{} 的结果是一样的，不过computed 计算属性是基于它们的响应式依赖进行缓存的.就是说只要依赖项值不变，computed的值就不在计算之后继续调用会直接返回之前的计算结果。
即：
computed:{
nowtime(){
return Date().now(); //调用一次之后就不在更新
}
}
watch 侦听器 与方法 计算属性的区别。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
这时候如果this.count发生了改变，那么监听count变量发生变化的function就会被执行
注意：需要监听的这个变量需要在data里面声明，如果不声明就会报错
data(){
return{count:1}
},
watch:{
count: (val, oldVal)=>{
console.log('new: %s, old: %s',val, oldVal)
}
}
如果被监视的data是复杂数据类型(数组，对象等)，可能data变化的时候不会出发watch执行；需要设置深度监听：
data(){
return{
count:{ a:1,b:2}
}
},
watch:{
count: {
handler(val, oldVal)=>{
console.log('new: %s, old: %s',val, oldVal)
},
deep:true
}
}
vue生命周期函数：
beforeCreate: 创建之前
这个时候，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；
this指向创建的实例
数据观测（data observer）和event/watcher配置尚未完成
不能访问到methods、data、computed、watch上的方法和数据
beforeCreate(){
console.log(this.page);// undefined
console.log{this.showPage);// undefined
},
data()
{
return{
page:'第一页'}
},
created:已创建
实例创建完成，并已经完成以下配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调
此时可以调用methods中定义的方法，修改data的数据，并且可触发响应式变化、computed值重新计算，watch到变更等
还未挂载到DOM，不能访问到ref属性内容为空数组
这个时候可以操作vue实例中的数据和各种方法，但是还不能对'dom'节点进行操作；
created(){
letbtn=document.querySelector('button')
console.log(btn.innerText)//此时找不到button节点，打印不出来button的值
}
这个生命周期阶段比较常用，比如ajax请求获取初始化数据对实例进行初始化预处理等操作；但要注意在结合vue-router使用时，进入created生命周期阶段后是无法对挂载实例进行拦截的，此时实例已经创建完成；故如果需要某些数据获取完成情况才允许进入页面的场景，建议在路由钩子beforeRouteEnter中实现
beforeMount：挂载前
在挂载开始之前被调用
注意：从vue生命周期图可以看出
当new Vue({...})的配置中没有el属性时，生命周期暂停，等待vm.$mount(el)调用时才继续
beforeMount之前，会找到对应的template，并编译成render函数
mouted: 已挂载
el被新创建的$el替换
这个时候挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行。
注意：mounted在整个实例的生命周期中只执行一次。
mounted(){
letbtn=document.querySelector('button')
console.log(btn.innerText)//此时可以打印出来button的值
}
注意mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 [vm.$nextTick]
(https://cn.vuejs.org/v2/api/#vm-nextTick)
在这个阶段改变data上的值，��关的computed属性可以立刻更新；但需要进入到下一次DOM更新，才能看到DOM上数据更新
beforeUpdate：更新前
这里的更新对象是模板，即需要虚拟 DOM 重新渲染和打补丁，beforeUpdate发生在以上两个流程之前，此时新的虚拟DOM已经生成
如果发生变更的数据���模板中并没有使用（包括直接和间接，间接：比如某个依赖该数据的计算属性在模板中使用了），则不会触发更新流程！！
data () { return {a :0,b :1} },
mounted () {
this.b++; // b并没有在模板中使用
},
beforeUpdate(){
debugger;// 不会进入这个断点
}
变更在模板中使用的data，才会再次触发重渲染流程
而且若变更操作不是基础类型的简单赋值，还会引起死循环（不断重新进入beforeUpdate）！
data () { return {a :0,c:0} },
beforeUpdate() {
console.log(document.getElementById('testa').innerHTML)
// this.c = 1; // this.c没有在模板中使用，变更不会引起重渲染流程
// this.a = 3; // 会再次进入一次重渲染流程，第二次进入时发现a仍是3，值没有变更，不会再次重渲染
// this.a ++; // 会引起死循环，每次进入重渲染流程时，a的值都会变更
},
应该避免在这个钩子函数中操作数据
updated:更新后
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作
注意：updated不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 [vm.$nextTick]
(https://cn.vuejs.org/v2/api/#vm-nextTick)
同样，应该避免在这个钩子函数中操作数据
beforeDestroy: 实例销毁前
实例销毁之前调用。在这一步，实例仍然完全可用，this仍能获取到实例
一般在这一步中进行：销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed：实例销毁后
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
