vue计算属性、侦听器、插槽

计算属性(computed)

计算结果并返回,只有当被计算的值发生改变时才会触发
(即:计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算)
主要用于处理计算逻辑比较复杂的运算,计算属性默认只有getter方法,如果需要你也可以加一个setter方法

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

侦听器(watch)

监听某一个值,当被监听的值发生变化时,执行对应的操作
(与computed的区别是,watch更加适用于监听某一个值的变化并做对应的操作,比如请求后台接口等,而computed适用于计算已有的值并返回结果)

watch: {
    // 如果 `question` 发生改变,这个函数就会运行
    question: function () {
      console.log("触发了函数")
    }
  },

插槽(slot)

插槽用在组件中,只要作用是用来分发内容
App.vue
image.png
HelloWorld.vue
image.png
显示
image.png

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值