vue过滤器以及事件监听器

上面我刚刚学习了vue父子组件之间的通信，感觉很多东西在后续的学习中也逐渐搞懂！在这片博客中需要指出上篇博客中没有注意到的一个知识点！全局组件在vue实例中共享的是组件，而并非是组件里面的数据！组件的数据可以传递，但并非直接共享！

接下来分享的是过滤器，何为过滤器！过滤器,过滤东西呗.
把一个值丢进过滤器,然后过滤器对此值进行过滤.返回过滤后的数据.它的用法也比较简单!底下这段代码是我写的过滤器的实例！

 <div class="s">
        <app>app>
    div>

  let App = {   
            template: `
                    
   
                         
                         {{ title | reverse('英文版：') }}   
                    
                    `,
            data: function() {
                return {
                    title: ''
                }
            },
            filters: {
                reverse: function(mess, arg1) {    //第一个参数就是要处理的数据,后面的参数是追加到后面的数据！
                    return arg1 + mess.split('').reverse().join('');   //返回处理之后的数据
                }
            }
        }
        new Vue({
            el: '.s',
            components: {
                app: App
            }
        })

至于全局过滤器，相比于上面的，就是作用域范围发生了改变！经过全局过滤器的修改，在底下的vue组件中也可以使用该方法！

  Vue.filter('myreverse', function() {})

至于事件监听，它主要分为两种监听，是watch监听和computed监听！watch监听为单个监听，而computed为群体监听！

let App = {
            template: `
             

               change it
             
            `,
            data: function() {
                return {
                    title: 'hello',
                    stu: [{
                        name: 'renjialei',
                        age: 19
                    }]
                }
            },
            watch: {
                //key是监听的数据，value是监视后的行为
                title: function() {
                    console.log('监听简单数据类型成功');
                },
                //监听的本质是数据的地址，复杂数据值改变，但地址没有发生改变
                stu: {
                    deep: true,
                    //handler函数为后面的操作行为
                    handler: function(newval, oldval) {
                        console.log('监听复杂数据类型成功');
                    }
                }
            },
            methods: {
                handle: function() {
                    this.title = 'world';
                    this.stu[0].name = 'renge'
                    console.log(this.stu[0].name);
                }
            },
         }

 let vm = new Vue({
            el: '.s',
            computed: {
                result: function() {
                    console.log('监听到了')
                    return (this.n1 - 0) + (this.n2 - 0) * (this.n3 - 0)
                }
            },
            data: {

                n1: 0,
                n2: 0,
                n3: 0
            },
            template: `
            

                 
                 +
                 
                 *
                 
                 ={{result}}
                 
            
            `
            })

计算属性的检测机制是根据自己的依赖，如果data数据里面改变的值不是自己依赖的数据，则不会触发计算属性里面的相关方法！这就是vue里面的缓存机制！