12、过滤器filter
过滤器(filter)是输送介质管道上不可缺少的一种装置,大白话,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理,我们也可以理解其为一个纯函数。
总结:
-
filter主要用于数据展示之前的处理
-
过滤器只能用在v-bind或者插值表达式中
-
要定义到filters节点下,本质上是一个函数
-
在过滤器函数中,一定要有return值
-
再过滤器的形参中,就可以获取到“管道符”前面待处理的那个值。
-
语法
//在花括号中使用,两次过滤,将tool的返回值又传给tool2作为参数,再一次过滤 <p>{{birth|tool|tool2}}</p> //在v-bind中使用 <a :href="url|tool3">baidu</a> <script> new Vue({ el: "#app", data: { birth: "2000-01-18", url: "www.baidu.com" }, methods: { timerformatter(str) { let age = new Date().getFullYear() - new Date(str).getFullYear(); return age + "岁" } }, filters: { tool(str) { let age = new Date().getFullYear() - new Date(str).getFullYear(); return age + "岁" }, tool2(str) { if (parseInt(str) > 18) { return str + '欢迎光临' } else { return str + '未成年,不能进' } }, tool3(str) { return "http://" + str } } }) </script>
13、计算属性–computed
-
作用:1、减少代码冗余,便于维护; 2、有缓存,提升性能。
-
使用案例
//页面调用{{}} <div id="app"> <p>{{msg}}</p> <p>方法获取的年龄:{{getAge()}}</p> <p>计算属性获取的年龄:{{getAge_computed}}</p> <button @click="change">改变birth的值看看年龄变不变</button> </div> new Vue({ el: "#app", data: { msg: "hello", birth: "1995-02-03" }, methods: { getAge() { var age = new Date().getFullYear() - new Date(this.birth).getFullYear() return age + "岁" }, change() { this.birth = "1996-02-03" } }, //计算属性 computed:{ //计算属性第一种用法:函数格式 getAge_computed(){ var age = new Date().getFullYear() - new Date(this.birth).getFullYear() return age + "岁" } //计算属性第二种用法:对象格式(这才是比较正宗的使用方法) xx:{ set(oldvalue){}, get(){} } } })
-
计算属性和方法的区别:(面试)
计算属性会把使用到的data中的属性缓存起来,防止页面发生大量重复计算,
提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性
methods方法没有计算结果缓存起来,data任何数据发生改变,方法都会被重新调用一遍
方法常常是作用的事件使用,计算属性常常是动态计算结果时使用 -
补充:关于计算属性 函数什么情况下调用
-
计算属性使用时当做属性使用
-
计算属性设计时当做函数设计(就像es6中的属性)
-
当计算属性的函数中使用到的data中的数据发生变化时,计算属性就会重新执行并刷新UI
-
如果是修改了data中监听的某个的属性值 计算属性就会运行
-
如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行;
比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性
-
解决2的办法1:把修改后的数组重新赋值给data,让引用发生变化,来触发计算属性;办法2:赋值 JSON.parse(JSON.stringfy(data))
methods:{ change(arg,index1){ this.arr[index1]=arg this.arr=[...this.arr] } }, computed:{ total(){ //eval(this.arr.join("+")) // eval("100+200+88")==>把字符串当做代码运行 产生运算结果 return eval(this.arr.join("+")) } }
-
-
14、属性监听器(面试)watch
watch:{x(){}}
- 本质上是一个函数,要监听谁,就把他作为方法名;
- 只要监听到了变化,就会执行函数;
- 侦听器属性,比计算属性计算效率消耗大
- 函数内部的参数可以拿到原先的值和改变后的值,新值在前,旧值 在后。
new Vue({
el:"",//关联界面元素
data:{x:12},//vm的数据源
methods:{},//方法
filter:{},//过滤器
computed:{xx(){}}, //xx就是一个计算属性
watch:{x(){}} //x就是监听了data中的x属性的一个监听器
})
侦听器的格式
-
方法格式的侦听器
- 缺点1:无法在刚进入的时候,自动触发
- 缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器。
-
对象格式的监听器
-
好处1:可以通过immediate选项,让监听器自动触发;immediate的默认值是false , 改成true就会触发一次;
-
好处2:可以通过深度监听deep属性,让侦听器监听每个属性的变化。如果监听到的对象是子属性的变化,则必须包裹一层单引号。
body> <div id="app"> <input type="text" v-model=" info.name"> <input type="text" v-model=" price"> </div> <script> new Vue({ el: "#app", data: { info: { name: "karen" }, price: 20 }, methods: { }, filter: { }, computed: { }, watch: { //如果监听到的对象是子属性的变化,则必须包裹一层单引号。 'info.name'(newname, oldname) { console.log(newname, oldname);//新值在前面,旧值在后面 }, //对象格式的写法:可以通过immediate选项,让监听器自动触发;immediate的默认值是false , 改成true就会触发一次; price: { handler: function (newprice) { console.log(newprice); }, immediate: true } } }) </script> </body>
-
-
为了使用方便建议使用方法格式。
1、计算属性,属性侦听器,方法,过滤器有什么区别?哪些是被this对象劫持过的?
- 计算属性:会把计算的结果缓存起来,并监听计算过的数据源,如果监听到的数据源发生变化才会重新计算(没有坚挺的属性发生变化,模板会重新渲染)
- 方法一般是提供给模板时间和其它方法(比如钩子函数)使用,如果在模板中使用了方法,而不是事件,如果模板中渲染的任意数据源改变了,他都会重新调用;
- 过滤器往往用于数据渲染钱的数据处理,除了用发根方法不一样,其他都一样,没有被劫持;
- 侦听器:只有侦听器的属性发生变化才会触发(可以深度侦听,但是更消耗内存)
2、为什么要把这些函数分开设计?
为了业务更明显,功能更好劫持