vue是怎么做一个跟踪狂的

1,850 阅读16分钟

vue监听属性和计算属性

一、前言

vue是以数据驱动视图,所以很多的场景我们是基于数据的改变去做一些操作,这里就来探究一下vue是怎么样去追踪数据的变化的,追踪到数据变化,我们可以做些什么,不从源代码的角度去研究,这里我们粗浅的水一下

二、对象属性

在此之前,你需要对对象有一定的了解,首先看一个例子

var obj = {
    name: 'zhangsan',
    age: '22'
}
console.log(obj.name+'----'+obj.age);  // zhangsan----22
// 修改改对象
obj.name = 'keli';
obj.age = "20";
// 查看修改是否生效
console.log(obj.name+'----'+obj.age);  // keli----20
// -----
console.log(Math.PI);    // 3.1415926...
Math.PI = 1234;
console.log(Math.PI);    // 3.1415926...

自己声明了一个对象obj并且修改里面的属性值,发现是可以的,但是试图修改javascript的Math属性值发现是不可以的,这是为何?这里我们需要对对象的属性作进一步的学习。

javascript的属性分为数据属性和访问器属性,而不管是什么类型的属性都好,属性里面都有一个描述。

1、描述

在 Javascript 中, 属性由一个string类型的“名字”(name)和一个“属性描述符”(property descriptor)对象构成。

一个属性描述符是一个记录,由下面属性当中的某些组成的

属性描述符 作用
value 包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值时,把新值保存在这个位置。默认值是 undefined
configurable 表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性
enumerable 表示能否通过 for-in 循环返回属性
writable 表示能否修改属性的值
set 获取该属性值的设置器函数(setter)。 如果没有设置器, 该值为undefined
get 获取该属性值的访问器函数(getter)。如果没有访问器, 该值为undefined

下面我们来学习几个方法

Object.getOwnPropertyDescriptor(obj, prop)

方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

obj:需要查找的目标对象

prop:目标对象内属性名称

返回值:如果指定的属性存在于对象上,则返回其属性描述符对象(property descriptor),否则返回 undefined

Object.defineProperty(obj, prop, descriptor)

该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

obj:要定义属性的对象。

prop:要定义或修改的属性的名称或Symbol

descriptor:要定义或修改的属性描述符。

2、数据属性

数据属性包含了4个描述其行为的属性描述符:

属性描述符 作用
configurable 表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性
enumerable 表示该属性是否可以使用for...in或Object.keys()枚举
value 包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值时,把新值保存在这个位置,默认值是 undefined
writable 属性的值是否可以被重写

下面我们来看一个简单的对象它的数据属性是长怎么样的

var obj = {
    name: 'zhangsan',
    age: '22'
}
console.log(Object.getOwnPropertyDescriptor(obj, "name"))
{value: "zhangsan", writable: true, enumerable: true, configurable: true}
configurable: true
enumerable: true
value: "zhangsan"
writable: true
__proto__: Object...

可以看到对应的四个属性描述符,它们的值都是true,下面我做以下的修改

var obj = {
    name: 'zhangsan',
    age: '22'
}

Object.defineProperty(obj,"name",{
    configurable:true,
    enumerable:true,
	value:"100",
    writable:false
});
console.log(obj); // {name: "100", age: "22"}
obj.name = "keli";
console.log(obj); // {name: "100", age: "22"}

可以看到,当设置了value为100,writable为false,obj的name属性值变成了100,并且无法被修改

3、访问器属性

访问器属性包含了4个描述其行为的属性描述符:

属性描述符 作用
configurable 表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性
enumerable 表示该属性是否可以使用for...in或Object.keys()枚举
set 设置该属性值的设置器函数(setter)。 如果没有设置器, 该值为undefined
get 获取该属性值的访问器函数(getter)。如果没有访问器, 该值为undefined

注意:访问器属性没有value、writable描述符的

首先,看一下访问器属性是怎样的

var obj = {
    name: 'zhangsan',
    get age() {
		return "22"
	}
}
console.log(obj); 
cosole.log(obj.name);
console.log(obj.age);
console.log(Object.getOwnPropertyDescriptor(obj, "age"));

打印结果如下:

从上面的结果可以看到

