欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue学习之计算属性和侦听器

程序员文章站 2022-05-17 07:50:53
...

vue 计算属性和侦听器

  1. 计算属性是基于响应式依赖进行缓存,只在相关响应式依赖(被调用)发生改变时才会重新求值(同一函数定义为一个方法时,只有触发重新渲染时,才会再次执行函数)。
// 以下计算属性将不再更新,因为 `Date.now()` 不是响应式依赖:
computed: {
  now: function () {
    return Date.now()
  }
}
  1. 计算属性默认只有 getter,在需要时自己提供一个 setter,当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]
   }
 }
}
  1. 当需要在数据变化时执行异步或开销较大的操作时,使用watch。
// 在初始化时就执行(默认false)
immediate:true
// 深度监听(默认false)。消耗性能,优化:使用字符串形式监听
deep:true
// 注销watch(这种写法会导致内置溢出)
const app = new Vue({
  template: '<div id="root">{{text}}</div>',
  data: {
    text: 0
  },
  watch: {
    text(newVal, oldVal){
      console.log(`${newVal} : ${oldVal}`);
    }
  }
});
const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
// 手动注销
unWatch();
  1. 计算属性和侦听器属性定义的函数不能使用箭头函数,否则内部this会指向组件的父环境,比如window,导致调用失败。
  2. 最后:计算属性依赖一个或多个数据(不限于当前vue实例),即模板中的某个值需要通过一个或多个数据计算得到时,就可以使用计算属性;另:计算属性的函数不接受参数。侦听器属性主要是监听某个值发生变化后,根据新值去进行逻辑处理。
相关标签: vue