Provide和Inject

Vue中主要页面就是由一个个组件搭建起来，但是在使用组件的时候，难免要传递一些数据给子组件、或者后代组件等组件之间的通信，props属性可传递给子组件数据比如说，
我们有一个列表，点击列表之后跳抓到详情页我们当然可以有路由携带id过去，但同时也可以利用props传递id过去。子组件接受到之后可以进行请求的操作，子组件也可以触发emit事件给通知父组件；但是prop只能传递给子组件，碰到给隔代传递就比较麻烦了，
所以可以用Provide和injiec来实现数据的分发和注入；下边是隔代传递通信的列子

//Test1 组件中提供了分发出去了this；
const Test1 = Vue.component("Test1", {
    template: `<div>{{message}}<Test2 /></div>`,
    provide() {
        return {
            elTest: this
        }
    },
    data() {
        return {
            message: "message from Test"
        }
    },
    methods: {
        change(component) {
            this.message = "message from " + component
        }
    }
})
//Test2 中使用Test3
const Test2 = Vue.component('Test2', {
    template: `<Test3></Test3>`
})
//Test3中注入了Test1分发的内容
const Test3 = Vue.component('Test3', {
    template: `<button @click="changeMessage">change</button>`,
    inject: ['elTest'],
    methods: {
        changeMessage() {
            this.elTest.change(this.$options._componentTag)
        }
    }
})

由于Test1中分发出来的是当前的this，在Test3中就可以调用Test1中this下面的函数就执行改函数

filter 过滤器

过滤器可以方便非常方便的，可被用于一些文本转化等地方，具体见官方｜过滤器

过滤器的执行：

这是后看到render函数刚生成还没有执行完毕，lower函数解析完毕的render函数是宝过滤器当作一个函数执行参数就是写的数据，所以在这时候是不能调用methonds,data等方法的因为vue实例还没有生成，所以在filters里边只能放静态的处理逻辑不能写业务代码的；
filter解析：
在Vue源码里边搜索filter会找到parseFilters函数故名思义就是编译filter的地方，这时候传入的参数exp就是我门写的表达式，

从图看出解析过滤器是在获取过滤器之前，解析Html模版时候同时解析的过滤器

监听器Watch

监听器就是监听数据的变化，没什么难度主要是坚挺对象的时候要加上deep:true,或者obj.a.b这样的方法去监听，推荐这个方法，因为第二个方法相对于第一个方法不是很耗费性能;使用方法如下：

<div id="app">
    <input type="text" v-model="deepMessage.a.b"> 
    <span>{{copyMessage}}</span>
</div>

 new Vue({
    el: "#app",
    watch:{
    /*
        deepMessage:{
            handler: function(v) {
                console.log(v)
                this.copyMessage=v
            },
            deep: false,//深度监听
            immediate: true,//刚上来就执行一次
        },
        */
        //推荐用下边这种方式
        'deepmessage.a.b':"handleMessage",
        
    },
    data() {
        return {
            deepMessage: {
                a: {
                    b: 1
                }
            },
            copyMessage:''
        }
    },
    methods:{
        handleMessage(v){
        	this.copyMessage=v
        }
    }
})