对filter，计算属性，数据监听的一些理解

一.filter过滤器

1.全局过滤器

<p>{{stu.msg | capitalize}}</p>
Vue.filter('capitalize',function(value){
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    })
    结果:Hello,world

2.局部过滤器

<p>{{stu.msg | capitalize}}</p>
data:{
stu:{
msg:'helloworld'
}
}
    filters:{
            capitalize:function (value){
                if(!value) return ''
                value=value.toString()
                return value.charAt(0).toUpperCase()+value.slice(1)
            }
        }
结果:和上头一样

3.说到这就不得不提一句，filter在method中使用的方法了，个人觉得还挺方便，值得一读！

 let nums=[1,2,3,4,5,6,7];
    let res=nums.filter((num)=>{
        return num>5
    })
    console.log(res);
   结果：[6,7]
   代码解释：从nums数组中过滤出大于5的数

二.数据监听

<div id='app></div>

var app=new Vue({
        el:'#app',
        data: { obj: {name: "zhaoolee", age: 12} , tel:6666666},
        template: `<div><div>姓名: {{obj.name}}</div>
        <div>电话: {{tel}}</div>
        <input type="text" v-model="obj.name">
        <input type="text" v-model="tel"></div>`,
        watch: {
        obj: {
         handler(){
           console.log("obj被改变");
         },
          // 页面加载之初先执行一次handle
         immediate: true,
          // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)
         deep: true
        },
        "obj.name": {
          handler(){
            console.log("=>obj.name被改变");
          }
        },
        tel:{
          handler(){
            console.log("tel被改变");
          }
        }
      }
    })
    //自己复制代码运行一下就看懂了

三.计算属性

其实计算属性很简单，计算属性也可以做一个数据监听

<div>computed计算属性</div>
(<input type="text" name="" v-model='n1'>+
<input type="text" name="" v-model='n2'>)*
<input type="text" name="" v-model='n3'>={{result}}

data(){
	return {
		msg:{text:''},
		n1:'',
		n2:'',
		n3:'1'
		}
	},
	computed:{
		result(){
		return (Number(this.n1)+Number(this.n2))*Number(this.n3)
		}
	},

一个简简单单的计算机就做好啦

注意:computed属性名不能和data里的属性名相同

computed和watch的比较：

computed具有缓存这一功能，只有再次改变时才重新渲染。否则就直接拿缓存里的值，无法异步。

watch是只要数据发生改变，他就有响应，很适合异步操作。 就酱~~~

小小前端菜菜子，求学路漫漫，有写的不全或者不对的地方，希望大佬能指点迷津！感恩❤❤❤❤❤❤❤

喜欢就点个赞再走吧~~~~~~~~~~~