执行console.log(obj),是不能直接看到age的值的,那么可以打印出age的值吗?

执行console.log(obj.age),发现是可以打印出age的值的

执行console.log(Object.getOwnPropertyDescriptor(obj, "age")),可以看到该属性对应的四个属性描述符,看到这里可以很明确的知道age就是一个访问器属性,好,下面来分析一下这几个描述符

首先,访问器属性里面是没有value和writable描述符的,取而代之的是get和set。

get和set描述符是以一个函数的形式出现的,当程序查询访问器的属性值时,JavaScript调用getter方法(无参数),这个方法的返回值就是该属性存取表达式的值。当程序设置一个访问器属性值时,JavaScript调用setter方法,将赋值表达式右侧的值当作参数传入setter

好了,也就是说,如果想要读取访问器属性的值,那么这个属性必须要有get描述符,如果想要设置该访问器属性的值就必须要set描述符

var obj = {
    get age() {
		return "22"
	}
}
console.log(obj.age); // 22
obj.age = '20';
console.log(obj.age); // 22

上面的结果显示,访问器属性age没有set描述符,是无法设置该属性的值的

那么如果设置该属性的值的话,就要在对象中添加添加该属性的set描述符

var obj = {
    get age() {
		return "22"
	},
	set age(val) {
		return val;
	}
}
console.log(obj.age); // 22
obj.age = '20';
console.log(obj.age); // 22

很明显这样的写法是错误的,因为读取age的值是调用get方法,它永远返回的是22,不管你设置的是什么值,因此我们要用一个变量来存储访问器属性的值

var obj = {
    get age() {
		return this._a_;
	},
	set age(val) {
		this._a_ = val;
	}
}
console.log(obj.age); // undefined
obj.age = '20';
console.log(obj.age); // 20

正确的写法如上所示。get和set方法中的this都指obj对象。名称 _a_ 只是一种惯例,并没有其它任何特殊行为,它只是一个普通的变量。把它换成其它任意合法名称如 _b_都行,甚至可以在外面将它打印出来

var obj = {
    get age() {
		return this._a_;
	},
	set age(val) {
		this._a_ = val;
	}
}
console.log(obj.age); // undefined
obj.age = '20';
console.log(obj.age); // 20
console.log(obj._a_); // 20

另外,访问器属性也是可以继承的

var obj = {
    get age() {
		return this._a_;
	},
	set age(val) {
		this._a_ = val;
	}
}
obj.age = '20';
console.log(obj.age); // 20
var newObj = Object.create(obj);
console.log(newObj.age); // 20

好了,总结一下什么是访问器属性

像age这种使用set或get方法定义的属性称为访问器属性

好了,现在了解了数据属性和访问器属性,那么问题来了,数据属性在对象中经常可以见到,那访问器属性什么用呢?

访问器属性是 ECMA 标准定义的属性类型,是用来实现 Javascript 引擎本身使用的,也就是说我们在平时定义一个对象的时候,一般情况是很少使用的。

访问器属性应用的一个场景就是双向数据绑定,上面介绍了那么多,我主要是为了介绍vue的双向数据绑定而作的铺垫

简单来说,js属性的变化,vue可以通过访问器属性实时汇报这个变化,并且通知watcher更改相应的组件

三、vue如何追踪变化的

以下内容参考vue官方文档

vue是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter

这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同。

每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

也就是说,如果一个对象里面的某个属性,vue不能把它转化成getter/setter,这就意味着vue无法追踪到该对象属性的变化,这将直接影响到组件的渲染,不是说好的数据驱动视图吗?怎么到这里就驱不动了呢?

因此,我们要了解什么情况下是vue是无法追踪数据的变化的,应该怎么解决

1、对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property

但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如,对于上例:

Vue.set(vm.data, 'b', 2)

您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

this.$set(this.data,'b',2)

有时你可能需要为已有对象赋值多个新 property,比如使用 Object.assign()_.extend()。但是,这样添加到对象上的新 property 不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

2、对于数组

Vue 不能检测以下数组的变动:

  1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength

举个例子:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题,你可以使用 splice

vm.items.splice(newLength)

3、声明响应式的property

由于 Vue 不允许动态添加根级响应式 property,所以你必须在初始化实例前声明所有根级响应式 property,哪怕只是一个空值:

var vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'

如果你未在 data 选项中声明 message,Vue 将警告你渲染函数正在试图访问不存在的 property

四、计算属性和监听器

下面先看一个简单的场景

var person = {
  firstName: "Yang",
  lastName : "Zhang",
  fullNmae:  "Yang Zhang"
};
person.firstName = "Fang";
person.fullName = "Fang " + person.lastName;
person.fullName; //Fang Zhang

上面的例子,姓名是由姓和名字组成的,也就是说如果我改变了名字,就要手动的去改变姓名,否则,姓名永远是默认值

这样维护起来太麻烦了,行,我改代码

var person = {
  firstName: "Yang",
  lastName : "Zhang",
  getFullName: function(){
      return this.firstName+' '+this.lastName;
  },
  setFullName: function(name) {
      var words = name.split(' ');
      this.firstName = words[0] || '';
      this.lastName = words[1] || '';
  }
};
person.firstName ="Fang";
person.fullName; //Fang Zhang

你这样写倒是也没有毛病,但是我可能觉得,本来就是一个属性,你给我整一个方法,太粗暴了

行的,下面将fullName改写成访问器属性

var person = {
  firstName: "Yang",
  lastName : "Zhang",
  get fullName(){
      return this.firstName+' '+this.lastName;
  },
  set fullName(name) {
      var words = name.split(' ');
      this.firstName = words[0] || '';
      this.lastName = words[1] || '';
  }
};
person.firstName ="Fang";
person.fullName; //Fang Zhang

看到这里,你可能觉得访问器属性太好用了,那是不是以后只要某个属性的值是依赖其他属性的值得到的,我都把它改写成访问器属性呢?当然可以,但是如果你使用的是vue,你大可以不必这样做,类似的vue提供了计算属性和监听器

1、计算属性

学习一样东西不仅是要学会怎么使用的,我觉得很重要还要了解它在什么场景下使用

在vue中,模板内的表达式的内容是很简单的,但是如果放入太多的逻辑会让模板过重且难以维护,如

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时,就会更加难以处理

因此,对于任何复杂逻辑,你都应当使用计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

又如,将姓名改写成计算属性:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: "Yang",
    lastName : "Zhang",
    fullName: 'Yang Zhang'
  },
  computer: {
	fullName:function(){
    	return this.firstName+' '+this.lastName;
    }
  }
})

注意

  • 在vue中计算属性的写法与实际get/set的写法是有区别的

  • 计算属性默认只有 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]
        }
      }
    }
    // ...
    

    现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstNamevm.lastName 也会相应地被更新

2、计算属性与方法的区别

上面的介绍中我们知道:只要某个属性的值是依赖其他属性的值得到的,我都把它改写成访问器属性,也可以使用方法来实现,当你不使用vue的时候,你大可以使用你喜欢的方式,但是在vue中,计算属性和方法是有区别的,你很必要去了解他们的区别,首先,看看在vue中是怎么实现计算属性同样的效果

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

既然如此,为啥不能随心所欲呢?

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

3、监听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:监听属性。

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: "Yang",
    lastName : "Zhang",
    fullName: 'Yang Zhang'
  },
  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: "Yang",
    lastName : "Zhang",
    fullName: 'Yang Zhang'
  },
  computer: {
	fullName:function(){
    	return this.firstName+' '+this.lastName;
    }
  }
})

所以我们发现,在这种情况下,计算属性比监听属性更加合适

那么问题来了,什么情况下适合使用监听属性,学习一下文档上的案例(具体的看文档)

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变,这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
    // 请参考:https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      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
        })
    }
  }
})
</script>

在这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

4、计算属性和监听属性的区别

计算属性:

  • computed的依赖值 , 也就是监测的值有多个 , 当其中的依赖值发生变化时 , 就会自动执行相应的函数
  • 计算属性的结果会被缓存,只要相关依赖未改变,只会返回之前的结果 , 除非依赖的响应式属性变化才会重新计算并且返回新的结果

监听属性:

  • 当监听属性的值发生变化时,调用对应的方法
  • 需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

共同点:

watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。

不同点:

1.watch监控属性依赖的值是单个,computed计算属性依赖的值是多个

2.watch没有缓存,computed提供缓存