前端学习---vue2--选项/数据--data-computed-watch-methods-props

写在前面:
vue提供了很多数据相关的。

data 动态绑定

介绍

简单的说就是进行双向绑定的区域。
vue实例的数据对象,会把data的数据转换成getter和setter,从而可以进行响应式的变化,

vue实例创建后,可以通过vm.$data.x获取data里面的x,但同时vue实例也代理了其中的对象,所以我们一般使用简单的vm.x(this.x)就可以访问了

使用

在vue工程中data并不是一个对象,而是一个函数,其返回值是需要进行响应式的对象。
但是在引入vue的界面中可以这么写。
在这里插入图片描述
正确的写法应该是,return一个要响应式的对象,对象包括了所有需要响应式的数据。
在这里插入图片描述
此时在html定义的

<div>{{ a }}</div>

结果
在这里插入图片描述

data一般写成

    data() {
        return {
            a: 1
        }
    },

如果你为 data property 使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。

data: vm => ({ a: vm.myProp })

很好奇的是通过app.__vue__拿到的vue对象里面有一个_data是不是这个东西,不过我看里面一直在嵌套不晓得干嘛呢
在这里插入图片描述
在这里插入图片描述

使用数据

1.在模板html中可以使用插值表达式(在介绍指令的时候介绍过了)来进行动态绑定。
2.而在js中,需要通过this.x来获取x的数据。

注意一点:不是所有的vue都可以拿到,我在filters中的时候,无论是this,还是通过全局变量。
我都拿不到外面的实例,最终需要通过方法传值来进行。
具体的这些在filters的介绍在写。

3.在组件的属性上使用之间用:属性名="绑定属性"来进行就可以了
4.一些指令可以直接赋值`使用
在这里插入图片描述
在这里插入图片描述

computed 计算属性

介绍

顾名思义,计算属性,基于现有的数据计算出来的,依赖的数据变化,计算属性也会变化。
优势:初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。相同的计算有缓存,只计算一次。

基础使用

外面在js里面声明computed的配置
一个计算属性对应一个函数,这个函数需要返回属性的值
使用起来就和data里面的属性是一样的,不要当成函数来调用。


在组件定义了2个输入框动态绑定了a和b
现在需要一个属性c=a+b

        <label for="a">a元素:</label>
        <input v-model="a" name="a"/>
        <label for="b">b元素:</label>
        <input v-model="b" name="b"/>
        <div>a+b = {{c}}</div>
        <div>list的和 = {{d}}</div>
    computed:{
        c(){
            return this.a+this.b;
        },
        d(){
          return this.list.reduce((sum,cur)=>sum+cur,0);
        }
    }

在这里插入图片描述

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果:

        <div>list的和 = {{d}}</div>
        <div>list的和 = {{d}}</div>
        <div>list的和 = {{d}}</div>
        <div>list的和 = {{d}}</div>
        <HR>
        <div>list的和 = {{sum()}}</div>
        <div>list的和 = {{sum()}}</div>
        <div>list的和 = {{sum()}}</div>
        <div>list的和 = {{sum()}}</div>
    computed:{
        d(){
          return this.list.reduce((sum,cur)=>sum+cur,0);
        }
    },
    methods:{
        sum(){
            return this.list.reduce((sum,cur)=>sum+cur,0);
        }
    }

效果看起来是一样的。

在这里插入图片描述两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

外面加上打印

    computed: {
        d() {
            console.log('computed')
            return this.list.reduce((sum, cur) => sum + cur, 0);
        }
    },
    methods: {
        sum() {
            console.log('methods')
            return this.list.reduce((sum, cur) => sum + cur, 0);
        }
    }

会发现computed只调用了一次,而method调用了多次。
相比之下,每当触发重新渲染时,调用method将总会再次执行函数。
在这里插入图片描述

完整使用

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:
这个依据a和b设置c,而computed的完整板是可以通过修改c来设置a和b的。
如我想要a当c的十位,b当c的个位。修改c的时候,a和b也想要修改。就可以使用完整的computed来实现。

    computed: {
        c:{
            get(){
                return this.a * 10 + this.b;
            },
            set(c){
                this.a = parseInt(c/10);
                this.b = c % 10;
            }
        },
    },

这样就可以设置了。

watch 监听属性

介绍

作用:监听数据变化,执行一些业务逻辑

使用

    data() {
        return {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
            e: {
                f: {
                    g: 5
                }
            }
        }
    },
    watch: {
        a: function (val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        b: 'someMethod',
        // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
        c: {
            handler: function (val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
            },
            deep: true
        },
        // 该回调将会在侦听开始之后被立即调用
        d: {
            handler: 'someMethod',
            immediate: true,
        },
        // 你可以传入回调数组,它们会被逐一调用
        e: [
            'someMethod',
            function handle2(val) {
                console.log('new: %s, old: %s', JSON.stringify(val))
            },
            {
                handler: function handle3(val, oldVal) {
                    console.log('new: %s, old: %s', val, JSON.stringify(oldVal))
                },
                handler4(val){
                    console.log(val)
                }
            }
        ],
        // 监听e.f的值 {g: 5}
        'e.f': {
            deep: true,
            handler:function (val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
                console.log('new: %s, old: %s', val.g, oldVal.g)
            }
        },
    },
    methods:{
        someMethod(val, oldVal){
            console.log('new: %s, old: %s', val, oldVal)
        },
    }

首先我们可以看到,控制台执行了4
在这里插入图片描述
这就是immediate的作用,会立即执行一次。
现在修改a,可以看到每次修改都会执行,但是我们很多时候也不需要11、112这2个状态,我们可以采用防抖处理。
其他的,之间修改e对象是会报错的。e也不适合用来展示。
在这里插入图片描述

接下来修改e。会发现只执行了,“e.f"的监听,没有执行e的监听事件。
这是因为"e.f"的deep为true,其的嵌套属性也会被监听。
在这里插入图片描述
e的演示直接借助vue开发工具进行修改
在这里插入图片描述
可以看到e监听数组的函数都会被执行,然后就是简写方式,只接收一个新值。
在这里插入图片描述

methods

定义方法
如上面的

    methods:{
        someMethod(val, oldVal){
            console.log('new: %s, old: %s', val, oldVal)
        },
    }

在js调用中有像上面的,直接列举名字
当然这样不常见。

        b: 'someMethod',

常见的是在其他js中使用this.方法名调用方法。

如在其他方法中调用方法。

    methods:{
        someMethod(val, oldVal){
            console.log('new: %s, old: %s', val, oldVal)
        },
    },
    created() {
        this.someMethod();
    }

在模板中也可以调用方法。
绑定在事件上

<div @click="someMethod"></div>

props

props 可以是数组或对象,用于接收来自父组件的数据。
和data作用差不多,不同的是props专门接父组件的数据,具体在组件部分介绍。

需要设置类型,也可以设置默认值

    props: {
        flag: Boolean,
        msg: String,
        list: {
            type: Array,
            default: () => []
        },
        obj: {
            type: Object,
            default: () => ({})
        },
        num: {
            type: Number,
            default: 0
        },
    },

propsData

没用过

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只小余

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值