Vue复习03-小知识点

最新推荐文章于 2024-05-16 15:39:50 发布

等待freezeing

最新推荐文章于 2024-05-16 15:39:50 发布

阅读量84

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/EastFloatWater/article/details/113483930

版权

一、计算属性和侦听器

计算属性vs成员方法 ---computed vs methods

计算属性在调用是不需要加()，而函数在调用时不加（）可能会出错。当然有些情况对于计算属性和方法都需要加（）比如@change，@click
计算属性是基于响应式依赖进行缓存的，比如data，当响应式以来不变时计算属性不变。而函数则是每次调用都执行一次
一般对数据进行运算时使用计算属性，对业务逻辑进行处理时使用方法

在这种情况下计算属性的值将不会变化

computed: {
  now: function () {
    return Date.now()
  }
}

计算属性的getter和setter

 computed:{
            //一般使用get方法，只读属性
            // fullName:{
            //     set:function () {
            //
            //     },
            //     get:function () {
            //         return this.firstName+' '+this.lastName
            //     }
            // }

            //一样
            fullName:function () {
                return this.firstName+' '+this.lastName
            }
        }

计算属性vs侦听属性---computed vs watched

两者都是直接和数据挂钩，但是计算属性一般用作返回值getter，watched一般用于业务处理
计算属性一般是从data里面取值进行运算而watched是对一种数据进行侦听变化

<div id="app">
    <div >
<!--        <input v-model="message">-->
            <input v-model="message" @change="ConsoleLog()">
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
           message:"1223"
        },
        watch:{
            //直接绑定message
            message() {
                console.log("message is changed")
            }
        },
        computed:{
            //这里用函数更好
            ConsoleLog(){
                console.log("message is changed")
            }
        }


    })
</script>

二、Es6遍历

var i in arr  i->索引
console.log(arr[i])

var i of arr  i->变量
console.log(i)

for in 能够遍历数组和对象
for of 只能遍历数组

三、高阶函数

即函数里面的参数也是一个函数
filter 过滤
map 改变每个值
reduce 求和，迭代

filter

const nums=[10,20,111,222,444,40,50];
//filter 1  函数里面调用函数 number为遍历的每个值
//filter中的回调函数返回必须为boolean，返回为true时将number将入数组中
let newnums1=nums.filter(function(number)
{
return number<100
})
//箭头函数，number为参数
let newnums11=nums.filter(number=>number<100)

//nums1[10,20,40,50]

map

const nums=[10,20,111,222,444,40,50];
//map 1
let newnums2=nums.map(function(number)
{
return number*2
})
//map 2
let newnums22=nums.map(number=>number*2)

//num2[20,40,222,444,888,80,100]

reduce

const nums=[10,20,111,222,444,40,50];
//reduce 1
let newnums3=nums.reduce(function(preValue,n)
{
//求和迭代,初始值preValue为0
return preValue+n
},0)
//reduce 2
let newnums33=nums.reduce((preValue,n)=>preValue+n)

//total