vue笔记--计算属性

1.html

<div id="app">

<p>Original message:"{{message}}"</p>

</div>

2.script

var app = new Vue({

el:"#app",

data:{

message:'Hello!'

},

computed:{

reverseMessage:function(){

return this.message.split('').reverse().join('');

}

}

})




计算缓存vs method


我们可以通过调用表达式中的method来达到同样的效果
不经过计算属性,我们可以在method中定义一个相同的函数来替代它。对于最终的效果,
两种方式确实是相同的,然而,不同的是计算属性是基于它的一栏缓存。计算属性只有在
它的相关依赖发生变化时才会重新取值。这就意味着只要message没有发生改变,多次
访问reverseMessage计算属性会立即返回计算结果,而不必再次执行函数。
相比而言,每当重新渲染的时候,method调用总会执行函数。


计算缓存 vs watched property


vue.js提供了一个方法$watch,它对于vue实例上的数据变动。当一些数据需根据其他数据变化时,
$watch很诱人。不过通常更好的办法用计算属性而不是命令式的$watch回调
$watch:
<div id="demo">{{fullName}}</div>
var vm = new Vue({
  el:'#demo',
  data:{
    firstName:'Foo',
    lastName:'Bar',
    fullName:'Foo Bar'
  },
  watch:{
    firstName:function(val){
      this.fullName = val+' '+this.lastName
    },
    lastName:function(val){
      this.fullName = this.firstName+' '+val
    }
  }
})


计算属性
var vm = new Vue({
  el:'#demo',
  data:{
    firstName:'Foo',
    lastName:'Bar'
  },
  computed:{
    fullName:function(){
      return this.firstName+this.lastName
    }
  }
})


计算setter
computed:{
  fullName:{
    get:function(){
      return this.firstName+' '+lastName
    },
    set:function(newValue){
      var names = newValue.split(' ');
      this.firstName = names[0]
      this.lastName = names[names.length-1]
    }
  }
}
现在运行vm.fullname = 'John Doe'时,setter会被调用,vm.firstName和vm.lastName
也会被对应更新。




观察watchers


虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的watcher。这是为什么Vue提供
一个更通用的方法通过watch选项,来响应数据变化。当你想要在数据变化响应时,执行一部操作
或开销较大的操作,这是很有用的。


<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{answer}}</p>
</div>


script


var watchExampleVM = new Vue({
  el:'#watch-example',
  data:{
    question:'',
    anwser:'I cannot give you an answer until you ask a question!'
  },
  watch:{
    question:function(newQuestion){
      this.answer = 'waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods:{
    getAnswer:_.debounce(
    function(){
      var vm = this
      if(this.question.indexOf('?')==-1){
        vm.answer = "questions usually contain a question mark"
        return
      }
      wm.answer = 'Think...'
      axios.get('https://yesno.wtf/api')
      .then(function(response){
        vm.answer = _.capitalize(response.data.answer)
      })
      .catch(function(error){
        vm.answer = "Error! Could not reach the API"+error
      })
    },
    500
    )
  }
})


`vue-property-decorator` 是一个用于在 Vue 中使用装饰器语法的库,它提供了一些装饰器来简化 Vue 组件的开发过程。这些装饰器可以用于定义组件的属性、方法计算属性、生命周期钩子等。 以下是一些常用的装饰器和它们的用法: - `@Component(options?: ComponentOptions)`:将一个类声明为一个 Vue 组件。可以传入一个可选的 `ComponentOptions` 对象来配置组件选项,例如 `template`、`props`、`computed` 等。 - `@Prop(options?: (Vue.PropOptions | Vue.Constructor[] | Vue.Constructor)[] | Vue.PropOptions)`:定义一个组件的 prop 属性。可以传入一个可选的 `PropOptions` 对象来配置 prop 的类型、默认值等。 - `@Watch(path: string, options?: WatchOptions)`:监听一个属性或表达式的变化,并在变化时执行相应的方法。可以传入一个可选的 `WatchOptions` 对象来配置监听选项,例如 `deep`、`immediate` 等。 - `@Emit(event?: string)`:将一个方法标记为触发事件的方法,并指定要触发的事件名。可以传入一个可选的事件名,默认为方法名。 - `@Ref(refKey?: string)`:获取子组件或 DOM 元素的引用,并将其赋值给指定的属性。可以传入一个可选的引用键,默认为属性名。 - `@Inject(key?: string | symbol)`:注入一个父组件提供的属性或方法。可以传入一个可选的注入键,默认为属性名。 - `@Provide(key?: string | symbol)`:在组件中提供属性或方法,以供子组件注入使用。可以传入一个可选的提供键,默认为属性名。 - `@Model(event?: string, options?: (PropOptions | Constructor[] | Constructor)[] | PropOptions)`:将一个 prop 属性设置为组件的 v-model。可以指定要触发的事件名和 prop 的配置选项。 这些装饰器可以与 `vue-class-component` 一起使用,帮助我们更清晰、简洁地定义 Vue 组件,并提供更好的类型支持和可读性。 希望这些笔记对你有所帮助!如有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值